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