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

SVG里

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

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

内联SVG时

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

• 示例正确写法：

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

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

使用<use></use>引用外部SVG时

用<use href="icon.svg#delete"></use>这种方式复用SVG，<title></title>和<desc></desc>几乎一定不生效——因为它们被定义在外部文件里，而Shadow DOM隔离机制导致屏幕阅读器无法跨文档读取。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 唯一可靠方案：放弃<use></use>，改用内联；或用<img src="icon.svg" alt="HTML怎么创建SVG图标语义替代_HTML title与desc内部标注【教程】" >配合alt属性（但失去颜色/尺寸控制）
• 若坚持用<use></use>，只能靠父级容器补语义，比如：<span aria-label="删除文件"><use href="icon.svg#delete"></use></span>
• 注意aria-label会完全覆盖内部<title></title>，所以外部文件里即使有也不起作用
• 部分旧版IE/Edge对<use></use> + 可访问性支持极差，实测朗读率低于30%

React/Vue等框架里动态插入

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

立即学习“前端免费学习笔记（深入）”；

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

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