要让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></svg>元素添加role="img"，再用aria-label提供简洁、功能性的文字描述。
- ✅ 正确示例：
- ❌ 避免空
aria-label=""或冗余描述（如“图标：搜索”——屏幕阅读器已朗读“图形”，无需重复“图标”） - 若图标在链接或按钮内，优先用父级元素的
aria-label或aria-labelledby，避免嵌套重复
隐藏纯装饰性SVG
仅起视觉装饰作用、无信息价值的SVG（如分隔线、背景花纹），应完全屏蔽阅读器访问。
- 添加
aria-hidden="true"+focusable="false"（后者防止键盘聚焦） - 同时移除所有文本内容、
<title></title>、<desc></desc>等辅助描述节点 - 示例：
支持交互的SVG需补充状态与操作说明
当SVG作为按钮、开关或可点击区域时，仅靠aria-label不够，必须表明其行为和当前状态。
- 使用
role="button"（而非role="img"），并配合tabindex="0"确保键盘可聚焦 - 若有状态变化（如“静音/取消静音”），用
aria-pressed（布尔值）或aria-checked实时同步 - 必要时用
aria-describedby指向页面中一段详细说明（如“按此按钮可切换音频输出设备”）
慎用<title></title>和<desc></desc>
SVG原生的<title></title>和<desc></desc>在部分阅读器中会被朗读，但兼容性不稳定（尤其旧版IE或某些移动端读屏）。不建议单独依赖它们。
- 若保留，
<title></title>应简短（≤10字），且内容需与aria-label一致，避免冲突 -
<desc></desc>适合长说明，但务必搭配aria-labelledby或aria-describedby显式关联，否则可能被忽略 - 推荐策略：以
aria-label为主，<title></title>为辅；生产环境优先测试主流读屏组合（Windows+NVDA、macOS+VoiceOver、iOS+VoiceOver）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
