HelloWorld

HelloWorld 无障碍优化教程

作者：

user

在

把一个简单的 HelloWorld 页面做到无障碍，不是把所有规范都背下来，而是按“能看见、能操作、能理解、能兼容”的顺序一步步改。先用语义化标签搭骨架、补上跳过链接和可见焦点，再加上替代文本、颜色对比与键盘导航，最后用自动化工具（如 axe、Lighthouse）和手工测试（键盘、NVDA/VoiceOver）反复验证。

HelloWorld 无障碍优化教程

先讲清楚：无障碍的目标是什么？

无障碍（accessibility）不是“做给残障人士看”的额外功能，而是把信息和交互的门槛降低，让更多人——不管他们用什么设备、网络、感知能力或操作方式——都能完成核心任务。换句话说，好的无障碍就像为每个人把门把手换成更好用的那种。

用费曼法把难点拆成四块（POUR）

  • Perceivable（可感知）：内容必须被看到或听到，或有替代方式。
  • Operable（可操作）：交互元素要能通过键盘或触控操作，且避免让人迷路。
  • Understandable（可理解）：语言、标签、提示要清晰，行为可预测。
  • Robust（稳健）：遵循标准，让各种辅助技术能稳定读取页面。

把 HelloWorld 页面一步一步改好（实战步骤）

1. 语义化 HTML：先搭骨架

想象网页是一本书：标题、目录、正文、脚注。如果用正确的标签，屏幕阅读器和浏览器会自动理解结构。

  • 使用 <h1>…</h1> 到 <h2> 等来表达层次。
  • 用 <main>, <nav>, <header>, <footer> 等语义区域。
  • 表单用 <label for="id"> 明确关联控件。

2. 跳过链接与可见焦点：给键盘用户一条路

很多人习惯用键盘。给他们一个“跳过到主内容”的链接，并确保焦点样式明显。

<a href="#main" class="skip-link">跳到主内容</a>
<main id="main">
  <h1>HelloWorld</h1>
  ...
</main>

注意：不要把焦点隐藏样式设为 display:none；只在视觉上隐藏但保留键盘可达性。

3. 替代文本与多媒体处理

  • 图片加 alt：功能性图片（按钮、图标）写清楚用途；装饰性图像可空 alt=””。
  • 音视频提供字幕或文字记录；关键内容提供文字替代。

4. 键盘导航与焦点管理

不要滥用 tabindex=”0/1″。优先按 DOM 顺序让元素可达，必要时用 JavaScript 管理焦点转移并保持焦点可见。

5. 颜色对比与可缩放文本

  • 正文与背景的对比至少达到 WCAG AA 标准（一般为 4.5:1）。
  • 不要把信息仅靠颜色传达（例如：错误只用红色提示）。
  • 确保在用户放大到 200% 时布局仍可用。

6. ARIA：有用但别滥用

ARIA 能解决语义标签不足的场景，但优先使用原生 HTML。如果确实需要，用最小、最明确的属性（如 role、aria-label、aria-hidden）。

示例：一个可访问的 HelloWorld 页面（精简版）

<a href="#main" class="skip-link">跳到主内容</a>
<header>
  <h1>HelloWorld</h1>
</header>
<nav>
  <ul><li><a href="#about">关于</a></li></ul>
</nav>
<main id="main" role="main">
  <h2 id="about">关于 HelloWorld</h2>
  <p>这是一个演示页面。</p>
  <button aria-label="显示更多信息">更多</button>
</main>
<footer>版权信息</footer>

检查清单（快速参考）

项目 为什么重要 如何测试
语义化标题与区域 辅助技术能识别结构 用屏幕阅读器或辅助工具查看导航大纲
跳过链接 & 焦点 键盘用户无需逐个跳过导航 Tab 键从页面顶部开始测试
图片 alt 视觉信息的文字替代 关闭图片或用屏幕阅读器检查
颜色对比 低视力用户可读性 使用对比检查工具或手工放大测试

自动化工具与手工测试组合

自动化工具很高效但不完美。可以这样配合：

  • 先跑 axe 或 Lighthouse，修复低垂果实（missing alt、labels、contrast）。
  • 手工用键盘全程操作、放大到 200%、切换高对比/降低颜色敏感。
  • 用屏幕阅读器（NVDA、VoiceOver）实际听页面结构和控件是否合理。
  • 邀请真实用户测试：不同设备、不同能力的人群会暴露工具看不到的问题。

常见坑和实用技巧（边写边想）

  • 不要把链接文本写成“点击这里”，要写出目的（比如“查看产品详情”）。
  • 动态内容更新时用 ARIA live region（aria-live），让屏幕阅读器宣布变化。
  • 复杂控件优先考虑已被社区验证的无障碍库，而不是自己从零实现。
  • 测试别只在桌面，手机触控、屏幕放大、横屏模式也要看。

进一步阅读与规范

想深入可看 WCAG 2.1/2.2 文档，以及《Web Content Accessibility Guidelines》。工具方面参考 axe、Lighthouse、WAVE 等的使用说明书。

最后，做无障碍不是一次性的“打钩”工作，而是把可访问性作为设计和开发的习惯——像刷牙一样日常化。开始可能觉得琐碎，但当你把第一版 HelloWorld 做通了，后面很多页面都会顺着变好，一点点优化，长期回报会很明显……

更多文章