必须加role和aria-labelledby的元素包括：独立功能区块（如“实时订单数”卡片）需role="region"+aria-labelledby；图表容器需role="img"+aria-describedby指向精炼结论；多维表格单元格需headers显式关联唯一id表头。
复杂仪表盘里哪些元素必须加 role 和 aria-labelledby
纯视觉堆叠的卡片、图表容器、指标块，对屏幕阅读器来说就是一堆无意义的 div。必须用 role 明确语义，再用 aria-labelledby 建立标题关联。
常见错误是只给卡片加 role="region" 却不配标题引用，结果屏幕阅读器读出来只有“区域”，没上下文。
-
role="region"用于每个独立功能区块（如“实时订单数”卡片），必须搭配aria-labelledby="order-count-title" -
role="img"用于所有图表容器（哪怕内部是 SVG 或 Canvas），避免被当作普通容器跳过 -
role="application"不要乱用——仅当整个仪表盘是富交互应用（如可拖拽、实时重绘）且原生语义完全失效时才考虑；多数情况用role="main"+ 分层region更稳妥
aria-live 该用在哪类动态更新上？
不是所有变化都要通知。盲目加 aria-live="polite" 会导致屏幕阅读器频繁中断用户操作，尤其在多指标轮播或秒级刷新场景下极易造成信息过载。
真正需要 aria-live 的，是那些影响决策的关键状态变更：
- 告警触发（如“CPU 使用率超过 90%”），用
aria-live="assertive"确保立即播报 - 数据加载完成（如“销售数据已更新至今日 14:22”），用
aria-live="polite"并配合aria-atomic="true"避免只读局部 - 过滤器生效后表格重绘，应直接更新
<caption></caption>内容并触发aria-live，而不是在每行<td> 上重复加 <h3>仪表盘里的图表怎么提供等效文本描述？</h3> <p>单靠 <code>alt属性撑不起复杂趋势图、热力图或散点图。必须分层提供：基础描述 + 结构化数据 + 可选细节。错误做法是把整段分析文字塞进
alt，导致屏幕阅读器一次性读出上百字，用户无法暂停或回溯。- 主图用
aria-describedby="chart-desc-1"指向一个<div id="chart-desc-1">，里面放精炼结论（如“Q2 销售额环比增长 18%，主要来自华东区”） <li>紧跟主图后，用 <code><table aria-hidden="true"> 提供原始数据表格（视觉隐藏但辅助技术可访问），列名用 <code><th scope="col"> 标记 <li>如果支持展开详情，用 <code>role="button" aria-expanded="false"控制折叠面板，面板内放趋势解读、异常点标注等长文本 - 绝对不要用
colspan/rowspan替代语义——它们只影响渲染，不建立逻辑关联
为什么
scope和headers在仪表盘表格里不能省？仪表盘中常见的“多维度汇总表”（比如按地区 × 时间 × 产品线交叉统计）一旦缺失表头关联，屏幕阅读器会把每个
<td> 当作孤立数字读出，用户根本不知道它对应哪一行哪一列。 <p>别指望 CSS Grid 或 Flex 布局能自动修复语义——视觉错位和 DOM 结构错位是两回事。</p> <ul><li>单层表头：用 <code><th scope="col"> 和 <code><th scope="row"> 足够 <li>双层表头（如先分“2024”“2025”，再分“Q1”“Q2”）：上层 <code><th> 加 <code>id，下层<th> 用 <code>headers引用上层id，数据单元格再同时引用两层id最易被忽略的是跨卡片复用同一套表头结构时，
id冲突导致headers指向错误。每个卡片内的表格必须保证id全局唯一。 - 主图用
