面向 SEO 从业者的无障碍指南：如何符合 ADA 与 WCAG

随着新版《网页内容无障碍指南》(WCAG) 于本月正式生效，网站无障碍再次成为关注焦点。但事实上，认真对待这一问题的 SEO 从业者并不多。

确保网站对所有人都可访问，并非直接的排名因素。但若为某网站引流，而残障用户无法访问和使用整个站点，这同样会对 SEO 效果产生负面影响。

仅在美国，就有超过 6100 万人有某种残障。目标受众中有很大一部分可能从网站无障碍性的改善中受益。

此外，随着越来越多国家把网站无障碍列为法律要求，不符合政府发布的无障碍指南可能意味着法律纠纷，甚至拖垮线上业务。

我的母亲被登记为法定盲人，因此我深切体会到网站无障碍对一个人日常生活质量的改变。

本文将探讨网站无障碍的重要性、它如何助力 SEO 工作，以及如何确保网站符合最新的无障碍法规。

什么是《美国残疾人法案》(ADA)？

《美国残疾人法案》(ADA) 是一部诞生于 1990 年代的民权法律，旨在保护残障人士免受任何形式的歧视，并确保他们在公共生活、服务和设施中获得平等机会。这些领域包括：

• 就业
• 交通
• 公共设施
• 通信
• 政府

根据 ADA 全国网络的定义，公共设施是指：

• 零售业。
• 餐饮业。
• 酒店业。
• 专门的医疗机构。
• 图书馆。
• 公共公园系统。
• 家庭、学校或工作场所之外的公共使用区域。

这部法律本身并未具体提到网站无障碍。但近年来围绕网站无障碍出现了不少公开诉讼，企业也对这部法律究竟适用于实体场所还是网站感到困惑。

事实上，知名餐饮品牌达美乐披萨 (Domino's Pizza) 在被一位无法在其网站上订披萨的盲人起诉后，甚至向最高法院提交了请愿书，要求确认它是否需要“就残障人士满足特定的无障碍要求”。

此后，美国政府发布了专门的网站无障碍 ADA 指南。根据其官网，任何面向公众开放的企业 (B2C) 或政府机构（或由政府资助的机构）都必须遵守该法律第三章 (Title III) 中详述的 ADA 规定。

ADA 指出：

一个含无障碍缺陷的网站，可能限制残障人士通过该网站获取公共设施所提供的商品、服务和权益——例如某退伍军人服务组织活动的报名表。出于这些原因，本部门始终认为，ADA 的要求适用于公共设施提供的所有商品、服务、权益或活动，包括在网络上提供的那些。

为什么 ADA 合规如此重要？

在当今环境下，确保网站对所有人可访问本应是基本准则。对于拥有开发团队与 SEO 团队协作的大型企业而言，更没有任何正当理由不把网站无障碍放在优先位置。

接下来看采取行动、确保网站无障碍的一些主要原因。

让人们不受限制地生活

回想新冠疫情期间，所有人被长时间困在家中，许多人的日常生活都转移到了线上，无论是上 Zoom 课堂、订购食品杂货，还是支付账单。

在危机时期能够轻松获取所需之物，是许多人习以为常的事情。然而，对残障人士来说，能否平等地使用线上公共服务，会显著影响他们的生活质量。

若无法出门，也无法访问那些用于订餐、缴费或投票等政府服务的网站，就会阻碍正常生活，还会带来巨大的压力。

无障碍网站对业务有利

改善网站无障碍本身就对业务有益。毕竟，使用网站的潜在客户越多，带来的线索和销售也可能越多。

网站无障碍在大多数国家都是法律要求

《美国残疾人法案》只是覆盖美国的一部无障碍法律，美国之外还有多部国际性无障碍法律。

在 40 个国家/地区，网站无障碍是必须做到的——从以色列的《残疾人平等权利法》到台湾地区的《网页无障碍指南》。欧盟目前甚至已起草了一部拟议中的《欧洲无障碍法案》。

确保网站符合当地法规，有助于避免法律诉讼。

网站若违反 ADA，残障人士可以对网站所有者提起诉讼，而这类情况正变得前所未有的频繁。

据无障碍技术公司 UsableNet 统计，2017 年约有略多于 800 起涉及无障碍缺陷网站的投诉被提交至联邦法院。在 WCAG 2.1 发布后，这一数字在 2018 年大幅升至 2,200 起。

知名品牌乃至名人都无法免于这些法律后果。

据报道，碧昂丝·诺尔斯 (Beyoncé Knowles) 的公司 Parkwood Entertainment 收到了一起集体诉讼投诉，指控盲人或视障客户被拒绝访问 beyonce.com 的服务，从而违反了 ADA 第三章。

当有视觉障碍的网站用户试图在碧昂丝的网站上购买演唱会门票时，他们发现图片没有替代文本 (alt text)，网站不支持键盘操作，下拉菜单也无法访问。

还有多个其他知名品牌、企业和机构曾遭遇备受关注的 ADA 合规诉讼，包括 耐克、汉堡王、福克斯新闻，甚至哈佛大学。

无障碍诉讼数量逐年攀升。随着 WCAG 2.2 于 2023 年 4 月发布，很可能再次出现大幅增长。

什么是 WCAG？

《网页内容无障碍指南》(WCAG) 是一套法规，为如何确保网站功能和网络应用的各个方面都具备无障碍性提供指导。

目前使用中的是 2018 年 6 月发布的 WCAG 2.1 指南，它面向以下对象：

• 网页内容开发者（页面作者、网站设计师等）。
• 网页创作工具开发者。
• 网页无障碍评估工具开发者。
• 其他希望或需要一套网页无障碍标准（包括移动端无障碍）的人。

WCAG 2.2 标准仍处于制定阶段，要到 2023 年 4 月才会最终完成。尽管如此，WCAG 3.0 的草案已经起草，只是短期内还不会公开。

紧跟 WCAG 规则的最新草案、留意任何拟定的修改或新增内容，有助于确保网站持续符合无障碍要求。

WCAG 分为三个符合性级别。每个级别都基于它们在满足不同人群和场景需求时对页面设计或外观的影响程度。

先看这三个合规级别的基本情况以及它们包含的内容。对 SEO 从业者重要的方面，稍后详细展开。

A 级 (Level A)

这是最低、也是最容易达成的符合性级别。A 级并未提供广泛的无障碍性，只是设定了绝对最低的无障碍标准。

以下是一些值得关注的 WCAG 2.0 A 级要求：

• 不允许出现键盘陷阱
• 支持基于键盘的导航
• 提供文本内容的替代方案
• 为视频添加字幕
• 颜色应仅用于指示操作、提示响应或传达信息

AA 级 (Level AA)

法规或法律和解通常将这一级别作为目标符合性级别来采用或协商。它为所有用户（包括使用辅助技术的用户）设定了一定的无障碍水平。

WCAG 2.0 的 AA 级要求包括：

• 最低对比度为 4.5:1（大号文字为 3.1）
• 对于传达含义的图片，必须使用替代文本
• 背景音频应无或音量很低
• 网站导航在全站保持一致
• 表单字段带有清晰标注
• 标题按逻辑层级排列

AAA 级 (Level AAA)

这一符合性级别满足全部三项成功标准，是最高可达到的级别。如果某些内容无法满足所有 AAA 级成功标准，那么完全 AAA 合规是无法达成的。

以下是 WCAG 2.0 AAA 级的一些值得注意的要求：

• 为视频或音频提供手语翻译
• 颜色对比度至少为 7:1
• 任何活动都不得要求限时完成
• 用户可以获得情境相关帮助
• 仅针对预录音频内容，背景音频应无或音量很低

AA 级合规标准被认为比较合理，而确保网站符合 AAA 级，有助于在未来维持无障碍标准，并让网站对所有人都可访问。

为什么 WCAG 合规很重要？

对于数字营销人员来说，WCAG 合规是确保自身遵守当地无障碍法律、避免法律后果的最佳方式。一般来说，符合 WCAG 的网站应当目标清晰、加载迅速、导航简单、语言友好。

这些都是 UX 设计的关键要素，能帮助搜索引擎用户找到所需信息。网站 UX 应当改善，为消费者提供尽可能好的体验。

从大企业到初创公司，每家公司都应当努力做到合法合规，并拥有符合 WCAG 的网站。

联合国指出：“获取信息和通信技术（包括网络）的权利，在《联合国残疾人权利公约》中被定义为一项基本人权。”

无障碍缺失的网站所带来的负面影响意味着，许多残障人士失去了完成那些很多人习以为常的事情的能力，例如管理自己的账户、找工作，或是一般地上网。

无障碍与 SEO 的交汇点

如前所述，网站无障碍并非直接的排名因素。但无障碍问题会影响用户体验。从 2022 年 3 月的页面体验更新 (Page Experience Update) 中，我们知道这对 Google 极其重要。

John Mueller 此前也曾表示，糟糕的网页无障碍可能会负面影响其他信号，从而导致网站在搜索中可见度下降：

不过总体而言，当网站难以使用时，人们本来就会避而远之，因此随着时间推移，推荐和其他信号往往会减少，最终导致网站在搜索中的可见度也随之下降。

此外，许多导致无障碍问题的元素，恰好也是提升技术 SEO 健康度时关注的方面，两者存在大量重叠。

导航

有效的导航对无障碍和 SEO 都有好处。当导航简单直观时，残障人士可以更轻松地使用网站。

结构良好的导航还能帮助爬虫理解网站的内容与结构，从而可能提升网站在搜索结果页面 (SERP) 上的排名。

链接和面包屑导航就是可以根据页面内容加入的导航组件示例。

一致的导航是 WCAG 的 AA 级要求。也就是说，要在整个网站中反复使用相同的元素。

这可以包括在每个页面开头设置一个“跳转到内容”按钮（就像美食博客上的“跳转到食谱”按钮），并确保菜单和子菜单在每个页面上都处于相同位置。

带有“breadcrumb”（面包屑）标签的导航元素会将结构定义为面包屑路径，并将其标记为导航地标，方便查找。

它帮助用户了解自己在网站中的位置，以及距离首页有多远。它看起来大致是这样：

首页 > 博客 > 技术 SEO > 如何做一次技术 SEO 审计

面包屑还能帮助搜索引擎浏览网站并对其页面进行分类。Google 也会在搜索结果中展示面包屑。

站点地图

站点地图既帮助用户也帮助搜索引擎浏览你的网站。尤其对于残障用户，站点地图能帮助他们更轻松地找到需要访问的页面。

万维网联盟 (W3C) 指出：

站点地图有多种用途。

标题标签与标题层级

屏幕阅读器会使用标题标签 (title tags) 在页面首次加载时为用户提供内容概览。标题标签还提供页面摘要，并促使访客点击标签页和搜索结果。

恰当使用标题，能让使用屏幕阅读器的用户更容易阅读内容。使用正确的标题标签（例如 H2，而不只是更大或更粗的文字）。

使用级联标题时应遵循逻辑层级：H1 在 H2 之前，H3 在 H2 之后，依此类推。这样访客和搜索引擎都能轻松理解内容的结构。

Ahrefs 的 SEO 工具栏是一个很好的辅助工具，它可以让你在任何页面上直接查看页面标题、内容长度和标题（以及层级结构）。

内链

锚文本是用于建立指向其他网页链接的可点击文字。用户必须能理解点击链接后预期会出现什么。对于无障碍而言，精确的描述至关重要。

搜索引擎可以借助锚文本评估被链接网站的内容。锚文本有助于理解网站结构、页面布局和关键词。

替代文本 (Alt text)

替代文本让屏幕阅读器能够理解图片所表达的含义。此外，替代文本还能帮助搜索引擎理解图片内容，提升页面 SEO，并让图片出现在图片搜索结果页中，从而为你的网站带来更多流量。

如何测试网站无障碍

要让网站实现无障碍，需要能够运行一次无障碍审计。

我们前面讨论的许多对 SEO 从业者至关重要的元素，都可以用 Ahrefs 的站点审计 (Site Audit) 来评估。该工具会针对以下方面显示问题：

• 站点地图
• Robots.txt
• 内链
• 标题层级
• 标题标签
• 替代文本

若想进行一次详细的无障碍审计，以便把无障碍问题反馈给开发者，也有若干工具可以识别哪些 SEO 元素可以改进，从而让网站更无障碍。

用 Accessibility Checker 审计无障碍

首先打开 Accessibility Checker，输入要审计的网址，并选择需要合规的国家/地区。

完成之后，审计大约需要 30 秒运行并显示结果。

下方会列出所有严重问题的明细以及修复方法，也可以下载报告以便稍后处理或转交给开发者。

用 Google Lighthouse 检查无障碍

除了安全性和 SEO，Google Lighthouse 还会检查网站的无障碍性和核心网页指标 (Core Web Vitals)。

页面标题以及背景与前景之间的颜色对比度是两项无障碍标准。此外还包括标题标签、链接名称和视口的可缩放性。

一些无法自动评估的 Lighthouse 无障碍标准也可以手动检查。Lighthouse 有多种使用方式，包括作为免费的 Google Chrome 插件，让技术和非技术人员都能使用。

你可以直接在 Google Chrome 中轻松访问 Google Lighthouse 无障碍审计：右键点击页面选择“Inspect”（检查），或按键盘上的 F12。

然后，在开发者工具窗口中，导航到“Lighthouse”选项卡。

调整你的 Lighthouse 设置，选择只审计“Accessibility”（无障碍），然后点击“Analyze page load”（分析页面加载）。

随后 Lighthouse 会分析页面，给出一个满分 100 的评分，以及一份问题列表。

使用 WAVE 的无障碍评估工具

Wave 的无障碍评估工具会详细列示你的网站所面临的无障碍问题，非常适合在 Accessibility Checker 和 Lighthouse 之外配合使用。

首先打开 WAVE 网站，输入你想审计的站点网址。

审计完成后，审计概览会在一个停靠窗口中打开。

你可以展开不同的问题以查看详细明细。WAVE 的一个贴心之处在于，点击报告中的某个问题，它会直接在页面上高亮显示该问题。例如精确高亮出哪些图片缺少替代文本，或哪些链接缺少描述性文字。

用于测试和改善无障碍的插件与小部件

让网站实现无障碍可能需要投入相当的时间和精力。如果使用 WordPress 作为内容管理系统，情况会轻松许多。

至少，WordPress 无障碍插件可以在让网站无障碍方面指明方向，有些甚至能在没有开发者协助的情况下完成改动。

下面列出三个我常用的选择（任选其一即可）。

WP Accessibility

WordPress 主题中的许多常见无障碍问题都可以用 WP Accessibility 插件解决。这个免费插件的无障碍增强功能，管理员无需编写任何代码即可启用或禁用。

Color Contrast Tester（颜色对比度测试器）可以比较两种颜色之间的对比度。使用该插件，还可以辨认出没有替代文本的图片。

One Click Accessibility

WordPress 站点管理员可以用 One Click Accessibility 设置并维护无障碍配置。该插件会在屏幕侧边弹出一个无障碍菜单，网站用户可以用它来实现各种无障碍功能。

ARIA（无障碍富互联网应用）地标、轮廓强调、链接的目标特性以及跳转链接，都属其实用功能。它还允许创建站点地图、给链接加下划线、使用负对比度以及缩放字体。

WP Accessibility Helper

通过解决字号、对比度和替代文本方面的问题，WP Accessibility Helper 可以让网站更无障碍。使用切换按钮即可打开想要的选项。

使用 WP Accessibility Helper 的专业版，可以自定义前端无障碍侧边栏。调整字号、颜色和其他功能都很简单。

ADA Okay!

ADA Okay 是一款付费工具，它使用一个站内小部件（用户可自行控制）来让你的网站实现无障碍。

我曾把 ADA Okay 添加到数十个小企业网站上，只需把一小段代码复制粘贴到网站页脚，它就一直运行良好。

ADA Okay 通过在一个小弹窗中（类似于聊天小部件）呈现无障碍菜单，来提升无障碍性，并确保你的网站符合 ADA 标准。

网站用户可以通过该菜单调整文字大小和颜色、放大光标并高亮链接，也可以禁用自动播放等可能诱发癫痫的动画功能。

结语

网站无障碍不仅是一项法律要求，更是确保残障人士能够正常生活的重要方面。

作为 SEO 从业者，我们可以通过确保那些有助于无障碍的技术和站内要素得到正确实施与维护，为改善无障碍做出贡献。

这样做，既能通过确保客户的网站对每一位潜在客户都可访问来提升 ROI，也能帮助客户避免无障碍诉讼。

有疑问，可以在 Twitter 上找我。