要让SVG矢量图标对屏幕阅读器可读，需通过语义化标记和ARIA属性赋予明确含义：添加role="img"并配合aria-label提供简洁功能性描述；纯装饰性SVG应设aria-hidden="true"且移除所有辅助文本；交互型SVG须用role="button"、tabindex="0"及aria-pressed等状态属性。
要让SVG矢量图标对屏幕阅读器（如NVDA、VoiceOver）可读，关键不是“美化”HTML，而是通过语义化标记和ARIA属性赋予图标明确的含义与交互意图。
添加role="img"并绑定aria-label
SVG本身默认不被识别为图像或控件，需显式声明角色。最简有效方式是给<svg>元素添加role="img"，再用aria-label提供简洁、功能性的文字描述。
- ✅ 正确示例：
<svg role="img" aria-label="搜索" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.421 6.421 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg> - ❌ 避免空
aria-label=""或冗余描述（如“图标：搜索”——屏幕阅读器已朗读“图形”，无需重复“图标”） - 若图标在链接或按钮内，优先用父级元素的
aria-label或aria-labelledby，避免嵌套重复
隐藏纯装饰性SVG
仅起视觉装饰作用、无信息价值的SVG（如分隔线、背景花纹），应完全屏蔽阅读器访问。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 添加
aria-hidden="true"+focusable="false"（后者防止键盘聚焦） - 同时移除所有文本内容、
<title>、<desc>等辅助描述节点 - 示例：
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.5 14.14 2.41 9.27l6.9-1.01L12 2z"/></svg>
支持交互的SVG需补充状态与操作说明
当SVG作为按钮、开关或可点击区域时，仅靠aria-label不够，必须表明其行为和当前状态。
立即学习“前端免费学习笔记（深入）”；
- 使用
role="button"（而非role="img"），并配合tabindex="0"确保键盘可聚焦 - 若有状态变化（如“静音/取消静音”），用
aria-pressed（布尔值）或aria-checked实时同步 - 必要时用
aria-describedby指向页面中一段详细说明（如“按此按钮可切换音频输出设备”）
慎用<title>和<desc>
SVG原生的<title>和<desc>在部分阅读器中会被朗读，但兼容性不稳定（尤其旧版IE或某些移动端读屏）。不建议单独依赖它们。
- 若保留，
<title>应简短（≤10字），且内容需与aria-label一致，避免冲突 -
<desc>适合长说明，但务必搭配aria-labelledby或aria-describedby显式关联，否则可能被忽略 - 推荐策略：以
aria-label为主，<title>为辅；生产环境优先测试主流读屏组合（Windows+NVDA、macOS+VoiceOver、iOS+VoiceOver）
