Web Accessibility: The Easy 80%

网页无障碍：容易做到的 80%

About one in four adults has some form of disability, according to the World Health Organization. That makes accessibility a concern for roughly a quarter of your users — and it also helps everyone else, because most accessibility improvements (clearer text, better focus, more predictable navigation) benefit all users. The good news: the Web Content Accessibility Guidelines (WCAG) have thousands of success criteria, but a small set of practices covers 80% of the real-world impact. This guide is about that set.

世界卫生组织数据显示，约四分之一的成年人存在某种形式的残疾。这意味着大约 25% 的用户会受无障碍问题影响 —— 而多数无障碍改进（更清晰的文字、更明确的焦点指示、更可预测的导航）对所有人都有好处。好消息是：虽然《Web 内容无障碍指南》（WCAG）有上千条成功标准，但一小部分实践就能覆盖 80% 的实际影响。本指南讲的就是这一小部分。

1. Use semantic HTML

1. 使用语义化 HTML

The single most impactful accessibility decision is to use the right HTML element for the job. A <button> is automatically focusable, keyboard-activatable, and announced correctly by screen readers. A <div> with an onclick handler is none of those things. The fix is mechanical: use <button> for actions, <a> for navigation, <h1> through <h6> for headings, <nav> for navigation regions, <main> for the main content, and <footer> for the page footer. You almost never need ARIA when you have used semantic HTML correctly.

影响最大的无障碍决定就是"用对的 HTML 元素做对的事"。<button> 自动可获得焦点、可通过键盘激活、屏幕阅读器能正确朗读。<div> 加 onclick 处理函数则三点都做不到。修法是机械的：操作按钮用 <button>，导航链接用 <a>，标题用 <h1> 到 <h6>，导航区用 <nav>，主体内容用 <main>，页脚用 <footer>。语义化 HTML 用对了，几乎不需要 ARIA。

2. Write good alt text

2. 写好替代文本

Every <img> needs an alt attribute. The content depends on what the image is for. Decorative images should have alt="" (an empty string) so screen readers skip them. Functional images (an icon that opens a menu) need alt text that describes the action, not the appearance: alt="Open menu", not alt="Three horizontal lines". Informative images need a concise description of the information they convey. Complex images like charts need both a short alt and a longer description either in nearby text or in a longdesc or aria-describedby attribute. People who can see the chart will appreciate that longer description too.

每张 <img> 都需要 alt 属性。内容取决于图片的用途。装饰性图片用 alt=""（空字符串），让屏幕阅读器跳过它们。功能性图片（如打开菜单的图标）的 alt 描述动作而非外观：alt="打开菜单"，而不是 alt="三条横线"。信息性图片需要一段简明的描述。复杂图片（如图表）需要短的 alt 加上一段长描述，可以放在邻近文字中，也可以放在 longdesc 或 aria-describedby 属性里。能看见图表的用户同样会感谢那段长描述。

3. Hit the color contrast targets

3. 满足颜色对比度要求

WCAG 2.1 specifies a minimum contrast ratio between text and its background. The baseline is 4.5:1 for normal body text and 3:1 for large text (18pt regular or 14pt bold). Many modern design systems target 7:1 for body text to meet the AAA level. You do not need to memorize these numbers — use a contrast checker on every important text/background pair. Aim for AA at minimum, AAA where it does not hurt the design. Pure black on pure white is overkill; #1a1a1a on #ffffff is plenty and a little less harsh on the eyes.

WCAG 2.1 规定了文本和背景之间的最低对比度。基线是正文 4.5:1、大字号（18pt 常规或 14pt 粗体）3:1。许多现代设计系统将正文目标设为 7:1 以满足 AAA 等级。你不需要背这些数字 —— 对每个重要的文字/背景组合使用对比度检查工具即可。最低目标 AA，AAA 如果不损害设计也要追求。纯黑配纯白是过度；#1a1a1a 配 #ffffff 足够，对眼睛也温和一些。

4. Make everything keyboard-navigable

4. 让一切都能用键盘导航

A large share of accessibility complaints trace back to keyboard traps, missing focus indicators, or interactive elements that cannot be reached with Tab. The fix has three parts. First, never remove the outline (the focus ring) without replacing it with an equally visible alternative — :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } is a one-liner that does the job. Second, ensure every interactive element is in the natural tab order. Third, provide a "skip to main content" link at the top of every page so keyboard users can jump past the navigation. Test by unplugging your mouse and using only the Tab, Enter, and arrow keys for an entire session.

大量无障碍投诉最终都指向三类问题：键盘陷阱、缺失的焦点指示器、Tab 无法到达的交互元素。修法分三步。第一，永远不要移除 outline（焦点环），除非用同等可见的替代品 —— :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } 一行代码就能搞定。第二，确保每个交互元素都在自然 Tab 顺序中。第三，在每个页面顶部放一个"跳到主要内容"链接，让键盘用户能跳过导航。测试方法：拔掉鼠标，用 Tab、回车和方向键完成一整次会话。

5. Label every form input

5. 为每个表单输入打标签

Every form input needs a label that is programmatically associated with it. The most reliable pattern is a <label for="x"> wrapping or pointing to the input with id="x". Placeholder text is not a label — it disappears as soon as the user types and is invisible to most screen readers. aria-label is acceptable when a visual label would clutter the design, but it is harder to translate and easier to miss. Required fields should be marked with aria-required="true" or the HTML required attribute. Error messages should be linked to the input with aria-describedby so the screen reader announces them when the user focuses the field.

每个表单输入都需要一个以编程方式关联的标签。最可靠的方式是 <label for="x"> 包裹输入框，或指向 id="x" 的输入框。占位符不是标签 —— 用户一开始输入它就消失，多数屏幕阅读器根本读不到。aria-label 在视觉标签会让设计显得拥挤时可以使用，但翻译较难，也更容易遗漏。必填字段应该用 aria-required="true" 或 HTML 的 required 属性标注。错误信息应该用 aria-describedby 关联到输入框，这样用户聚焦字段时屏幕阅读器会一并朗读错误。

Beyond the easy 80%

超越简单的 80%

If you have done all of the above, you have shipped a page that works for the vast majority of users with disabilities and is significantly more pleasant for everyone. The remaining 20% includes things like live regions for dynamic content, accessible name and description for complex widgets, focus management in single-page applications, and a real manual test with a screen reader. These are the next step, not the first step. Automated checkers like axe DevTools, Lighthouse, and the WAVE extension catch about 30% of accessibility issues on their own — combine them with keyboard testing and an actual screen reader (NVDA on Windows, VoiceOver on macOS) for the best results. Accessibility is not a checklist you complete once; it is a habit you build into every release.

如果你完成了上述所有内容，发布的页面已经能服务于绝大多数残障用户，并且对所有用户都更友好。剩下的 20% 包括动态内容的 live region、复杂组件的无障碍名称和描述、单页应用的焦点管理，以及真正的屏幕阅读器手动测试。这些是下一步，不是第一步。axe DevTools、Lighthouse、WAVE 扩展等自动化检查工具单独使用只能发现约 30% 的无障碍问题 —— 结合键盘测试和实际屏幕阅读器（Windows 上的 NVDA、macOS 上的 VoiceOver）才能得到最佳效果。无障碍不是一次性完成的清单，而是要融入每个发布版本里的习惯。