真正可访问的看板需用语义化HTML结构：每个独立语义区块（如“住院费用”）须用<section>封装并配带id的标题；表格须有具体<caption>，避免冗余headers属性；动态渲染时必须同步插入语义容器。
复杂看板系统（如医疗费用分组、保险权益矩阵、多维度监控仪表盘）若仅靠视觉样式区分区块，屏幕阅读器用户会完全丢失上下文——他们听到“,600”，却不知道这属于“住院”还是“护理机构”。真正的可访问性提升不靠 ARIA 堆砌，而靠 HTML 逻辑分区本身的语义强度。
用 包裹每个独立语义区块，而非塞进一个大 把“住院费用”“熟练护理机构”“终身储备日规则”各自封装成独立 ，再在内部放 。不要用 里的 Hospitalization
必须带 或更高级别标题，且该标题必须用 id 属性（如 Hospitalization
），否则 aria-labelledby 失效
- 每个
内部的 必须有 ，且 caption 文本要具体（如 Hospitalization cost breakdown ），不能是泛泛的“费用表”
- 避免把多个
嵌套在同一个 或 下却不加任何语义包装——这会让屏幕阅读器跳过所有区块标题，直接读数据
确保 和 的嵌套符合 WCAG 2.2 流内容模型
只能出现一次，且不能是 、
- 正确结构是：
→ → →
- 如果看板含多个平行主模块（如“费用概览”“服务覆盖”“政策时效”），每个都应是
下的直接子 ，而非多个
内部可包含自己的 （如模块操作栏）和 headers 属性只在单表内跨列/跨行时才需手动设置
当一个 里只有一张语义清晰的 ，且已用 + /
定义好行列关系，headers 属性几乎不需要写。强行给每个
加 headers="col1 row2" 不仅冗余，还极易因 DOM 变动导致关联断裂。立即学习“前端免费学习笔记（深入）”；
- 仅在以下情况才用 headers：表格存在真正多级表头（如“2024 Q1 / 北区 / 实际销售额”三层）、或某单元格需同时关联行头和列头
- 必须配合唯一 id 使用：
Q1 North Sales ，然后 120万
- 不要用 aria-describedby 替代 headers——前者只读一次描述文本，后者会在每个单元格导航时重复读出完整路径
最易被忽略的点：看板系统常动态渲染区块，但开发者往往只关注数据加载，忘了同步插入 和对应 。一旦 DOM 中缺失语义容器，所有 ARIA 补救都失效——辅助技术根本看不到“区块”这个概念，只看到一堆浮动的表格和数字。
Hospitalization |
| / | 定义好行列关系，headers 属性几乎不需要写。强行给每个 | 加 headers="col1 row2" 不仅冗余，还极易因 DOM 变动导致关联断裂。 立即学习“前端免费学习笔记（深入）”；
最易被忽略的点：看板系统常动态渲染区块，但开发者往往只关注数据加载，忘了同步插入 |
|---|
