每个开发人员都应该知道的十大 Web 可访问性标准

本文最初发表于Books on Code。

您知道 Web 无障碍标准至关重要。作为团队中的 Web 开发者，您需要具备丰富的知识，并致力于应用最具影响力的 Web 无障碍标准，从而为每个人创造更佳的体验。

但有一个问题：Web 内容可访问性指南 (WCAG) 冗长得令人难以置信。每条规则都令人眼花缭乱，每读一段令人麻木的段落，你就会感觉离真正的目标——为每个人创造卓越的体验——越来越远。

归根结底，我们希望开发网络应用是为了人，而不是为了规矩。与其被淹没，不如找到我们现在可以对产品和网站进行真正改变的方法。

虽然这些顶级网络可访问性标准显然不是详尽的列表，但我希望它们能为您提供一个起点，让您开始思考和实施可访问性标准。

概述

这些顶级的 Web 无障碍标准摘自 Ashley Firth 所著的 Web 无障碍领域最佳著作《实用 Web 包容与无障碍》（2019）。本书的编写并非针对某个特定角色，因为 Web 无障碍标准最好由整个团队共同维护。即便如此，我相信这本书对于 Web 开发者来说尤其有价值。书中包含许多代码片段和简单的说明，帮助开发者实现 Web 无障碍标准。

本书也旨在帮助你批判性地思考如何为人们解决问题。因此，本书围绕各种残疾（包括永久性和暂时性残疾）展开，残疾的定义是人与自身所处世界的关系。这些章节涵盖了失明、弱视和色盲、运动障碍、耳聋和听力障碍、认知障碍、心理健康等等，同时也承认本书涵盖的范围之外仍然存在一些案例。

这本书的核心是同理心，而不是规则或系统，这是我优先考虑下面看到的最重要的技能的哲学。

失明的最高标准

与普遍看法相反，视障人士并不一定成为使用互联网的障碍。如果网站设计得当，视障人士也能轻松融入其中，享受与其他人一样丰富的在线体验。

--- 实用的 Web 包容性和可访问性

以下网页无障碍标准对失明人士尤其有益。失明人士通常通过屏幕阅读或盲文软件与网页互动。

1：使用语义标记和地标 ARIA 角色

Adiv本身并没有提供其内容的上下文，但我们却一直在使用div。对于使用屏幕阅读软件的人来说，在一堆divs 之间跳跃，根本不知道自己在页面上的哪个位置。

我处于开始、中间还是结束？

我处于模态还是形式？

我们有两种解决方案为用户提供上下文：语义标记和 ARIA 角色。

语义标记包括诸如、、、、和之类的标签header。诸如section、、main和之类的标签可以轻松添加到任何网页。navfooterheadermainfooter

ARIA 角色提供类似于语义标记的上下文。区别在于：您可以向任何标签添加属性，包括div。

例如，<div role="navigation"></div>相当于<nav></nav>。

有关里程碑式 ARIA 角色和其他 ARIA 角色的列表，请参阅MDN Docs 网站上的里程碑式角色。

2. 在图片上添加 alt 标签

Alt标签对于许多类型的用户来说都很有价值，它们可以帮助用户了解他们无法感知的内容。

例如，根据我为视障用户进行用户测试的经验，我与一位能够看到大型彩色英雄图像的用户合作，但如果没有替代文本，他们只能想知道该图像显示的内容。

编写好的替代文本很容易被误解，因为替代文本作者可能会倾向于标记图像而不是感知图像。

有关替代文本的官方指南，请参阅 WebAIM 网站上的替代文本。

3. 添加 Lang 属性

这个lang属性经常被人们遗忘，但它对于用户在屏幕阅读设备上以目标语言体验页面至关重要。lang属性放置在html标签上。对于英语，您可以将值设置为en。但您可以使用脚本和区域子标签来获得更具体的设置。

例如：

<html lang="en">\ ...\ </html>

有关该lang属性的更多信息，请参阅MDN Web 文档中的lang 。

4：创建“跳至主要内容”链接

您可以在文档顶部添加一个链接，让屏幕阅读器用户可以选择跳过常见的重复内容，例如徽标和主导航。这样用户就可以直接跳转到主要内容。每次用户访问新页面时，您都可以为他们提供一个简单的导航选项，而不是重复的“欢迎”流程，从而提升他们的体验。这很方便，就像在 Netflix 上观看剧集时可以选择跳过简介一样。

您可以使用 CSS 在视觉上隐藏此链接，但当用户使用键盘导航到该链接时，该链接是可见的。

要添加此链接，请参见以下示例：

HTML：

<a class="skip-to-content" href="#content">Skip to main content</a>\ <main id="content">...</main>

CSS：

.skip-to-content {\ position: absolute;\ top: -400px;\ }

低视力和色盲的最高标准

由于视力障碍的类型和组合繁多，有时根本就没有一个适合所有用户的万能解决方案。低视力是无障碍领域中少有的几个问题之一，修复一个障碍实际上可能会给不同的用户带来另一个障碍。

---实用的 Web 包容性和可访问性

视力低下或色盲的用户可能千差万别。根据我与视力低下用户合作的经验，我发现有些用户会同时观看放大的屏幕和使用屏幕阅读器进行强化。由此可见，屏幕和屏幕阅读器之间保持一致的重要性。

尽管用户所经历的残疾程度各不相同，但以下网络可访问性标准对于视力低下或色盲用户特别有益。

5. 使用相对单位而不是像素作为字体大小

使用像素等固定测量单位可能会对使用放大功能的用户造成不利影响。使用像素大小的文本会忽略用户的偏好。如果 14px 的字体大小太小，即使放大也仍然太小。

请使用rem或之类的测量单位em。这些测量单位考虑了用户偏好，可以提供更灵活的阅读体验。

6. 测试颜色对比度和文本大小

高色彩对比度和文本大小可以提升我们所有人的体验，然而，为了弱化文本的重要性，我们仍然在设计中使用小字号和白底浅灰字体。通常，我们应该追求高对比度，尝试增加基本字体大小，并优先考虑易读的字体。

我常用的对比度检查器是“对比度”。

7.不要只用颜色来表明身份

在许多设计中，红色和绿色等颜色被用来表示状态。如果仅使用红色和绿色作为指示，患有常见色盲的人可能无法察觉差异，或者难以区分。对于红绿色盲的人来说，区分浅绿色和深红色更容易。然而，用浅绿色和浅红色来表示状态可能更难区分。

除了颜色之外，您还可以使用其他指示符。例如，图标也可以用作指示符。

行动障碍人士的顶级网页无障碍标准

你试过不用鼠标浏览网站吗？这比你想象的要难，尤其是在跨页面操作（例如注册或购买商品）时。一些行动不便的用户通常只能使用键盘与电脑交互。

---实用的 Web 包容性和可访问性

以下网页可访问性标准对于有行动障碍并使用键盘浏览网页的人很有帮助。

8. 使用焦点风格

默认情况下，使用按钮时元素周围会发出蓝色光晕tab，但许多设计师可能会选择移除此样式，因为他们觉得它看起来不太美观。您可以使用 CSS 样式完全移除焦点指示器*: focus { outline: 0; }。

可以想象，移除焦点会带来很大的问题。清晰的焦点样式至关重要，因此，务必考虑如何设计一个既美观又明显的焦点指示器。作为开发者，仔细检查tab你的应用，并留意焦点指示器是否不明显。

还要注意像模态框这样的覆盖层。确保关闭按钮明显且可以使用键盘访问。

9. 避免悬停时出现的内容

在诸如下拉导航之类的元素中，悬停状态是由键盘上的焦点区域触发的。但有一个问题：当你离开顶级项目时，菜单会折叠起来。

此外，如果屏幕阅读器已设置visibility: hidden或display: none设置了，则不会读取内容。如果使用了下拉导航，请使该元素显示为不可见，但屏幕阅读器仍然可见。您可以像使用绝对定位的“跳至主要内容”链接一样执行此操作。如果您以这种方式解决问题，键盘仍然可以访问内容，但内容仍然不可见。解决此问题的一种方法是允许菜单在点击时永久展开。

耳聋和听力障碍人士的最高标准

乍一看，这些用户的访问需求类似——听觉信息必须通过其他方式传达。但实际上，情况远不止于此，重要的是要记住，不同的听障用户对于如何接收这些信息有不同的偏好。

--- 实用的 Web 包容性和可访问性

10. 使用轨道元素添加标题和标题操作

在 HTML 中，您可以对字幕进行多种控制。使用 HTMLtrack元素，您可以为视频添加多个不同语言的字幕文件。字幕的常见文件格式是.vttWeb 视频文本轨道格式 (Web Video Text Tracks Format)。有关该track标签的更多信息，请参阅MDN Web 文档中的“嵌入文本轨道元素” 。

您还可以使用 CSS 为字幕添加样式。提示规则允许您自定义字幕样式，例如video::cue或。audio::cue

撰写标题时，务必记住动作和对话。你可以用方括号指示动作。例如[spits drink]，

了解有关 Web 可访问性标准的更多信息

这十项网络可访问性标准是一套很好的标准，可以让您的网站大大改善其他人的体验，但还有很多东西需要学习，特别是涉及到与表单和在线结账体验的复杂网站交互时。

《实用 Web 包容性和可访问性》一书涵盖的内容远不止这些。如果您正在寻找易于理解和实施的 Web 可访问性标准，那么这本书绝对值得一读。

如果您喜欢这篇文章，请与您的团队分享。开启对话，大幅提升您的网站或 Web 应用的体验。毕竟，Web 无障碍设计最好由整个团队共同实现。

此外，如果您喜欢这篇文章，并且有兴趣通过技术书籍学习和成长为一名开发人员，请通过订阅“代码书籍”时事通讯来继续您的学习之旅。

鏂囩珷鏉ユ簮锛�https://dev.to/mlimonczenko/top-10-web-accessibility-standards-every-developer-should-know-5cih