内联svg必须用和而非alt，且二者须为svg前两个子元素；等价于alt需简明，补充上下文；纯装饰svg仍需空并设aria-hidden="true"；role="img"和aria-label冗余有害；viewbox必须合法；动态生成svg须手动注入和。
内联 SVG 必须加 <title></title> 和 <desc></desc>，否则屏幕阅读器基本读不出内容，搜索引擎也难索引。
为什么 <title></title> 不能只靠 CSS 隐藏？
很多开发者用 display: none 或 visibility: hidden 隐藏 <title></title>，以为“视觉上不显示=不影响设计”，但这样会直接让辅助技术跳过该元素。SVG 的 <title></title> 不是装饰性标签，它是可访问性入口点。
- 必须保留在 DOM 中，且不能被
aria-hidden="true"或隐藏样式屏蔽 - 推荐用
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;实现“视觉隐藏但语义保留” - 如果 SVG 是纯装饰（比如背景分隔线），才可用
aria-hidden="true"+focusable="false"显式排除
<desc></desc> 和 alt 属性到底谁管用？
内联 SVG 没有 alt 属性——那是 <img> 标签的。唯一合法、被广泛支持的描述方式是 <desc></desc> 元素，且必须和 <title></title> 同级、同父容器（即都在根 <svg></svg> 内）。
-
<title></title>是简短名称（类似按钮文字），<desc></desc>是补充说明（类似 tooltip 或长描述） - 两者都应使用中文，避免机器翻译腔；避免重复，比如
<title>搜索图标</title> <desc>点击打开搜索框</desc> - 若 SVG 用于链接或按钮，还需在外层加
role="img"并绑定aria-labelledby，例如：@#@#@#@#@#@#@#@#@#@0
嵌套 <g></g> 和多图标的 SVG 怎么打标？
一个 <svg></svg> 里有多个功能区域（比如带图标的菜单项、状态指示组合图），不能只靠顶层 <title></title> 覆盖全部。需要按逻辑分组，给每个 <g></g> 加独立语义。
- 每个有意义的
<g></g>应包含自己的<title></title>（可选<desc></desc>），并设role="group"或role="img" - 避免在
<path></path>或<circle></circle>上直接加aria-label—— 大部分屏幕阅读器不识别这些元素上的 ARIA - 如需动态更新描述（比如加载中图标变“处理中”），直接操作
document.getElementById("my-desc").textContent = "处理中...";即可，无需重绘 SVG
最常被忽略的一点：内联 SVG 的 <title></title> 和 <desc></desc> 必须在首次渲染时就存在。用 JS 动态插入它们，或者等 React/Vue 组件挂载后再 append，都会导致初始无障碍树缺失，部分读屏器不会补读。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
