了解模块，主题或网站的可访问性似乎是一项艰巨的任务。如果您不熟悉可访问性，那么该主题的范围之广会让您想知道从哪里开始。适应各种各样的能力意味着相应地要考虑各种各样的问题。在本文档中，我们已将必要的注意事项列出为一个逻辑的逐步过程，以检查您的模块主题或网站的可访问性。
从运行自动化工具开始
通过自动工具运行页面可以发现许多可访问性问题。一些自动化工具包括WAVE，Tenon，Accessibility Insights，Google Lighthouse，Siteimprove和适用于Chrome 的Siteimprove Accessibility Checker扩展。使用axe-core可以使其中一些自动化。这些工具将帮助您快速捕获一些可访问性问题，例如标记的结构不正确，ARIA属性缺失和颜色对比度不足。
测试键盘导航
键盘导航是无法或选择不使用鼠标的用户访问屏幕上所有内容的主要方法。这包括屏幕阅读器用户，以及具有运动障碍（例如重复性应激损伤（RSI）或麻痹）的用户。为了获得良好的键盘体验，目标是具有合理的制表符顺序和易于识别的焦点样式。您还应该确保用户不必浏览过多的制表位。
要找什么
- 您可以跳过重复的内容吗？
- 应该提供一个跳过链接，使用户直接进入该页面唯一的内容，从而跳过重复的内容，例如导航菜单。跳过链接应该是页面上的第一个制表位，并且在聚焦时应该可见。
- 所有控件都可以完全操作吗？
- 每个交互元素都必须可与键盘一起使用。展开/折叠，树状视图和滑块，对话框和叠加层-拖放-一切。还是需要一种替代方法来完成操作。
- 您可以在两个方向上切换吗？
- 我们已经看到了一些应用程序，这些选项卡可以在页面上进行前移，但无法将其后移（使用Shift + Tab组合键），从而创建了键盘陷阱。确保可以在两个方向上一路浏览整个界面。
- 有键盘陷阱吗？
- 谨防在任何时候都完全陷入焦点。用户是否可以通过仅使用键盘来逃脱叠加层，模态和自动完成小部件？如果没有，那么您刚刚创建了一个键盘陷阱。
- 出现对话框时，您的注意力是否受到限制？
- 出现对话框时，应将键盘焦点限制在其中。否则，您可能会对其进行制表，并在对话框后面的页面上进行制表，而无法看到您的位置。
- 您的焦点始终可见吗？
- 一般的经验法则是，用户可以与之交互或提供输入的任何控件都应可聚焦并显示聚焦指示器（例如聚焦环）。如果键盘用户看不到重点，他们将无法与页面进行交互。
- 是否存在不可见但可以通过键盘访问的内容？
- 确保不存在应该被隐藏的内容，但按制表符顺序仍然存在。
- 是否存在与基于悬停可见的键盘可访问内容等效的功能？
- 使用鼠标来测试是否存在仅在悬停时才可见的内容，而您仅通过键盘无法访问这些内容。悬停可见的内容应具有替代的访问方式。使用键盘导航的用户不仅需要此功能，而且使用触摸导航的用户也需要此功能。
- 是否存在不应聚焦的可聚焦元素？
- 非交互式内容不应重点突出。如果某件事是可聚焦的，则期望用户可以使用它来做某事。用户可能对无法操作的可聚焦内容感到困惑或沮丧。
-
除非期望用户操作元素，否则不要在元素上放置tabindex =“ 0”属性。
-
在非交互式元素上添加不必要的tabindex属性也意味着导航内容需要花费更多的精力。
测试您的响应断点
完成所有这些键盘测试之后：增大浏览器的缩放比例，直到达到响应的断点，然后再次执行所有操作。使用高级别浏览器缩放功能的任何人都将与笔记本电脑上的“平板电脑”或“手机”版本进行交互。移动断点不仅限于触摸屏用户。
使用屏幕阅读器进行测试
运行自动辅助功能检查和手动浏览页面已经很长了。如果您不熟悉使用屏幕阅读器，则可以在不实际使用屏幕阅读器的情况下检测到许多这些问题。
要找什么
- 所有控件都有标签吗？
- 所有控件都应通过描述控件目的的标签来描述。在大多数情况下，这是通过使用元素完成的，但是在某些高级用例中，您可能必须使用aria-labelledby属性。
- 是否有任何自定义控件？是否通过适当的角色以及赋予其状态的任何必需的ARIA属性对其进行了描述？
- 辅助技术的用户应该可以访问通过格式，光标样式或位置等视觉提示传达给视力用户的相同信息。本机元素具有浏览器内置的此语义信息，但是对于自定义控件，您需要使用ARIA来添加此信息。例如，自定义滑块组件可能具有ARIA滑块的角色，它具有一些相关的ARIA属性： aria-valuenow，aria-valuemin和aria-valuemax。
- 信息流是否与您在屏幕上看到的一致，是否有意义？
- CSS可能会更改信息流。使用屏幕阅读器访问内容时，内容流是否也有意义？
- 链接文字有意义吗？
- 大多数屏幕阅读器在每个链接之前都说“链接”。例如，“产品”链接将被理解为“链接产品”。因此，链接不需要在链接文本中包含“链接”，因为所有用户已经知道它是链接。
- 在链接之间进行制表是一种为屏幕阅读器用户浏览Web内容的方法。链接应该脱离上下文。当从上下文中读出时，诸如“单击此处”，“更多”，“单击以获取详细信息”等短语是不明确的。
- 所有图像都有正确的替代文字吗？
- 所有图像均应带有适当的替代文字。这种做法的例外情况是，图像主要用于演示目的，而不是必不可少的内容。如果屏幕阅读器应跳过该图像，请将alt属性的值设置为空字符串。
使用屏幕阅读器进行手动测试
某些问题只能通过使用屏幕阅读器手动测试应用程序来解决。最常见的屏幕阅读器是VoiceOver（Mac OS）和NVDA（Windows）。要开始使用VoiceOver，您可以观看有关VoiceOver基础知识的视频并阅读VoiceAover的WebAIM教程。要开始使用NVDA，您可以观看有关NVDA基础知识的视频，并阅读有关如何使用NVDA和Firefox测试Marco Zehe的网页的信息。
熟悉屏幕阅读器并了解所需的常规键盘命令后，请尝试关闭显示器并放开鼠标。请记住，屏幕阅读器的发音应放在测试范围之外。
标题
标题是您内容的框架。良好的标题结构可以反映页面上的内容，例如书的索引。具有描述性标题和有意义的级别很重要，因为某些屏幕阅读器用户使用它们来浏览页面内容。
如果您已经运行了一种自动辅助功能工具，则很可能已经涵盖了与标题相关的大多数问题。
要找什么
- 每页只有一个H1元素吗？
- 每页仅应有一个H1元素来描述该页面的含义。
- 标题级别是否与内容匹配？
- 重要的是，根据其他标题而不是其字体大小来使用其他标题。重要的是不要跳过标题级别。
- 标题是否具有足够的描述性？
- 好的标题文本简短地描述了标题后面的内容。
颜色和对比度
必须有足够的色彩对比
颜色对比度是前景色（文本）和背景色的比率。文本与背景的比例应为4.5：1或更大。您可以使用颜色对比检查器来确定您的颜色是否符合此要求。
颜色一定不是显示视觉信息的唯一方法
尽管颜色是显示视觉信息的有效方法，但它并不是传达信息的唯一方法。当仅使用颜色来传达重要信息时，有色盲的人可能会遇到困难（他们可能会完全错过它）。
如果使用颜色来传达信息，请也至少使用以下一种额外方法：
- 使用有意义的文本来提供信息。例如，从绿色变为红色的圆圈旁边的“开”和“关”。
- 使用有意义的图标，以便用户可以按形状区分含义。
- 为了指示格式错误，不要只说“标记为红色的字段”。最好说出字段名称，并用可识别的错误图标标记它们。
另一个示例是用红色标记必填字段。一些用户可能无法将红色与其他颜色区分开，并且可能缺少填写此表格的信息。可以通过在字段标签上添加一个星号来解决此问题。
焦点状态不应仅依赖颜色。需要其他形状来传达焦点。通常，这将是围绕具有焦点的交互式控件的额外轮廓。
不单靠图标
如果图标代表功能的重要组成部分，则应随附描述其目的的文本。确保标记了交互式元素，例如导航菜单。并非每个用户都能理解对您显而易见的图标。屏幕阅读器还需要一个标签才能读取元素。
声音和视频
如果页面依靠声音或视频来传达信息，请确保提供字幕或解说词。有关字幕，字幕和音频描述的WebAim文章的更多信息
- 当使用信息的视频在您的网页音频或不带音频，视频也将需要为视障人士文本成绩单。
- 当您在网页上使用带有音频的内容丰富的视频 时 ，您的视频将需要为听障人士启用隐藏式字幕。
- 当使用带有声音的内容丰富且复杂的 视频 时，您可能需要为视力障碍人士提供音频描述，以描述通常不是由隐藏式字幕提供的视频中场景和动作的上下文。
- 使用实时视频时， 必须为听力障碍的人提供字幕。
- 使用 现场音频时，必须为视障人士提供文本替代。
动画和自动播放视频和音频
在不受用户控制的情况下自动播放的动画，视频和/或音频可能会分散页面的其他部分。即使动画或视频位于页面上您可能认为不会引起问题的位置，我们也不知道用户如何查看页面。
动画，自动播放视频和音频的示例：
- 动画：轮播会自动循环播放一系列图像；
- 自动播放视频：页面加载后立即播放YouTube视频；
- 自动播放音频：页面加载后，广播源立即播放。
要减少页面上的干扰，请执行以下操作：
- 避免播放动画，视频和内容超过5秒。
- 为用户提供控件，以便他们可以选择何时停止，播放和暂停动画，视频和音频。
动态更改内容
JavaScript使动态更改页面的某些部分而无需完全重新加载它成为可能。无法完全看到这些更改的用户仍然需要知道它们已经发生。页面动态更改的示例包括动态更新搜索结果列表或显示不需要用户交互的离散通知。Drupal.announce（）API 提供了一种在某些辅助技术上宣布动态内容更改的方法。
Drupal.announce（）是一个基于ARIA活动区域构建的API 。在此有关ARIA活动区域角色的文档中可以找到一些示例用例。
测试动态更改的内容的最佳方法是使用屏幕阅读器。
评论