字体图标默认不可访问，因其本质是无语义的unicode字符或伪元素，屏幕阅读器会跳过或误读；必须用aria-hidden="true"配合可见文本，或改用语义可控的内联svg。
字体图标为什么默认不可访问
字体图标（如 Font Awesome 的 <i class="fas fa-search"></i>）本质是 Unicode 字符或伪元素，浏览器不赋予其语义，屏幕阅读器会跳过、静音，或错误读作“拉丁字母 F”“装饰性符号”——这不是 bug，是设计使然。它没有 alt 属性支持，也不能像 <img> 那样被自然解析。
- 常见错误：给
<i></i>加aria-label—— 无效，因为该元素本身无交互语义，部分读屏器直接忽略 - 更糟的是：同时保留图标和可见文字（如
<i class="icon"></i> 搜索），却不加aria-hidden="true"，会导致重复朗读：“搜索 搜索” - 根本原因：字体图标不是内容，而是表现层；可访问性必须由结构层（HTML）和语义层（ARIA/role）共同承担
必须用 aria-hidden="true" + 外部文本组合
这是最稳定、兼容性最好的方案，适用于所有字体图标库（Font Awesome、Iconfont、自定义 @font-face 图标）。
-
aria-hidden="true"加在图标容器上（如<i></i>或<span></span>），明确告诉辅助技术“别管这个” - 把语义文本放在同一交互元素内（如按钮中），或通过
label显式绑定到输入框 - 禁止把文本塞进
title属性里——它不触发语音朗读，且在触摸设备上完全失效
正确示例：
<button type="submit"> <span class="icon-search" aria-hidden="true"></span> 搜索 </button>
若必须用纯图标按钮（无可见文字），则改用 aria-label，但仅限于按钮本身：<button type="submit" aria-label="搜索"><span class="icon-search" aria-hidden="true"></span></button>
SVG 图标比字体图标更容易做无障碍
内联 SVG 天然支持 <title></title> 和 role="img"，语义可控、无需额外隐藏逻辑，且不依赖字体加载状态。只要写法规范，WCAG 兼容性远超字体图标。
-
<svg></svg>根元素必须加role="img"，否则读屏器可能当普通容器处理 -
<title></title>必须是<svg></svg>的第一个或第二个子元素（紧随<desc></desc>后），否则部分 NVDA 版本会跳过 - 避免同时写
<title></title>和aria-label—— 优先级冲突，行为不可预测 - 如果 SVG 有交互（如点击跳转），需手动加
tabindex="0"并监听keydown（回车/空格）
最小可行无障碍 SVG 示例：
<svg role="img" viewbox="0 0 24 24"><title>搜索商品</title> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
不要试图用 CSS 伪元素模拟可访问图标
用 ::before 插入字体图标（如 .icon::before { content: "\f002"; font-family: "Font Awesome" }）是常见做法，但它彻底脱离 HTML 结构，无法添加任何 ARIA 属性，也无法被读屏器识别为独立元素——你连 aria-hidden 都加不上。
- 伪元素生成的内容属于 CSS 渲染层，无障碍 API 完全不可见
- 即使父元素加了
aria-label，读屏器也只读该标签，不会关联到伪元素内容 - 唯一补救方式：放弃伪元素，改用真实 HTML 元素包裹图标，并按前述方案处理
真正需要兼顾性能与无障碍时，优先选内联 SVG；若必须用字体图标，就老实用 aria-hidden="true" + 可见文本，别绕弯子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
