你打开了一个包含 452 个无障碍错误的电子表格。你的自动化测试工具在不到三分钟的时间内就标记了所有这些错误，现在你的开发团队正默默地看着你。其中一半的问题被标记为“严重”，但没人知道 2018 年某篇博客文章中缺失的图片描述，是否比一个缺乏清晰聚焦状态的注册表单更紧急。
面对庞大的无障碍积压工作，产生退缩心理是很自然的反应。你不可能在下周五之前修复所有 452 个问题。如果你试图按字母顺序或时间顺序来处理这个列表，你会在没有真正让网站变得更好用的情况下，就烧光了所有的预算。
你需要进行分类筛选。
分类筛选思维：为什么你不能一次性修复所有问题
当急诊室人满为患时，医生不会按照患者进门的顺序进行治疗。他们会在给扭伤的手指包扎之前，先救治无法呼吸的病人。
你的无障碍积压工作也需要完全相同的方法。
像 Lighthouse 或 Axe 这样的自动化工具非常适合寻找代码层面的错误，但它们缺乏人类的上下文理解。它们对待装饰性背景图案上缺失的图片描述，与屏幕阅读器无法朗读的结账按钮，其严重程度是一样的。
如果你试图同时解决每一个警告，你的团队就会陷入琐碎的代码调整中，而这些调整并不能改善实际的用户体验。相反，应该专注于关键路径。如果用户无法导航你的主菜单、注册你的产品或阅读你的定价页面，那么你的网站对他们来说就是无法使用的。
把你的无障碍积压工作当成急诊室，而不是一个线性的待办事项列表。专注于那些完全阻碍用户完成任务的障碍。
首先修复键盘导航
如果用户无法使用键盘导航你的网站，那么你其余的无障碍修复都将毫无意义。
许多用户不使用鼠标。他们可能会使用 Tab 键、切换设备或屏幕阅读器进行导航。如果你的交互元素（如链接、按钮和表单字段）在构建时没有考虑键盘输入，这些用户就会被完全拒之门外。
首先自己进行测试。把鼠标放在地上，尝试仅使用键盘登录你的产品或购买你的服务。
在此测试期间，寻找两个关键问题：
- 缺失聚焦指示器： 当你按下 Tab 键时，你真的能看到自己在屏幕上的位置吗？如果你的样式表中有类似
outline: none的 CSS 规则，你实际上就为键盘用户隐藏了光标。 - 混乱的 Tab 键顺序： 导航是否逻辑清晰地从上到下、从左到右移动？如果你的光标从页眉跳到页脚，然后又跳回页面中间，说明底层的 HTML 结构顺序混乱。
例如，让我们来看看一个典型的 SaaS 定价页面。假设你有 3 个定价档位，每个档位都有一个“选择方案”按钮。如果你的聚焦指示器被隐藏了，键盘用户必须在完全看不见的情况下，按下 Tab 键大约 15 次才能从顶部菜单导航到这些按钮。他们根本不知道自己即将选择哪一个方案。
修复这个问题通常只需要恢复浏览器默认的轮廓，或者在 CSS 中设计自定义的高显性聚焦状态。这是一个快速的开发胜利，能立即向更多用户开放你的网站。
解决对比度和颜色问题
高对比度不仅仅是为了满足合规性检查，它是可读性设计的基石。
如果你的营销网站在白色背景上使用浅灰色文本，你就是在让你的受众读得太吃力。这不仅是针对有永久性视觉障碍的用户的问题。它同样会影响到试图在直射阳光下用手机阅读你定价页面的用户，或者在深夜用疲惫的双眼工作的用户。
你不需要为了修复对比度而重新设计整个品牌。你只需要调整现有的配色方案。
在 Figma 中打开你的设计文件，或使用浏览器扩展来检查你的对比度。Web 内容无障碍指南 (WCAG) 要求常规文本的对比度至少为 4.5:1，大文本的对比度至少为 3:1。
如果你的品牌颜色达不到要求，不要惊慌。你不需要放弃你的主要品牌视觉。通常，只需将品牌主色调中的蓝色或绿色加深几个色调，用于正文和按钮标签，就可以在不改变整体外观和感觉的情况下使你的网站合规。
让你的表单变得好用
表单是转化发生的地方。如果用户无法填写你的联系表单，你就失去了一个潜在客户。如果他们无法填写你的结账表单，你就失去了一笔交易。
易用的表单直接保护了你业务的底线。
为了让每个人都能使用你的表单，请专注于三个主要方面：
- 明确的标签： 每个输入字段都需要一个清晰、可见的标签。不要依赖输入框内的占位符文本（placeholder）。占位符文本通常对比度很差，而且用户一开始输入它就会消失。如果用户分心并移开视线，他们就会失去刚才输入内容的上下文。
- 清晰的错误状态： 当用户犯错时，不要只是把输入框的边框变成红色。红绿色盲非常普遍。如果颜色是唯一的提示，许多用户将不知道哪个字段出错了。务必在颜色之外同时使用文字说明和图标来指出错误。
- 关联辅助说明文本： 如果你在输入字段下方有说明，请确保屏幕阅读器能够朗读它们。使用
aria-describedby属性将输入字段与辅助说明文本链接起来。
为有意义的图片编写描述性的 Alt 文本
你不需要为网站上的每一个装饰性形状、波浪线或抽象背景图形编写 Alt 文本。事实上，这样做会给屏幕阅读器用户带来不必要的噪音。
跳过那些装饰性的花哨元素，为承载信息的图片编写清晰、描述性的 Alt 文本。
在审计图片时，将它们分为两类：
- 装饰性图片： 这些是背景图案、抽象插图或不增加信息的图标。将它们的 alt 属性设置为空（
alt=""）。这会告诉屏幕阅读器完全跳过它们，从而节省用户的时间。 - 信息性图片： 这些是解释某个概念的图表、产品截图或照片。对于这些图片，写一句简短、清晰的话来描述实际内容。
例如，如果你有一张产品仪表盘的截图，不要写 alt="仪表盘截图"。相反，应该写 alt="分析仪表盘显示月活跃用户增长了 20%."
在 Northwind Studio，我们通过将噪音与关键用户路径分离来开展无障碍审计。我们帮助团队识别哪些图片真正传递了上下文，这样他们就不会浪费时间为装饰性的背景形状编写描述。
如何将无障碍融入你的设计系统
处理无障碍积压工作的最佳方法是停止在你的设计系统中制造新的问题。
如果你的设计团队使用已经具备无障碍特性的组件来构建新页面，你的积压工作自然会随着时间的推移而减少。与其修补单个页面，不如修复源头组件。
如果你修复了全局按钮组件中的对比度问题或键盘聚焦状态，该修复将立即应用到你的整个网站。如果你确保组件库中的表单输入框内置了标签，那么营销团队构建的每个新表单在默认情况下都将是无障碍的。
从小处着手。把你最常用的组件——按钮、表单字段、导航栏和卡片——先拿出来进行审计。一旦这些组件坚如磐石，你的团队就可以充满信心地区构建新功能，因为他们知道自己不会再增加积压工作了。
管理一个大型网站无障碍项目并不需要一次性修复每一个错误。通过专注于键盘导航、清晰的对比度、实用的表单和有意义的图片描述，你可以为用户消除最关键的障碍。如果你需要帮助诊断网站在哪些方面存在不足，我们在 Northwind Studio 的团队可以提供实用的无障碍审计和修复指导，帮助你明确下一步的优先级。
常见问题解答
本指南是否被视为关于 ADA 合规性的法律建议？
不是。本指南根据我们进行审计的经验，提供实用的设计和工程建议。对于具体的法律合规问题或监管要求，你应当始终咨询你的法律顾问。
寻找键盘导航问题最快的方法是什么？
把鼠标放在一边，尝试仅使用 Tab、Shift+Tab 和 Enter 键来使用你的网站。如果你在页面上找不到光标的位置，你的聚焦状态就需要立即引起注意。
我们应该为网站上的每一张图片都写 Alt 文本吗？
不应该。装饰性图片应该具有空的 alt 属性（alt=""），以便屏幕阅读器完全跳过它们。只为传递实际上下文、数据或关键信息的图片编写描述性的 Alt 文本。
我们应该多长时间进行一次无障碍审计？
我们建议在重大重新设计期间或至少每年进行一次全面审计，并在新功能发布到你的设计系统时进行持续测试。