Web可访问性是开发网站或Web应用程序时要考虑的极其重要的方面，但是许多公司要么忽略了可访问性准则，要么不了解如何正确实施它们。

有人认为使网站可访问性是道德义务。 所有人，无论有能力还是有残疾，都应该能够使用互联网并获得在那里可以找到的丰富知识。

其他人则采取更务实的方法，认为可访问性可以视为一个财务问题：使站点可访问性的投资回报是否值得？ 如果不遵循可访问性准则，则有疏远残疾用户和失去业务的风险。 那么，工程成本是否值得失去潜在的市场份额？

我个人属于第一阵营。 我相信我们所有人都应该在道义上有义务使我们的网站尽可能地易于访问。 不一定是因为这是最明智的事情，而是因为这是正确的事情。

（特别是如果您的公司是在教育领域或提供基本服务。通过不创建可访问的内容，您在某种意义上说：“那些残疾人不值得教育。您不值得我们花费时间或精力。”）

我认为，从根本上讲，我们作为开发人员希望做正确的事。 然后，问题主要是由于许多开发人员没有任何使他们的站点可访问或不知道如何进行的经验。

例如，您是否曾经尝试在网站上使用屏幕阅读器？ 还是您根本不知道如何使用屏幕阅读器？ 您是否知道可用哪些工具来帮助您的网站审核可访问性问题？ 您知道并了解应遵循的准则吗？

Web内容可访问性指南（WCAG）

“ Web内容可访问性指南” （通常简称为WCAG）是一组有关如何使您的Web内容更易于访问的指南和建议。 在撰写本文时，本文档的当前版本为WCAG 2.1。

WCAG由万维网无障碍倡议（WAI）组出版，该组织是万维网联盟（W3C）的一部分。

像W3C中的大多数内容一样，该文档也非常丰富。 这是一个非常技术性的文档，非常长，可能会让人筋疲力尽。

WCAG 2.1为改善网站的可访问性提供了4条原则和13条准则。 在本文中，我们将简要介绍所有这些点。

在阅读完本文之后，您应该应该对应该遵循的指南有所了解，并能够看到一些“低落的果实”，这些都是您可以在自己的网站上快速实现的目标。

WCAG 2.1原则

莎拉·谢弗 （ Sarah Shaffer） 在 Unsplash 上 拍摄的 照片

WCAG 2.1概述了可访问性的四个原则。 网站必须为P erceivable，O- perable，U nderstandable和R obust（POUR）。

为了使内容可感知 ，用户必须能够感知该内容存在。 对于无法使用所有感官的用户，不能将其隐藏起来。

为了使用户界面可操作 ，用户必须能够操作和导航站点，无论他们使用的是鼠标，键盘还是屏幕阅读器。

为了使信息易于理解 ，用户必须能够理解页面上的内容并理解如何操作页面。

为了使网站健壮 ，用户必须能够在各种设备，屏幕尺寸和浏览器上使用该网站，包括与辅助技术一起使用时。

既然我们已经从高层次上了解了Web可访问性的指导原则，那么让我们深入研究每个原则的细节。 这就是13条指南的出处。

1.可感知的

Yassine Khalfalli 的 Unsplash 照片

为了使您的内容易于理解，请遵循以下准则：

准则1.1文字替代

提供页面上任何非文本内容的替代文本。 例如，非装饰性图像应具有描述该图像的alt属性。 （诸如背景图像之类的装饰图像只能具有一个alt属性，并将其值作为一个空字符串。）

准则1.2基于时间的媒体

音频和视频片段应包括字幕或字幕，以帮助盲人和聋人。

准则1.3适应性强

内容应该能够以不同的方式和布局显示，而不会丢失信息。 例如，如果要剥离所有CSS，则网站的HTML结构应以合理的顺序阅读。 当用户在移动设备或平板电脑上查看您的网站时，视口方向不应仅限于横向或纵向。

准则1.4可区分

当用户填写表单时显示错误等信息时，请使用颜色和图标的组合，以便色盲用户仍然可以理解您的消息。 颜色不应该是显示信息的唯一视觉手段。 前景和背景之间的颜色对比度应适当（通常，您应拍摄至少4.5的对比度）。

如果音频在您的站点上播放了三秒钟以上，则用户应该能够停止音频或更改音量。 用户应该能够在不破坏站点布局的情况下更改屏幕上的字体大小。 用户不必垂直和水平滚动即可查看页面上的内容。 按钮和输入应具有悬停和焦点指示器，以便用户知道当前处于活动状态的元素。 （本指南涵盖了大量内容！）

2.可操作

Nhu Nguyen 在 Unsplash 上 拍摄的 照片

为了使您的UI可行，请遵循以下准则：

指南2.1可访问键盘

用户应该只能使用其键盘来使用和浏览您的网站。 访问自己的站点时，只需使用键盘上的Tab，Enter，空格，Escape和箭头键，即可轻松自己进行测试。 您能否到达页面上的每个按钮并输入？ 您可以使用Enter或Space键单击页面上的每个按钮吗？ （请不要做诸如在div和spans中添加单击侦听器之类的愚蠢的事情！）您是否陷入任何无法摆脱页面特定区域的焦点陷阱？ 请记住，并非所有人都使用鼠标。

准则2.2足够的时间

用户需要足够的时间来阅读页面上的内容并响应通知。 如果您的吐司出现在您的应用程序中，请不要让它们在几秒钟后消失。 让它们停留在页面上，直到用户将其关闭为止。 如果用户的会话即将到期，请提前警告他们，并为他们提供延长会话的方法。 除非基于时间的功能对您的应用程序绝对至关重要（例如，票务预订网站仅允许您在购买票证之前保持如此长的时间），否则请不要使用计时器或时间限制。

准则2.3癫痫发作和身体反应

这应该是相当简单的。 不要在您的网站上做已知会引起癫痫发作的事情。 内容闪烁的次数不得超过三遍。 不要仅仅为了娱乐而包含轻浮的动画。 页面上的任何形式的移动都应达到目的，应仔细考虑。

准则2.4可导航

方便用户浏览您的网站。 为键盘用户添加一个“跳至内容”按钮，使他们可以跳过导航链接并直接转到主页内容。 使用适当的标题级别，不要跳过标题级别！ （ h3元素不应在没有h2元素的情况下首先跟随h1元素。）标题对于屏幕阅读器用户而言非常重要。

确保在浏览网站时，焦点顺序是合理的。 如前所述，焦点指示器应该是可见的，以便用户知道他们当前关注的元素。 您的页面应该有标题。 应该使用面包屑，以便用户知道它们在您的站点中的位置以及到达站点的方式。

准则2.5输入方式

用户应该能够使用台式机/笔记本电脑上的键盘以及移动设备或平板电脑上的触摸屏来操作输入。 不要在移动设备屏幕上将按钮设置得太小，以免按下正确的按钮。 触摸目标的最小尺寸最好至少为44 x 44像素。

3.可理解的

布鲁斯· 马斯 （ Bruce mars） 在 Unsplash 上 拍摄的 照片

为了使您的信息易于理解，请遵循以下准则：

准则3.1可读

您的目标受众应该能够阅读和理解页面上的文字。 避免在不加说明的情况下行话。 在html标记上使用适当的lang属性来定义您使用的语言。 使用缩写标签abbr 。

准则3.2可预测

确保您的网站行为可预测。 保持按钮外观和链接外观一致。 如果您有一个全局导航组件显示在每个页面上，请确保链接始终位于相同的顺序和位置。 如果组件看起来相同，则它们的行为应相同。

准则3.3输入协助

您应该帮助用户避免并纠正使用应用程序时的错误。 在所有输入上使用标签。 在适当的地方使用占位符文本，但不要在标签上使用占位符文本！ 用户填写表单时，请尽快提供有用的反馈消息。 准确确定哪个输入有错误，以及用户如何纠正错误。 对于长表单或多页表单，允许用户在最后提交步骤之前检查其数据。

4.坚固

Hal Gatewood 在 Unsplash 上 拍摄的 照片

为了使您的网站更强大，请遵循以下准则：

准则4.1兼容

您的站点应该与各种用户代理兼容，并且应尽可能地面向未来。 使用正确的HTML，以便正确解析您的内容。 使用语义HTML元素，以便屏幕阅读器可以更好地理解您的页面结构。 使用具有role=status和role=alert元素可为屏幕阅读器提供有关用户与您的应用进行交互时操作成功或失败的更新。

奖励：如何测试可访问性

至此，您知道了WCAG 2.1中包含的所有原理和准则。 但是现在呢？ 你从哪里开始？ 您如何评估您在使网站可访问性方面做得如何？

以下是一些对我有用的想法，工具和扩展：

手动测试仅键盘导航

如前所述，假设您没有鼠标。 尝试仅使用键盘浏览站点。 这样可以快速了解键盘用户无法浏览或操作站点的哪些区域。

使用屏幕阅读器进行手动测试

如果您不知道如何使用屏幕阅读器，请熟悉一下。 流行的选择包括JAWS ，iOS的VoiceOver和Windows的NVDA 。 首先可能很难学习如何正确使用屏幕阅读器，但这是值得的。

了解了所选屏幕阅读器的基本命令后，请尝试在您的站点上使用它。 您将很快了解成为盲目使用Internet的沮丧程度。

Chrome扩展程序

斧头Chrome扩展程序可以提供对任何页面的分析，并有助于捕获许多可访问性问题。 可以在其GitHub存储库中找到其规则的完整列表。

Web浏览器的Accessibility Insights扩展程序是一个类似的扩展程序，还可以分析您的网站是否存在可访问性问题。

eslint-plugin-jsx-a11y

您可以使用ESLint插件eslint-plugin-jsx-a11y对JSX进行eslint-plugin-jsx-a11y以解决可访问性问题。 只需将eslint和此插件与您通常使用的任何其他插件一起添加到软件包的dev依赖项中，便eslint 。 与其他所有ESLint插件一样，可以将其配置为根据您选择遵循的可访问性规则产生警告或错误。

结论

如果您已经做到了这一点，感谢您的阅读！ 我希望到目前为止，您了解使站点可访问的动机，应遵循的原则和准则，以及如何进行辅助功能测试。

现在走到那里，使世界成为一个更美好，更便捷的世界！

先前发布在 https://levelup.gitconnected.com/wcag-2-1-simplified-how-to-make-your-website-accessible-1cfadd03d20d

From: https://hackernoon.com/how-to-make-your-website-accessible-wcag-21-w3c-recommendation-zda53yad