图像可访问性需按复杂度分层：简单图用语义化alt，中等图用aria-labelledby+aria-describedby关联标题与描述，复杂图必须配结构化<table>，动态图表需aria-live通知更新。
图像的可访问性替代不是“加个alt就行”，而是根据图表复杂度分层提供等效信息——简单图用alt，中等图用aria-labelledby+aria-describedby，复杂图必须配结构化<table>。
简单图表只靠alt会失效的典型场景
当图表包含趋势、对比或多个数据维度时，alt="销售额柱状图"这种描述对屏幕阅读器用户毫无意义。它既没说明时间范围，也没提数值变化，更无法传达“Q4比Q1翻了3倍”这类关键结论。
- 常见错误：把
alt写成“图表”“图片”“示意图”——这些词在无障碍上下文中等于空白 - 真正有效的
alt必须是自包含的语义摘要，例如：alt="2023年各季度利润：Q1 100万→Q2 150万→Q3 220万→Q4 300万，呈持续上升趋势" - 如果图表本身是装饰性的（如分隔线、纯图标），应设
alt=""并加role="presentation"，避免读屏软件误读
中等复杂度图表必须绑定aria-labelledby和aria-describedby
单纯靠alt撑不起多图例、多坐标轴或带注释的折线图。此时需拆解信息：标题归<h2>，细节归独立段落，再用ARIA属性显式关联。
-
aria-labelledby指向页面中已有的标题元素（用id标识），确保读屏软件优先朗读标题 -
aria-describedby指向隐藏但可访问的详细描述段落（用.sr-only类视觉隐藏） - 不要把描述硬塞进
alt里——过长的alt会被截断，且无法被CSS控制显示/隐藏 - 示例结构：
<h2 id="chart-title">2023年用户留存率变化</h2> <div role="img" aria-labelledby="chart-title" aria-describedby="chart-desc"> <svg>...</svg> </div> <p id="chart-desc" class="sr-only">次日留存率从1月的28%升至12月的41%，其中6月出现12%跳升，与新功能上线时间吻合。</p>
复杂图表不提供<table>就是放弃可访问性
热力图、桑基图、散点矩阵这类图表，光靠文字描述无法还原数据关系。用户需要能排序、筛选、复制的原始数据——这只能由语义化<table>承载。
立即学习“前端免费学习笔记（深入）”；
- 表格必须与图表保持数据严格一致，字段顺序、单位、小数位均需对齐
- 不要用
display: none隐藏表格——读屏软件会跳过；要用visibility: hidden或position: absolute; left: -9999px - 若表格过大影响首屏加载，可默认折叠，但必须提供“查看数据表格”按钮，且按钮需有
aria-expanded状态同步 - 避免用
<div>模拟表格——即使加了role="table"，也无法被Excel导入或键盘导航操作
动态图表更新时aria-live容易漏掉
图表随用户操作实时刷新（如筛选器切换、时间滑块拖动），仅更新DOM不够——读屏软件不会自动感知变化，必须主动通知。
- 在图表容器上加
aria-live="polite"，确保更新后延迟朗读；若需立即中断当前朗读，用aria-live="assertive" - 每次更新后，手动触发
aria-live区域的内容变更（例如向其中插入新文本或修改textContent） - 不要依赖
aria-busy="true"——它只表示“正在加载”，不触发朗读，且部分读屏软件支持不佳 - 验证方式：用NVDA或VoiceOver开启后操作图表，确认是否听到“已更新：Q3销售额为220万元”这类明确反馈
最常被忽略的点是：可访问性替代方案必须和图表同步维护。改一个数据点，alt、描述段落、表格三处都得同步更新——否则对视障用户的误导比不提供替代更严重。
