图表必须配有效alt文本而非仅“柱状图”；复杂图表需用+并aria-describedby关联；动态数据须加aria-live；svg需和role="img"；关键在描述能否被准确触发并完整传递。
图表必须配alt，但不能只写“柱状图”
屏幕阅读器遇到<img>时，若alt为空、缺失或仅含模糊词（如alt="chart"），会直接跳过，用户完全不知道数据趋势。真正有效的alt要传达结论，不是描述形式。
-
alt="2025年Q2销售额达187万元，环比增长23%，为近五年单季最高"——明确数值、比较维度和业务含义 - 避免
alt="蓝色柱状图"或alt="sales-data.png"这类无信息量写法 - 若图表旁已有相同文字摘要（如页面中已有一段文字说明该结论），则
alt=""更合适，防止重复朗读
复杂图表必须用<figure></figure>+<figcaption></figcaption>包裹
单靠alt无法承载多维数据或对比逻辑。此时<figure></figure>是语义正确且被所有主流读屏工具识别的容器，<figcaption></figcaption>提供可扩展的结构化说明。
- 必须给
<figcaption></figcaption>设id，并在<img>上用aria-describedby显式关联，否则读屏可能不自动朗读说明 - 示例：
<img src="revenue.png" alt="Q2营收同比+23%" aria-describedby="rev-desc"><figcaption id="rev-desc">2025年Q2各渠道营收：线上124万（+31%），线下63万（+11%）；线上占比升至66%</figcaption> - 禁用
<div role="figure">等自定义替代——它不触发读屏的“图表模式”行为 <h3>动态刷新的大屏数据必须加<code>aria-live大屏常每30秒轮播更新数据，但屏幕阅读器不会自动感知DOM变化。若不主动通知，视障用户会停留在旧数值上，误判实时状态。
- 把关键指标容器（如
<div class="metric-value">）包在<code><div aria-live="polite" aria-atomic="true">内 <li> <code>aria-live="polite"避免打断用户当前操作；若属紧急告警（如服务器宕机），改用"assertive" -
aria-atomic="true"确保整块内容被完整重读，而非只读变更部分（否则“187万→192万”可能被读成“192万”，丢失上下文） - 必须在
<svg></svg>内部第一层添加<title>Q2销售额趋势</title>，这是读屏识别SVG内容的唯一可靠入口 - 同时加
role="img"，否则某些读屏（如NVDA旧版）会忽略<title></title> - 若SVG含大量装饰性路径（如背景网格线），对每个
<path></path>加aria-hidden="true"，减少无效播报
SVG图表需手动补
<title></title>和role="img"内联SVG没有
alt属性，浏览器默认不向辅助技术暴露语义。仅靠CSS隐藏装饰元素也不够——未声明角色的SVG仍会被当作普通容器遍历。alt却没测过读屏实际播报效果，或把aria-live放在DOM末尾导致延迟数秒才朗读——这些细节才是大屏可访问性失效的真正原因。 - 把关键指标容器（如
