图像可访问性需按复杂度分层：简单图用语义化alt，中等图用aria-labelledby+aria-describedby关联标题与描述，复杂图必须配结构化，动态图表需aria-live通知更新。
图像的可访问性替代不是“加个alt就行”，而是根据图表复杂度分层提供等效信息——简单图用 当图表包含趋势、对比或多个数据维度时， 单纯靠 图表随用户操作实时刷新（如筛选器切换、时间滑块拖动），仅更新DOM不够——读屏软件不会自动感知变化，必须主动通知。 最常被忽略的点是：可访问性替代方案必须和图表同步维护。改一个数据点，alt，中等图用aria-labelledby+aria-describedby，复杂图必须配结构化<table>。
<h3>简单图表只靠<code>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></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>就是放弃可访问性
<p>热力图、桑基图、散点矩阵这类图表，光靠文字描述无法还原数据关系。用户需要能排序、筛选、复制的原始数据——这只能由语义化<code><table>承载。
<ul>
<li>表格必须与图表保持数据严格一致，字段顺序、单位、小数位均需对齐</li>
<li>不要用<code>display: none隐藏表格——读屏软件会跳过；要用visibility: hidden或position: absolute; left: -9999px
aria-expanded状态同步<div>模拟表格——即使加了<code>role="table"，也无法被Excel导入或键盘导航操作
动态图表更新时
aria-live容易漏掉
aria-live="polite"，确保更新后延迟朗读；若需立即中断当前朗读，用aria-live="assertive"
aria-live区域的内容变更（例如向其中插入新文本或修改textContent）aria-busy="true"——它只表示“正在加载”，不触发朗读，且部分读屏软件支持不佳alt、描述段落、表格三处都得同步更新——否则对视障用户的误导比不提供替代更严重。
