改进我们的网站并使其更易于访问的提示和工具

什么是网络无障碍性？

网络无障碍性是指设计和构建应用程序的过程，使其能够被每个人感知、理解并与之互动。当我们谈论网络无障碍性时，有5个个人特征是我们应该努力考虑的。

• 语言障碍
• 听力障碍
• 视力障碍（失明、色盲和其他视力障碍）
• 运动控制限制
• 认知方面的限制

当我们建立网站和应用程序时，我们希望确保任何具有这些个人特征的人都能使用它们。

我如何知道我的网站是否是无障碍的？

那么，我们如何评估我们的网站是否具有无障碍性？WCAG（网络内容可访问性指南），是一系列成功标准，我们可以用它来评估网页的文字、图像、声音和HTML结构/标记。
WCAG包含一系列成功标准，我们应该力求达到。一个简单的成功标准例子是 "所有的功能都可以通过键盘界面操作"。

WCAG有3个认证级别。

• A级是最低级别。达到这个级别需要满足所有的标准，这些标准是网络无障碍性的基本标准，也是制止标准。
• AA级包括所有A级和AA级的要求。许多组织努力达到这一水平。
• AAA级包括所有A级、AA级和AAA级的要求。这个级别通常保留给针对残疾人市场的网站和应用程序，例如，所有视频都包括手语翻译。

WebAIM的一份报告分析了网络上的主页，发现97.8%的主页存在可自动检测到的WCAG 2 AA级别的故障。这表明我们都有很长的路要走!

有许多工具可以分析你的网页及其WCAG的符合性。工具是将良好的可及性实践嵌入到你的日常开发中的一个真正有用的方法。我将在文章的底部分享其中的一些工具!

我们已经了解了什么是无障碍网页，并学习了WCAG
-- 现在我们要看看如何才能真正改善我们的网站，使其更加无障碍。

为读屏器构建网站

首先，我们将看看如何建立你的网站，使之与屏幕阅读器很好地配合。

读屏器是为有视力障碍的用户设计的工具。它们将显示在网页上的文字和内容传送到音频中，供人朗读。有一些流行的屏幕阅读器，如Mac上的VoiceOver和Windows上的JAWS。我强烈建议你尝试使用这些工具中的一种，了解它们是如何工作的，因为这将帮助你感受到一些用户的痛苦，并了解什么类型的信息对屏幕阅读器有用。

这里有一些建立网站的提示，以便与屏幕阅读器很好地工作。

1.确保你使用了正确的HTML标签

网络开发者通常会创建自己的元素，而不是使用本地的HTML元素--一个常见的例子是使用<div> ，而不是<button> 。

// Custom <div> with styling to look like a button
<div style={...} onClick={fn}/>
// Native HTML button
<button onClick={fn}/>

然而，本地的HTML元素有很多语义，是屏幕阅读器所依赖的。比如说。

• checkbox 有一个属性，表示该框是否是checked ，这将被屏幕阅读器读取。
• link有一个属性，表示它是否已经被visited ，这也会被屏幕阅读器读出。

要使你的元素能被屏幕阅读器很好地阅读，最简单的方法是使用原生的HTML元素，而不是试图创建你自己的元素，然后如果你愿意，你可以随时覆盖默认的样式。

2.2.使用aria-labels

ARIA（Accessible Rich Internet Applications）是一个属性集合，可以添加到你的标记中。ARIA属性为你的网页增加了信息，这些信息可以传达给无障碍工具，但不会改变网页的外观或行为。

aria-label 是一个用于向元素添加标签的属性，可以传达给屏幕阅读器。例如，在你有一个只有图标的按钮的情况下，这对屏幕阅读器用户很有用。

<button aria-label="Copy"><CopyIcon/></button>

3.使用ARIA地标角色

ARIA地标角色是一个为屏幕阅读器用户提供非常直接价值的功能，而且非常容易添加。在一个元素上添加role="..." ，意味着屏幕阅读器用户可以快速跳到这些地标之一。有8个ARIA地标角色。

role=”banner”
role=”navigation” (e.g. a menu)
role=”main” (the main content of the page)
role=”complementary” (e.g. a sidebar)
role=”contentinfo”
role=”search”
role=”form”
role=”application”

4.隐藏装饰性内容

屏幕阅读器的最后一个提示是隐藏装饰性内容。如果某样东西在你的页面上只是为了装饰*（比如图片）*，与其让屏幕阅读器把它读出来，不如把它完全从屏幕阅读器那里隐藏起来。你可以通过给元素添加aria-hidden属性来做到这一点。

<img aria-hidden="true"/>

运动控制障碍

运动控制障碍常常影响某人与物理设备互动的能力。运动控制障碍的一些例子是颤抖或肌肉无力。

有运动控制障碍的用户可能无法使用鼠标，或者他们可能在移动设备上艰难地按下小按钮。

规则1：网页上的所有功能都应该可以通过键盘操作

有些用户可能无法使用鼠标，所以网页应该可以通过键盘进行导航和操作，也就是说。

• 使用Tab键在各元素之间进行导航
• 按enter 或space 来按下一个按钮，勾选一个复选框，或展开一个下拉菜单

规则2：活动元素必须是可见的

键盘交互的第二条规则是，活动元素应该是可见的。默认情况下，当按钮处于活动状态时，浏览器会在其上添加一个红色的轮廓（以及所有可关注的元素）。

一个常见的模式是只在 "键盘模式 "下显示红色轮廓。

规则3：标签顺序应该是合理的

对于键盘用户来说，我们以合乎逻辑的方式构建我们的HTML也是很重要的。当你用标签浏览一个页面时，它应该以一种有意义的顺序突出元素。实现这一目标的最简单方法是以一种有意义的方式来组织你的HTML。

网络开发人员可能经常以随机的顺序定位DOM元素，并使用CSS定位，然而，这使得通过键盘浏览页面更加混乱。

另一种方法是使用正tabindex，然而，这通常不是一个好主意，因为它会导致维护方面的头痛。例如，假设你想在HTML页面的中间添加一个元素，你需要重新洗牌所有的索引。

使用逻辑上有序的HTML是比正标签索引更好的方法

规则4：避免小的触摸目标

在移动设备上，重要的是要避免按钮和互动元素的小触摸目标。WCAG规则指出，目标应该至少是44乘44的CSS像素。

规则5：移动设备上的一切都应该能够通过一个简单的手势来完成

对于有运动控制障碍的用户来说，另一个需要考虑的问题是避免使用复杂的手势。A 简单手势被定义为任何只使用一个手指，并且不依赖刷卡距离的东西，例如。

• ✅ 1个手指点击
• ✅ 1个手指双击
• ✅ 1个手指长按
• ✅ 1个手指轻扫
• ✅ 2个手指敲击

为视力障碍者构建网页

现在让我们来看看视力障碍，以及我们如何为盲人和色盲用户建立无障碍网页。

颜色的对比度

在视力障碍方面，首先要考虑的是色彩对比。颜色对比度的计算方法是一个元素的颜色与它的背景的比率。

WCAG对元素或文本的颜色对比度有一定的标准，因为如果元素或文本的对比度低，低视力的用户往往很难看到它们。这些标准是。

• 主体文字为4.5:1
• 标题文本为3:1 （标题文本允许有稍小的对比度，因为它已经很大了）。
• 其他类型的元素为3:1

这些规则也有一些例外，例如。

• 徽标不需要遵守
• 残缺的元素（如残缺的按钮）不需要遵守。

要计算颜色对比度，有一个叫CCA（颜色对比度分析器）的有用工具。这个工具可以让你手动输入颜色代码或通过颜色选择器，并会告诉你颜色对比度。它还会告诉你对比度是否符合WCAG AA和AAA的要求。

颜色对比度分析器工具（CCA）

色觉障碍

除了颜色对比度，为色盲用户建立也很重要。根据人们看不到的不同颜色，有多种类型的色盲--该图显示了其中的几种类型。

一些不同类型的色盲

在上图中，你可以看到在Duerteranope中，绿色和红色看起来几乎没有区别--所以在构建我们的用户界面时，必须牢记这一点。

为色觉障碍的用户建立用户界面的一种方法是同时使用颜色和符号来传达信息。例如，在下图所示的错误状态中，有一个错误符号，以及错误字段上的红色轮廓。

对错误状态同时使用颜色和符号

NoCoffee是一个Chrome扩展，可以模拟不同颜色的视力障碍，帮助你测试你的网页。

缩放级别和字体大小

对于有视力障碍的用户来说，还有一件事需要考虑，那就是如果用户增加了 缩放级别或 字体大小.如果用户有视力障碍，浏览器的缩放级别是很多用户都会使用的一个功能，所以 200%测试是一种确保当你放大时没有任何中断的方法--当放大到200%时。

• 页面上的元素不应该重叠
• 不应该有任何不必要的滚动条
• 内容的顺序应该仍然有意义

为听觉障碍者而建

我们应该照顾到听力障碍的主要问题是，不应该只通过音频来传达关键信息。如果网页上的音频不是用来传达关键信息的，那么它是可以的，但是对于有说话的视频，我们应该有字幕。

视频应该为有听力障碍的用户提供字幕--以YouTube为例

针对认知障碍的建设

最后，让我们来看看如何使我们的网页对有认知障碍的用户无障碍。

避免基于时间的任务

首先，你的网站不应该对用户在一项任务上花费多长时间做出假设。例如，错误信息或弹出窗口不应该在几秒钟后自动隐藏，因为你应该给用户时间来阅读内容。同样地，表单不应该有超时，除非他们非常慷慨--我们不应该围绕用户需要多长时间来阅读或完成一项任务进行假设。

简单的表单和自动填表

其次，表单应该简单易填，易于理解，并且应该有清晰的错误信息。自动填充是一个有用的工具，因为它意味着用户不需要记住他们的信用卡号码或邮政编码--这可以很容易地使用HTML自动填充属性来添加。

autofill="off"
autofill="name"
autofill="email"
autofill="organization"
autofill="street-address"
autofill="country"
autofill="postal-code"
autofill="cc-number"
autofill="bday"
autofill="tel"

在为有认知障碍的用户制作无障碍网页时，还有许多事情需要注意，这里还有一些提示。

• 保持文本复制的简单性
• 尽量减少外围的和分散注意力的内容，如广告或弹出式窗口
• 尽量使用熟悉的元素，例如，链接元素应该有一个下划线，并且在点击时应该改变颜色
• 争取在你的网站上各页之间有一个一致的布局。

一些有用的工具和资源

阿克塞

斧子是一个工具和chrome扩展，可以静态地分析你的网页，并标记出可访问性问题。注意：Axe是静态运行的，所以如果你有一个多页的网站，你需要在每个页面上运行它。

Axe React

@axe-core/react是一个npm包，用于测试你的React代码的可访问性问题--这与Axe类似，但有助于你在编码时更早地发现错误。

其他工具和资源

这里有一些其他有用的工具和资源，包括上面文章中提到的那些。

• Accessibility Scanner- 一个Android a11y评估工具
• WAVE- 一个浏览器a11y评估工具
• 可及性洞察力
• NoCoffee- 色觉障碍模拟器Chrome扩展程序
• CCA（色彩对比度分析器）
• ARIA MDN文档
• Windows JAWS- 读屏软件
• MacOS VoiceOver- 读屏软件