不只是“能用”：从语义化到 ARIA，打造“信息无障碍”Web 应用的实战清单

作为前端开发者，我们每天都在用代码构建一个五彩斑斓的数字世界。我们痴迷于像素级的精准、流畅的动画和极致的性能。但我们是否想过，对于某些用户来说，这个世界可能是一片漆黑，或者充满了无法逾越的障碍？

闭上眼睛，想象一下你是一位视障者。你如何“阅读”一个新闻网站？你依赖一个叫做“屏幕阅读器”的软件，它会大声朗读出页面上的内容。当你听到“图片，文件名为 img_7532.jpg”时，你一无所知。但如果你听到“图片，一只金毛寻回犬在草地上接飞盘”，这个世界瞬间就清晰了。当你按 Tab 键想在表单中跳转时，焦点却在一个看不见的

上反复横跳，你该有多么沮丧？

这不是危言耸听，这是全球超过10亿残障人士每天都在面对的数字鸿沟。

Web 无障碍（Accessibility，简称 a11y），不是一个可有可无的“加分项”，也不是什么高深莫测的技术，它是一个专业开发者必备的职业素养，是衡量一个产品是否真正“用户友好”的黄金标准。它确保我们构建的应用，无论用户的身体能力、网络条件或设备如何，都能平等、便捷地获取信息和使用功能。

这篇文章不准备讲太多空洞的口号。我将为你提供一份超级实用的实战清单 (Checklist)，将无障碍的最佳实践分解成一个个具体、可操作的任务。你可以对照这个清单，逐一检查和优化你的Web应用，让它从“能用”真正走向“好用”，为所有用户。

Part 1: 地基工程 —— 语义化 HTML

无障碍的基石，始于编写“有意义”的HTML。屏幕阅读器等辅助技术，正是通过解析HTML的语义来理解页面结构的。当你的页面充满了无意义的

和时，在辅助技术看来，它就像一篇没有标题、没有段落、没有重点的万字长文，无法卒读。

✅ 清单 1：用对的标签，做对的事

告别 div 走天下。审视你的页面，问问自己：这块内容到底是什么？

这是页头吗？ 用
，不要用
。
这是导航栏吗？ 用
。
这是主要内容区域吗？ 用
(一个页面只用一次)。
这是一篇独立的文章或卡片吗？ 用
。
这是与主要内容相关的侧边栏吗？ 用
。
这是页脚吗？ 用
。
这是一个可点击的按钮吗？ 请务必用

反例 ❌:

<div class="card">
  <div class="title">文章标题div>
  <div class="content">...div>
  <div class="button" onclick="doSomething()">点我div>
div>

正例 ✅:

<article>
  <h2>文章标题h2>
  <p>...p>
  <button onclick="doSomething()">点我button>
article>

✅ 清单 2：为所有图片提供有意义的 `alt` 文本

alt 属性是图片的“身份证”。

对于有实际意义的图片（如产品图、新闻图），alt 文本应该清晰地描述图片内容。
- 正例 ✅:
- 反例 ❌:
对于纯装饰性的图片（如背景纹理、分割线），alt 属性应该设置为空 (alt="")。这样，屏幕阅读器会直接忽略它，而不会读出无用的文件名来干扰用户。

✅ 清单 3：正确使用标题层级
-

标题标签 (Heading tags) 为页面内容构建了大纲结构。

确保
在一个页面上只出现一次，作为页面的总标题。

遵循从
到
的逻辑层级，不要跳级（比如从
直接到
），这会破坏文档的逻辑结构。

不要仅仅因为样式需求而滥用标题标签（比如用
来实现一个加粗的普通文本）。如果只是需要样式，请使用 CSS。

Part 2: 交互核心 —— 键盘可访问性

“如果一个功能不能只用键盘完成，那它就是不可访问的。” —— 这是 Web 无障碍的一条铁律。因为不仅视障用户依赖键盘，许多运动障碍者也无法使用鼠标。

✅ 清单 4：确保所有交互元素都能被 `Tab` 键聚焦

浏览器原生就为 ,

不只是“能用”：从语义化到 ARIA，打造“信息无障碍”Web 应用的实战清单