SVG不支持alt属性，装饰性SVG需加aria-hidden="true"，功能性SVG应使用aria-label或aria-labelledby，数据可视化SVG必须配<title>、<desc>和aria-roledescription="chart"。
SVG 元素不支持 alt 属性，硬加会失效
HTML 标准中 alt 属性只适用于 <img>、<input type="image"> 和 <area>，<svg> 本身不解析也不响应 alt。如果你在 <svg> 标签上写了 alt="close icon"，浏览器会忽略它，屏幕阅读器完全读不到——这不是兼容性问题，是语法无效。
常见错误现象：
- ESLint 报
jsx-a11y/alt-text错误，但你检查的是<svg>而非<img> - 用 DevTools 查看元素属性，发现
alt出现在 DOM 中，但 VoiceOver/NVDA 不朗读 - 把 SVG 当成图片直接塞进
<img src="icon.svg">却没补alt，导致纯装饰图标也被读作“图像”
装饰性 SVG 必须显式声明 aria-hidden="true"
纯装饰用途的 SVG（如分隔线、背景花纹、无交互图标）对辅助技术没有信息价值，必须主动排除。仅靠视觉隐藏（display: none 或 visibility: hidden）不够，因为屏幕阅读器仍可能读取其内部结构。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 给
<svg>直接加aria-hidden="true"，且确保内部不包含文本、<title>或<desc> - 如果 SVG 是内联嵌入（inline SVG），不要用
role="img"包裹——这反而会误导屏幕阅读器将其识别为可交互图形 - 避免同时写
aria-hidden="true"和focusable="false"：前者已足够；后者仅在 SVG 内含可聚焦子元素（如<a>）时才需额外控制
示例：
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><br> <circle cx="10" cy="10" r="8" fill="#999"/><br></svg>
功能性 SVG 必须用 aria-label 或 aria-labelledby
当 SVG 承担交互或语义功能（如按钮图标、图表图例、带状态的开关）时，不能靠视觉暗示，必须提供明确文本替代。优先级顺序是：aria-label > aria-labelledby > <title>（仅对内联 SVG 有效，且不被所有读屏器一致支持）。
关键细节：
-
aria-label值必须简洁、动词导向，例如aria-label="Open menu"，而非"menu icon" - 若 SVG 与相邻文本构成完整语义（如按钮内图标+文字“提交”），用
aria-labelledby="id-of-text-element"更准确，避免重复描述 - 禁用
<title>单独作为无障碍方案：ChromeVox 支持，但 NVDA 在 IE/Edge Legacy 下常忽略；且<title>会被 tooltip 误触发，干扰鼠标用户 - 不要给
<svg>加role="img"后再配aria-label：多余，原生<svg>已可承载该语义
数据可视化 SVG 必须配 <title> + <desc> + aria-roledescription
图表类 SVG（如柱状图、折线图）不是装饰，也不是简单图标，而是承载结构化数据的信息载体。仅靠 aria-label 描述整体类型（如“销售额趋势图”）远远不够。
最低合规要求：
- 顶层
<svg>必须有<title>（简明标题）和<desc>（关键数据摘要，如“2024年Q1–Q4销售额：240万、280万、310万、350万”） - 添加
aria-roledescription="chart"显式告知辅助技术这是图表，而非普通图形 - 每个数据点（如
<rect>、<circle>）应有独立aria-label或通过aria-labelledby关联坐标轴标签 - 避免用颜色作为唯一区分维度：色盲用户无法识别红/绿柱子差异，必须叠加图案（
<pattern>）、纹理或文字标注
最容易被忽略的一点：SVG 容器的 viewBox 和 width/height 若设置不当，会导致缩放后文字模糊或焦点框错位——无障碍不只是语义，更是渲染稳定性。
