Web 无障碍开发：深入理解图标 aria-hidden="true" 的必要性

在现代前端 UI 库（FontAwesome、Lucide、Ant Design）的代码中，字体图标与 SVG 标签上普遍包含 aria-hidden="true"。本文解释该属性对于屏幕阅读器（Screen Readers）与盲人用户无障碍访问的关键价值。

一、 为什么纯装饰性图标必须隐藏？

视障用户依赖屏幕朗读软件（如 NVDA、VoiceOver）浏览网页。如果一个包含放大镜图标的搜索按钮写成：

<!-- 错误写法：朗读器会读出混乱的字体私有 Unicode 编码字符 -->
<button><i class="fa fa-search"></i> 搜索</button>

二、 正确的无障碍书写规范

<!-- 正确写法：aria-hidden="true" 告知辅助设备直接跳过视觉装饰图标 -->
<button>
    <i class="fa fa-search" aria-hidden="true"></i>
    <span>搜索</span>
</button>