内联svg必须用和提供可访问性，不能依赖alt属性；须为首个子元素，推荐紧随其后；禁用aria-label替代，避免role="img"冗余；纯装饰图直接aria-hidden="true"，交互svg需保留并设tabindex="0"；非交互svg应设focusable="false"。
内联SVG必须用和<desc>，不能靠alt</desc>
内联 SVG（即直接写在 HTML 里的 <svg></svg>）不支持 alt 属性——写了也无效。屏幕阅读器识别它靠的是内部的 <title></title> 和 <desc></desc> 元素，且顺序、嵌套位置都影响播报效果。
实操建议：
-
<title></title>必须是<svg></svg>的第一个子元素，内容应简明说明图像核心语义（如“警告图标”“折线图：Q1-Q4销售额趋势”） -
<desc></desc>可选但强烈推荐，放在<title></title>后，提供补充细节（如“横轴为季度，纵轴单位为万元，最高点为Q3的285万元”） - 别把
<title></title>写成空标签或纯空格——某些读屏工具会跳过，或报“无描述” - 避免用
aria-label替代<title></title>：虽然部分浏览器能读，但不符合 SVG 规范，Safari 和旧版 Edge 兼容性差
role="img" + aria-label 是错的，只用于非
给内联 <svg></svg> 加 role="img" 不仅多余，还可能干扰读屏逻辑。这个组合只适用于非标准图像容器（比如用 <div> + CSS background-image 模拟图片），而内联 SVG 本身就是语义化的图像元素。
<p>常见错误现象：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>写了 <code><svg role="img" aria-label="搜索按钮"></svg> → 屏幕阅读器重复播报“图像 搜索按钮”，冗余且破坏节奏
<title></title>，只留 aria-label → 在 Firefox + NVDA 组合下可能完全不读<svg></svg> 上同时设 alt 和 aria-label → 浏览器忽略 alt，且校验工具报错父容器加role="none"或aria-hidden="true"要谨慎
有时开发者想隐藏整个 SVG 容器（比如装饰性 icon），会直接给外层 <div> 加 <code>aria-hidden="true"。但这容易误杀内部可访问结构——如果 SVG 本身含交互元素（如 <path></path> 绑定 click 事件），视障用户将彻底失去操作路径。
正确做法：
- 纯装饰图：直接在
<svg></svg>标签上加aria-hidden="true"，并确保内部没有<title></title>/<desc></desc> - 带交互的 SVG（如可点击图表区域）：保留
<title></title>，用tabindex="0"+role="button"标记可聚焦区域，而非隐藏整块 - 若 SVG 嵌套在
<button></button>里，且按钮文本已说明意图（如“删除项目”），则 SVG 本身应设aria-hidden="true"，避免重复播报
viewBox 和 focusable="false"影响键盘导航
内联 SVG 默认可被键盘 tab 进入（尤其含 <a></a> 或 <g></g> 带 tabindex 时），但多数静态图标不该参与焦点流。漏掉 focusable="false" 会导致 tab 键多跳一次，打断浏览节奏。
实操要点：
- 所有非交互型内联 SVG 都应显式声明
focusable="false"（注意不是tabindex="-1"，后者仍可能被 JS 拉入焦点） -
viewBox属性虽不影响可访问性，但缺失时会导致响应式缩放失效，间接让文字类 SVG（如 logo 中的字母）在小屏上糊成一团，影响低视力用户识别 - 用
<use></use>复用图标时，确保源<symbol></symbol>内部已定义<title></title>——否则实例化后无替代文本
<title></title> 描述整体，又要在数据点上挂 aria-describedby 关联动态提示。这种时候，DOM 结构、ID 引用和 JS 更新时机稍有偏差，读屏体验就断掉了。
