创建无障碍网页

无障碍网页

插图作者：Tomomi Imura

课前测验

课前测验

“Web 的力量在于它的普遍性。让所有人都能访问它（无论是否有残疾）是至关重要的。”
—— 提姆·伯纳斯-李（Sir Timothy Berners-Lee），万维网发明者、W3C 主任

这句话完美地概括了创建无障碍网站的重要性。如果某个网站无法被所有人访问，那么它本质上是具有排他性的。作为 Web 开发者，我们应该始终牢记无障碍性（Accessibility）。从一开始就注重无障碍性，你就能确保所有用户都能访问你创建的网页。在本课程中，你将学习如何使用工具检查和改进网页的无障碍性，并了解构建无障碍网页的最佳实践。

你可以在 Microsoft Learn 上学习本课程！

常用工具

屏幕阅读器

屏幕阅读器是最常见的无障碍工具之一。

屏幕阅读器 主要服务于视力障碍者。就像我们在浏览器中检查页面展示效果一样，我们也要确保屏幕阅读器能正确朗读页面内容。

屏幕阅读器会从上到下朗读页面。如果页面仅包含文本，阅读器会像浏览器一样逐行朗读。但网页往往包含链接、图片、颜色和其他视觉元素，因此我们需要确保这些内容也能被屏幕阅读器正确解读。

✅ 每位 Web 开发者都应该熟悉屏幕阅读器的工作方式。Windows 自带 Narrator 阅读器，此外你还可以安装 JAWS 和 NVDA。macOS 和 iOS 设备默认安装了 VoiceOver。

放大工具

视力障碍者常常使用放大工具进行网页浏览。

  • 基础缩放：使用 Ctrl + + 放大或调整屏幕分辨率。
  • 局部放大：专用软件可以放大屏幕上的某个区域，例如 Windows 自带的 Magnifier 和 macOS/iOS 上的 Zoom。

对比度检查器

网站的颜色搭配需要考虑色盲或视力较弱用户的需求。低对比度可能会影响可读性。

✅ 使用浏览器扩展如 WCAG 色彩对比度检查器 检测网站颜色对比度。你能发现哪些问题？

Lighthouse

大多数现代浏览器的开发者工具都集成了 Lighthouse，它可以分析网站的无障碍性、性能和 SEO。虽然 Lighthouse 不能完全取代手动测试，但它提供了一个很好的基准评估。

✅ 在开发者工具中运行 Lighthouse 分析你喜欢的网站。你能发现哪些可改进之处？

无障碍设计原则

以下是设计无障碍网站时应遵循的核心原则：

色彩安全调色板

选择色彩时需考虑色盲用户。你可以使用 Color Safe 生成色彩安全的调色板。

✅ 找一个颜色搭配不佳的网站，思考它的问题所在。

使用语义化 HTML

使用正确的 HTML 标签可以帮助屏幕阅读器更准确地解析网页结构。例如：

  • 链接应使用 <a> 标签，而不是 <span> 模拟；
  • 按钮应使用 <button> 标签，而不是 <div> 模拟。

✅ 查看你常用的网站，检查开发者是否使用了正确的 HTML 标签。你能找到使用 <div> 模拟按钮的情况吗？

创建清晰的标题层级

屏幕阅读器用户依靠标题层级导航网页。使用语义化的标题标签（<h1> - <h6>）可以提高可读性。

良好的视觉线索

CSS 可以自定义页面外观，但要注意保留视觉线索。例如：

  • 超链接应始终带有下划线；
  • 表单控件应有清晰的边框；
  • 可交互元素应有悬停和聚焦样式。

有效的链接文本

链接文本应简洁明了，描述目标内容。例如：

✅ 正确示例：
<a href="https://en.wikipedia.org/wiki/Little_penguin">了解小企鹅</a>

❌ 错误示例：
<a href="https://en.wikipedia.org/wiki/Little_penguin">点击这里</a>

ARIA

当 HTML 本身无法提供足够语义时，可以使用 ARIA 提供额外信息。

  1. <a href="#" aria-label="小部件描述">描述</a>

图像无障碍性

为图片添加 alt 属性，描述图片内容。纯装饰性图片则使用 alt="" 避免屏幕阅读器朗读。

✅ 搜索引擎也使用 alt 文本，有助于 SEO。

键盘导航

确保网站支持键盘导航，元素按逻辑顺序排列，Tab 键可依次访问交互元素。

✅ 使用键盘测试你常访问的网站，看看导航是否顺畅。

✅ 学习无障碍开发，不仅能帮助残障用户，还能提高 SEO 和用户体验！ 🌟