如何使网站可访问以及WCAG合规的含义

网站可访问性意味着什么

网站可访问性意味着人们可以使用一个网站而不需要与之抗争。屏幕阅读器用户、仅使用键盘的访客、在明亮光线下使用手机的人以及视力低下的人都以不同的需求访问同一页面，而该页面仍应适用于他们每个人。

这听起来简单，但实际上很少如此。

良好的可访问性方法并不单单从技术开始。它始于一个问题：一个人能否在3次点击内完成任务，使用鼠标、仅使用键盘或使用辅助软件？如果即使在一个路径上答案是否定的，那么该网站就比应有的更难使用。

可访问性也帮助普通用户在普通情况下。字幕帮助在嘈杂的火车站中的人。清晰的焦点状态帮助失去光标位置的人。良好的标题帮助读者在20秒内扫描一长页，而不是2分钟。

团队通常将可访问性视为一个特殊功能。这是错误的思维方式。它应该与结构、文本、表单、媒体和导航一起考虑。如果您已经在一个企业网站上工作过，您就会知道结构影响每个页面；可访问性只是让这个结构被更多人使用。

WCAG合规的含义

WCAG代表网页内容可访问性指南。它是一个使网页内容更可访问的已发布标准，人们常常将WCAG合规性视为一个单一的开关。实际上并非如此。

WCAG合规性意味着一个网站在定义的级别上满足相关的成功标准。大多数团队的目标是AA，因为它在实际努力和现实影响之间取得了平衡。一个网站可以是部分合规、几乎合规或完全合规，具体取决于已测试的内容和仍然失败的内容。

遵循某些指南与整体遵循标准之间也存在差异。一个在图像上有替代文本但键盘行为不正常的页面，仅仅因为勾选了一个框而不能被称为“足够可访问”。一个对比度美观但表单字段未标记的网站仍然会让人们在行动点停滞不前。

将WCAG合规性视为一种纪律，而不是徽章。该标准为您提供可测试的标准，这些标准帮助团队避免模糊的承诺。如果审查提到“如何使网站可访问以及WCAG合规性意味着什么”，它应该将两者联系起来：一个是实际工作，另一个是衡量它的标准。

从可访问性审计开始

可访问性审计为您提供了第一个问题列表。从10到20个重要页面的样本开始，而不是一次性检查整个网站，因为常见的障碍通常会重复出现：缺少替代文本、低对比度、键盘陷阱、未标记的表单以及没有任何理由从H2跳到H4的标题。

同时使用自动检查和人工审核。自动化快速捕捉模式，但它无法告诉你按钮标签在上下文中是否有意义，或者模态框是否能干净地关闭。一次快速的手动测试可以揭示超过50个自动警报。

逐一检查图像。装饰性图像通常应被辅助技术忽略，而有意义的图像需要提供描述其重要性的替代文本。“显示2024年销售增长的图表”比“图表”更好，“团队照片”比“image123”更好。

表单需要特别关注。每个输入框都必须有明确的标签，而不仅仅是占位符文本，因为占位符在用户开始输入时会消失。没有标签的登录字段变成了猜谜游戏。这在第一步就失败了。

使用简单的地图审核标题。页面不应仅仅为了样式而使用标题，用户应能够按顺序浏览大纲。如果结构混乱，页面对屏幕阅读器用户和任何试图快速阅读的人来说都会更难。

构建可访问的内容结构

可访问的内容结构始于语义标题。使用H2作为主要部分，H3作为子主题。重点不是装饰，而是导航。屏幕阅读器用户通过标题跳转，清晰的大纲让他们在几秒钟内浏览页面，而不是逐行阅读。

页面组织同样重要。将主要任务放在顶部，保持相关内容在一起，避免将关键操作分散在五个无关的块中。一条清晰的路径比三条竞争路径更好。混乱的布局会让简单的操作感觉像是在解谜。

链接应该说明它们的去向。“阅读更多”单独使用显得无力。“阅读更多关于网站发布后的支持”告诉用户他们将获得什么，这在一个页面包含12个链接时尤为重要。每当目的地从周围句子中不明显时，请使用描述性文本。

以一个实际的例子来比较，“下载”和“下载无障碍检查表PDF”。第二个版本更长，但它是可用的。在屏幕阅读器的链接列表中，额外的词语不是多余的；它们是地图。

替代文本应该有意义，而不是戏剧化。产品照片可能需要产品名称和一个独特的细节。屏幕截图可能需要对界面状态的简短解释。装饰性的元素可以保持沉默。这种区分为听到每个图像描述的用户节省了时间。

可读的内容同样重要。短段落有帮助。简单的术语更有帮助。如果一个句子承担了段落的工作，就将其拆分。如果一个句子有三个想法，就分成两个句子。屏幕阅读器可以处理长内容，但人类的注意力仍然有限。

以这种方式构建的页面也支持内容丰富的项目，包括一个投资内容门户，用户需要快速浏览、清晰的分区，以及术语在页面之间不发生变化。

使导航和控件适合键盘使用

键盘访问不是可选的。菜单、按钮、对话框和表单都必须在没有鼠标的情况下工作。如果某人可以通过 Tab 键切换到一个控件但无法激活它，那么这个控件就是坏的。

首先测试 Tab 顺序。按 Tab 键浏览页面，查看焦点是否按照从上到下、从左到右的逻辑顺序移动。如果焦点跳到一个隐藏元素，或跳过一个关键按钮，页面需要调整。焦点的可见性同样重要；如果你看不到键盘的位置，你就是在猜测。

对话框需要一个 Escape 键或其他明确的关闭操作。打开时焦点应移入对话框，关闭时应返回触发器。如果没有这种行为，键盘用户可能会被困或迷失。没有人想按 18 次 Tab 键来找到出口。

菜单应可预测地打开和关闭。仅靠悬停的菜单是不够的。依赖鼠标指针的下拉菜单可能会同时排除键盘用户和触控用户。规则很简单：如果一个控件存在，它应该以多种方式可操作。

表单需要再检查一次。错误消息必须出现在字段附近，使用清晰的语言，并与字段本身相关联。仅仅说“无效输入”的消息对任何人都没有帮助。说明出了什么问题。说明如何修复它。两句话可以节省一个支持工单。

对于较大的构建，将可访问性工作与已经处理复杂流程的网站配对是有帮助的，例如 私有网络基础设施，因为保持内部系统可预测性的相同原则也能保持公共接口的可用性。

改善颜色、对比度和媒体可访问性

颜色对比直接影响可读性。与背景融为一体的文本在样机中可能看起来时尚，但在日常使用中却会失败。使用工具检查对比度，然后在真实屏幕上检查。

不要仅依赖颜色来传达意义。如果必填字段是红色的，也要用文本或图标加文本进行标记。如果图表使用红色和绿色，添加标签或图案。一种颜色提示可能会对色盲用户消失，但任务仍然应该有意义。

字幕是视频的第一步。它们帮助无法听到音频的人和在公共场合关闭声音的人。当用户想要搜索、引用或稍后查看细节时，文本记录更有帮助。音频描述对于视觉信息未被口头表达的视频也很重要。

包含文本的图像需要额外的关注。如果文本是必不可少的，也要将其放入页面内容中。一个写着“周五前注册”的横幅不应该迫使某人解码截图才能找到截止日期。小决定，大差异。

颜色和媒体检查也应该是网站安全审查的一部分，因为一个看起来安全但隐藏关键信息或有损坏媒体的网站，往往会产生与技术故障相同的用户不信任。如果您已经跟踪 网站安全将可访问性检查纳入同一审查窗口。

测试、修复并维护可访问性

可访问性不是一次性的清理。网站每周甚至每天都会变化。一个新的横幅、一个表单更新或一个重新设计的菜单可能在30分钟内引入同样的问题。

建立一个简单的工作流程。首先，对更改的页面进行自动检查。其次，手动使用键盘和屏幕阅读器测试关键用户路径。第三，收集用户反馈并记录问题，包括页面URL、浏览器和问题出现的确切步骤。工单中的四个字段胜过一个模糊的投诉。

当可访问性融入常规发布工作时，维护变得更容易。如果开发人员添加组件，这些组件在发布之前需要标签、焦点状态和键盘行为。如果编辑人员上传图像，他们需要养成添加替代文本的习惯。如果营销人员添加促销块，他们需要检查对比度和链接文本。

尽可能使用版本化模板。固定的页眉、标准的表单块和经过测试的模态模式可以减少重复错误。这就是关心的团队往往更好地处理可访问性的原因之一：这项工作是内置于支持中的，而不是在投诉后进行修补。网站上线后的支持来自真实用户的反馈是最严格的测试。键盘用户会比任何审计工具更快地发现三项菜单中的陷阱。屏幕阅读器用户会在第一次使用时听到按钮标签是否有意义。如果两个人报告同样的阻塞，将其视为模式，而不是巧合。

最后一个习惯非常有帮助：将可访问性检查与每次内容更新保持关联。如果一个团队在没有检查标题、标签和媒体的情况下发布新页面，网站会慢慢向后漂移。一个包含5个项目的维护清单可以在漂移扩散到每个页面之前阻止这种情况。

最后一个习惯非常有帮助：将可访问性检查与每次内容更新挂钩。如果团队在发布新页面时没有检查标题、标签和媒体，网站会慢慢退步。一个包含5个项目的维护清单可以在这种退步蔓延到每个页面之前阻止它。