图标字体需添加替代文本，因其默认仅输出unicode码点而非语义名称；正确方式包括：1.功能型图标用aria-label声明意图；2.装饰型图标加aria-hidden="true"；3.图标+可见文字共存时确保文字紧邻且未隐藏。
图标字体为什么需要替代文本
图标字体本身是字符，但浏览器和屏幕阅读器默认只读出 Unicode 码点（比如 \f07a），而不是“搜索”或“关闭”这种语义。用户看不到视觉样式时，纯靠类名或伪元素生成的图标就等于没文字——辅助技术无法理解它代表什么功能。
这不是“加个 alt 就行”的问题：<i class="fas fa-search"></i> 是空标签，alt 属性对 <i></i> 无效，且不符合 HTML 规范。
正确添加可访问性文本的三种方式
根据图标是否承载功能、是否伴随可见文字，选择对应方案：
- 功能型图标（如按钮里的搜索、删除）：用
aria-label直接声明意图，例如<button aria-label="搜索"><i class="fas fa-search"></i></button> - 装饰型图标（如列表项前的圆点、分隔线旁的小竖线）：加
aria-hidden="true"并确保父容器不暴露给辅助技术，避免干扰 - 图标+可见文字共存（如导航菜单里
<i class="fas fa-home"></i> 首页）：无需额外文本，但必须保证文字在 DOM 中紧邻图标，且不被display: none或visibility: hidden隐藏
别踩这些常见坑
很多项目看似加了 ARIA，实则失效：
-
title属性不是替代文本——它只在悬停时显示 tooltip，对键盘用户和屏幕阅读器基本无效 - 把
aria-label加在<i></i>上没用：屏幕阅读器会忽略内联元素上的语义，必须放在可交互容器（如<button></button>、<a></a>）上 - 用
aria-labelledby指向一个span，但该span被font-size: 0或clip-path隐藏了——辅助技术仍能读取，但视觉用户看不见，造成信息错位 - 图标字体加载失败时，
<i></i>可能回退成方块或乱码，此时aria-label依然有效，但视觉反馈断裂——建议配合@font-face的font-display: swap和加载状态 fallback
Font Awesome 6+ 的新写法要注意
新版 Font Awesome 推荐用 <svg></svg> 替代字体图标，但如果你还在用字体版，注意：
它的 fa-solid 类已不再支持旧版的 aria-hidden="true" 自动注入；必须显式写出来。另外，fab（品牌图标）通常需配合 aria-label 明确说明平台名称，比如 aria-label="Twitter"，不能只写“社交”。
真正容易被忽略的是：当多个图标堆叠（如 fa-stack）时，整个结构应只有一个 aria-label，且需描述组合后的整体含义，而不是分别标注每个子图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
