《美国残疾人法案》（ADA）要求企业网站向残障人士开放——据美国疾控中心（CDC）统计，仅在美国，这类群体就超过7,000万成年人。但打造符合ADA标准的网站，意义远不止于合规。它更在于确保每一位访客都能轻松、顺畅地完成整个购买流程，直到看到那句“感谢下单”。网站无障碍设计的真正价值，正在于带来更多访客、更高的互动率，以及更流畅的结账体验。
本指南将带你全面了解网站无障碍：为什么它至关重要，以及你可以采取哪些措施，确保网站符合ADA标准。
什么是ADA合规?
ADA合规，即遵守《美国残疾人法案》（ADA）所规定的各项要求——这是一部于1990年通过、影响深远的联邦法律。该法律旨在确保残障人士能够进入和使用各类建筑与设施，平等参与公共项目、就业和交通，并能顺畅使用网站、应用程序等数字工具。
ADA禁止在“公共便利场所”中的歧视行为。此后，法院将这一表述的适用范围扩展至线上店面、可在手机端访问的移动应用，以及由州和地方政府运营的门户网站。第一章涵盖拥有15名及以上员工的企业的招聘门户和内部人力资源系统；第二章涵盖公共机构；第三章适用于商业企业。正是这些条款，共同构成了人们通常所说的“ADA网站合规”的基本框架。尽管2010年出台的《ADA无障碍设计标准》并未明确针对网站作出规定，但该标准仍是司法部判断数字资产应如何契合法律精神时的主要参照。
谁需要关注合规？联邦机构需要——依据《康复法案》第508条；提供在线服务的州政府和地方政府同样如此。此外，零售、银行、医疗服务提供商等私营企业，以及向上述任何一方销售信息和通信技术的供应商，也都需要遵守。加利福尼亚州、纽约州等一些州更进一步，在联邦标准之上还执行着自己的无障碍规定。
什么是网页内容无障碍指南?
虽然ADA本身并未提及网站无障碍的具体技术标准，但它确实指引企业采用《网页内容无障碍指南》（WCAG）中的标准。最新版本WCAG 2.2将各项标准划分为三个等级（A、AA和AAA）。
A级是无障碍的最低要求，例如确保内容可通过键盘导航。AA级是大多数网站追求的目标，涵盖色彩对比度、替代文本（alt text）等内容。举例来说，Shopify持续对内容和功能进行AA级合规测试，并为商家和合作伙伴提供开发者培训资源。最后，AAA级合规最为严格，其指南进一步提升了无障碍水平，包括为所有预录视频内容提供手语翻译、至少7：1的对比度，以及更易理解的内容阅读难度。
此外，WCAG还提供了一套网站无障碍框架，包含四大核心原则：
- 可感知：为每一张有意义的图片提供替代文本，让使用屏幕阅读器等辅助技术的访客能够理解屏幕上的内容。
- 可操作：避免采用仅假设使用鼠标导航的设计，确保导航栏、下拉菜单和在线表单既能用鼠标操作，也能用键盘操作。
- 可理解：保持标签和错误提示清晰明了，并提供非视觉线索，让访客始终知道下一步该做什么。
- 健壮性：编码时使用语义化HTML，让辅助工具和未来的浏览器都能正确解读你的网页内容而不出错。
网站无障碍为何重要
让你的网站实现无障碍，其重要性远不止于法律合规。数字设计机构Studio Mote的创意总监萨拉·莫特（Sara Mote）表示，无障碍虽然是一个法律问题——她建议客户就此与法律顾问进行讨论——但它本身也是一种优秀的设计。
“某些设计之所以成为最佳实践，不仅是为了无障碍，也是为了整体用户体验——因为两者有很多重叠之处，”她说。“设计具有吸引受众、传递信息和唤起情感的力量，这直接影响着消费者的决策。简而言之，好的设计能提升这些沟通的质量。”
网站无障碍之所以重要，还有以下几个原因：
- 伦理：大约每四名美国成年人中就有一人患有可能影响其访问网站的残疾，包括视力障碍、运动障碍和听力障碍人士。消除任何无障碍壁垒都契合ADA背后的精神，并帮助每个人持续参与公共生活。
- 营收潜力：从企业主的角度看，包容性设计有助于提升营收。如果你的页面拥有整洁的代码、描述性的替代文本和强烈的色彩对比度，你就能扩大受众群体并带动更多销售。
- 声誉：一个不具无障碍功能的网站也可能引发负面新闻或社交媒体上的抵制，让品牌被描绘成对包容性漠不关心的形象，这会侵蚀客户信任，并最终把潜在买家推向其他网站。
- 法律责任：未能达到网站无障碍标准会给你的企业带来法律责任。2023年，美国法院受理了超过4，500起ADA数字诉讼。
“无障碍最终归结于认知上的轻松，”萨拉（Sara）说。“在设计中考虑到这一点，并做出让用户能流畅浏览网站的选择，是非常有益的。”
网站无障碍检查清单
- 为每段视频提供字幕和音频描述
- 使用合适的对比度
- 让用户可调整字号或切换到无障碍字体
- 为按钮、图标和表单字段添加ARIA标签
- 在每个网页顶部加入“跳转到主要内容”链接
- 将闪烁元素控制在癫痫安全阈值以下
- 确保弹窗锁定焦点，并始终提供便于键盘操作的关闭按钮
- 以文本形式显示表单错误，并通过程序将其关联到相应字段
- 撰写描述性的行动号召
- 将自动扫描与人工检查相结合
以下是你可以为自己的网站采取的无障碍措施的实用示例，内容整合自WCAG标准、Shopify的最佳实践，以及将WCAG转化为通俗语言的WebAIM检查清单：
1. 为每段视频提供字幕和音频描述
为预录视频提供隐藏式字幕（closed captions）是WCAG的AAA级指南之一。这既满足了ADA、《康复法案》第508条以及FCC规则下的法律要求，让失聪或听力障碍人士能够充分获取视频内容；此外，搜索引擎还可以索引字幕文本，从而提升视频在搜索引擎中的可发现性。
例如，Gymshark的网站就嵌入了带字幕的视频。
Caption：Gymshark
2. 使用合适的对比度
为文本和交互元素保持至少4.5：1的色彩对比度。至少4.5：1的对比度能确保文本和重要视觉元素从背景中清晰凸显，让视力障碍人士（包括低视力和色盲人群）也能顺利阅读。你可以使用WebAIM的对比度检查工具来测试自己的配色方案及其对比度。
例如，ColourPop采用4.5：1的对比度以确保一致的可读性。
3. 让用户可调整字号或切换到无障碍字体
让用户能够调整文字大小或切换到更易读的字体，可以帮助低视力人士、有阅读障碍的用户，以及难以阅读小号或密集文字的老年人。这有助于他们集中注意力、减轻视觉疲劳，并加深对文字内容的理解。
Good Good Golf在其网站的每个页面上都提供了一整套无障碍选项——包括字体调整。
4. 为按钮、图标和表单字段添加ARIA标签
ARIA标签确保辅助技术能够向用户播报每个交互元素是什么、有什么作用。例如，服装品牌Taylor Stitch在其网站代码中添加了ARIA标签，让屏幕阅读器能够告诉用户每项功能的作用。
5. 在每个网页顶部加入“跳转到主要内容”链接
“跳转到主要内容”按钮或链接能让使用键盘导航和屏幕阅读器的用户越过菜单和页头，直接进入主要内容。这可以为所有希望更快访问页面、不想额外按Tab键或滚动的用户节省时间、减少烦恼。
网站可以在页面顶部添加一个隐藏链接——只有在链接获得焦点时才会显示，通常置于HTML中导航代码之前，这样键盘用户就会最先访问到它。通过CSS代码，可以让该链接仅在页面加载后按下Tab键时才出现。
Taylor Stitch就是一个这样的例子。当用户在页面加载后按下Tab键时，页面会出现一个“跳转到内容”按钮。
6. 将闪烁元素控制在癫痫安全阈值以下
如果动画每秒闪烁少于三次，即符合WCAG指南的要求。开发者可以通过CSS样式来实现这一点，确保过渡效果低于该阈值。MVMT的主页就是一个例子——它通过CSS中的不透明度（opacity）属性将动画控制在可能诱发癫痫的阈值以下。
渐入效果（ease-in）在视觉上有助于让动画平滑淡入。这既能普通用户提供更流畅、更具视觉吸引力的布局，也能为有认知障碍的用户减少视觉混乱。对运动敏感或有癫痫风险的用户同样能从中受益，让更多人得以安全地访问内容。
7. 确保弹窗锁定焦点，并始终提供便于键盘操作的关闭按钮
当页面加载时，确保键盘焦点自动移动到第一个可获得焦点的元素——例如关闭按钮或输入框——可以防止键盘和屏幕阅读器用户被困在模态对话框后方。锁定焦点让用户在不使用鼠标的情况下也能轻松关闭弹窗。
例如，在Brooklinen的网站上，右上角的关闭按钮可供使用屏幕阅读器和/或纯键盘导航系统的用户通过键盘访问。
8. 以文本形式显示表单错误，并通过程序将其关联到相应字段
在处理用户提交的表单信息出现遗漏或错误时，最好提供一条清晰的文本错误提示，以便屏幕阅读器、有认知障碍的用户以及盲人或低视力用户都能获取。
在下图中，当用户点击灰色按钮下载模板时，Shopify的Dawn模板输入框会针对“未填写邮箱地址”这一错误显示一条文本提示。
9. 撰写描述性的行动号召
清晰、具描述性的按钮文案和链接锚文本，可以帮助依赖屏幕阅读器的盲人和低视力用户在激活按钮之前就了解它的作用。它也能帮助那些受益于清晰语言的认知障碍人士，以及其他所有人——因为具体明确的按钮用词让页面更易浏览和使用。
在Brooklinen的网站上，页面右侧中部的蓝色按钮清楚地标注着“查找你的门店”。用户无需悬停或激活，便能知道它的作用。
10. 将自动扫描与人工检查相结合
网站团队可以使用Axe或Lighthouse等自动化工具来扫描无障碍问题。你也可以使用专门的Shopify无障碍应用来检查你的网站。“Shopify内置了一整套用于落实部分无障碍最佳实践的工具，”萨拉（Sara）说。“我们的许多客户会使用某款应用来确保自己符合各项指南，也有的会付费聘请高度专业的无障碍团队，进行完全独立的外部审计。”
人工测试——最好由使用屏幕阅读器或有其他残障的人士来进行——可以发现自动化工具遗漏的问题。这让你能够在网站上线时以及每次更新之前，识别无障碍方面的不足并加以修复。
无障碍网站建设——常见问题
如何修改网站以符合ADA标准?
要打造符合ADA标准的网站，你可以先进行自动扫描——可使用AudioEye的免费网页无障碍扫描器、accessiBe的accessScan以及CivicPlus的网页无障碍审计软件等工具。随后，你很可能还需要让使用屏幕阅读器的人士测试你的网站，确保它在真实环境中正常运作。你需要留意的问题包括：替代文本缺失、色彩对比度过低、键盘导航失灵或无法使用等。
如果网站不合规会怎样?
如果你的网站不合规，可能会面临法律后果。你可能会收到律师事务所或维权组织发出的正式通知，声称你的网站违反了ADA；或者收到依据ADA第三章或第508条提出的类似指控的诉讼。一旦被起诉，你可能面临经济处罚、须在严格期限内修复网站以确保无障碍的义务，以及公开报告修复情况的要求。
实现ADA合规需要多少成本?
总体而言，从一开始就以无障碍为目标进行设计通常成本更低，因为无障碍设计本身的直接成本一般较少。如果你的网站在建站时未考虑合规，那么使其实现无障碍和合规的成本将取决于网站的规模和复杂程度。
