SVG可访问性需用内部和元素，而非title属性；二者须为直接子元素，配合aria-hidden="false"和focusable="false"才生效。

SVG里

很多人以为给加title属性就能当可访问性标注用，其实不行。浏览器不会把title属性当作图标语义读出来，屏幕阅读器基本忽略它。真正起作用的是和这两个**SVG内部元素**，必须放在根标签内，且得在、等图形元素之前。

• 对应图标名称（如“搜索”“关闭”），会被朗读为首要标签
• 补充上下文（如“打开用户设置面板”），朗读优先级低于，但对复杂图标很关键
• 二者都必须是的直接子元素，嵌套在里无效
• 内容建议用纯文本，别加HTML标签或换行符，否则可能被截断或跳过

内联SVG时

如果你是把SVG代码直接贴进HTML（比如用标签），那和就得手写——工具导出的SVG通常不带，或者只带title属性。别指望CSS或JS后期注入能生效，屏幕阅读器只认初始DOM结构里的这两个元素。

• 示例正确写法：

  <svg aria-hidden="false" focusable="false"><title>删除文件</title>
  <desc>永久移除所选项目，不可恢复</desc><path d="M..."></path></svg>

• aria-hidden="false"必须显式设置，否则即使写了也会被忽略
• focusable="false"防止键盘焦点停在SVG上，干扰操作流
• 如果图标用于按钮，更推荐把语义交给按钮本身（删除文件），SVG只设aria-hidden="true"

使用引用外部SVG时

用这种方式复用SVG，和几乎一定不生效——因为它们被定义在外部文件里，而Shadow DOM隔离机制导致屏幕阅读器无法跨文档读取。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 唯一可靠方案：放弃，改用内联；或用配合alt属性（但失去颜色/尺寸控制）
• 若坚持用，只能靠父级容器补语义，比如：
• 注意aria-label会完全覆盖内部，所以外部文件里即使有也不起作用
• 部分旧版IE/Edge对 + 可访问性支持极差，实测朗读率低于30%

React/Vue等框架里动态插入

在组件里用JSX或模板语法生成，看似简单，但容易因条件渲染、异步加载或SSR未同步而丢失。比如Vue中v-if控制SVG显示，没跟着一起挂载，屏幕阅读器就读不到。

• 确保和与图形元素同级、同生命周期渲染，不要用v-show或display: none隐藏它们
• React中避免在useEffect里动态appendChild，应直接写在JSX返回值里
• SSR场景下，服务端渲染必须包含这两个元素，否则首屏无语义，客户端hydrate后也补不回来
• 测试方法：Chrome DevTools → Accessibility面板 → 检查节点是否显示“Name”和“Description”字段

事情说清了就结束。最常被忽略的其实是aria-hidden和focusable的组合开关——只写不设aria-hidden="false"，等于白写。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！