2020 年，作为开发人员需要了解的关于 Web 可访问性的 10 件事

什么是网络可访问性？

在深入探讨 Web 无障碍性之前，我们首先应该理解“无障碍性”的含义。据我所知，“无障碍性是指每个人无论自身条件如何，都能访问某些内容（例如互联网、交通系统）的能力。” 它不是一个可以随意打开或关闭的开关。我们需要从一开始就编写语义化的 HTML。

1. 为所有图片添加 Alt 文本

为图片添加替代文本是网页无障碍访问的首要原则。如果图片加载失败，这些文本将替代图片。为图片添加替代文本有助于使用屏幕阅读器的用户。屏幕阅读器会读取替代文本，并将信息提供给视力障碍用户。

Alt 文本应该回答这个问题：图像传达的内容是什么？

注意：如果图片纯粹是装饰性的，或者由于周围上下文已经解释了内容而造成冗余，那么添加空属性会导致屏幕阅读器跳过该图片。如果您不添加任何替代文本，某些屏幕阅读器会将文件名读给用户。这是您能提供的最糟糕的体验。

2. 表单应易于访问

虽然创建表单有时可能很困难，但使其适度无障碍并不像你想象的那么复杂。在网站和应用程序上为残障人士甚至非残障人士填写表单应该始终轻松自如。

• 创建真正可访问的表单的第一条规则是使用本机 HTML 表单控件。

<input type="text">

<input type="radio">

<input type="checkbox">

<button>Submit</button>

由于我们使用原生 HTML 控件，因此元素的名称、角色和状态默认会向所有辅助技术公开。但是，如果您使用 div 来构建自定义元素，请务必添加 ARIA 属性，例如 aria-label、aria-checked、role=“radio” 等。

• 确保尽可能使用明确的标签。👇

<label for="fname">First Name:</label> 
<input type="text" name="fname" id="fname"><br>
<label for="lname">Last Name:</label> 
<input type="text" name="lname" id="lname">

如果未使用明确的标签，请确保使用 aria-label、aria-labelledby 为每个表单控件提供标签。

欲了解更多信息，请阅读可见标签

3. 确保所有交互功能均可通过键盘访问

键盘无障碍功能最重要的目标是让所有交互元素（例如链接和表单控件）都可以通过 Tab 键访问。这正是仅使用键盘的用户浏览网页的方式。测试网站的键盘无障碍功能其实非常简单：只需按下 Tab 键，从页面顶部导航到底部，并在导航过程中高亮显示活动元素即可。

盲人需要完全的键盘控制。就是这样。——
David Macdonald，《在 HTML5 中使用 WAI ARIA》联合编辑

网页和Web应用程序键盘操作常用按键

Tab 键 – 移至下一个链接、表单元素或按钮。Shift
+Tab 键 – 移至上一个链接、表单元素或按钮。Enter
键 – 激活当前链接或按钮。Space
键 – 选中或取消选中表单元素的复选框。同时还会激活当前处于焦点的按钮。
向上/向下箭头键 – 在单选按钮之间移动，在某些情况下，在菜单链接之间移动。
向右/向左箭头键 – 在某些情况下，在菜单链接之间移动或调整音频和视频插件中的滑块。Esc
键 – 关闭当前模态对话框或下拉菜单，并将焦点返回到生成它的元素。

如果你有兴趣阅读关于如何改进键盘导航的技巧，请阅读这里

4. 设计可用的焦点状态

你有没有注意到，链接、输入框和按钮周围有时会出现蓝色轮廓？这些轮廓被称为焦点指示器。

默认情况下，浏览器会使用 CSS 伪类在元素被选中时显示这些轮廓。您的设计师可能会觉得这些默认焦点指示器不太美观，很想隐藏或移除它们。但是，如果您要移除此默认样式，请务必将其替换为其他样式。

焦点指示器可以帮助人们知道哪个元素具有键盘焦点，并帮助他们了解在浏览您的网站时他们在哪里。

5. 在内容上使用正确的标记

在编写语义标记时，我们使用 HTML 标签来告知浏览器元素内容的信息。在语义标记中，标签不再仅仅是让内容以人类可读的格式显示在网页上的一种方式。

标签本身成为一种告诉机器（无论是浏览器、计算机、智能手机还是其他智能设备）内容含义的方式。

标题标记了内容的起始位置——它们是赋予文本的标签，用于定义其样式和目的。标题还确立了页面内容的层次结构。

大字体标题有助于读者更好地理解内容顺序。同样，屏幕阅读器也使用标题标签来阅读内容。这样，视力障碍人士可以通过按层级结构阅读每个标题来概览页面。

开发网站时，使用合适的结构元素至关重要。HTML 元素会向浏览器传达它们包含的内容类型以及浏览器应如何渲染或处理这些内容。页面的组件和结构构成了无障碍树。这棵树为屏幕阅读器提供支持，盲人可以使用屏幕阅读器来“聆听”页面内容。

标记使用不当会影响可访问性。请勿仅将 HTML 标签用于样式效果。屏幕阅读器会按标题结构（真正的标题，而不仅仅是粗体文本）分层导航网页。使用您网站的用户可以收听所有标题的列表，按标题类型跳转内容，或直接导航到顶级标题。<h1>

6. 不要在按钮上使用禁用属性

如果在按钮上使用禁用属性，它会将其从辅助功能树中删除，因此屏幕阅读器永远不会知道该按钮是否存在于页面上。

为了解决上述问题，请确保对按钮进行视觉样式设置，使其看起来被禁用，并可以用来pointer-events: none防止点击按钮。

但是我如何确保当屏幕阅读器用户使用网页时他们应该明白该按钮已被禁用。

解决你的问题🤘的方法是使用aria-disabled属性

<button id="target" aria-disabled="true">target</button>

7.谨慎使用display: noneCSS 属性。hidden

经常会出现这种情况，你可能想在点击按钮或链接时隐藏某些内容。在这种情况下，请记住，如果你使用display: none或hidden，它也会被从辅助功能树中移除。设置display: none隐藏内容，同时也会将其从辅助功能树中移除，这样屏幕阅读器就无法读取它了。

在某些情况下，你可能只想向屏幕阅读器用户显示某些内容，并且希望这些内容在视觉上被隐藏。你会如何处理这种情况？

有一个很好的解决方案👇可以在视觉上隐藏内容，同时将其保留在屏幕阅读器的可访问性树中：

.sr-only {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

为屏幕阅读器隐藏内容

有些内容对于理解网页并不重要，但是为了提升视觉吸引力而添加的。例如，图标和字形可以提供美观的视觉效果，但对于屏幕阅读器用户来说往往毫无帮助，有时甚至会分散注意力。在这种情况下，我们希望对屏幕阅读器隐藏这些内容，同时向其他用户显示。

在本例中，我们将使用 aria-hidden 属性。aria-hidden 是一个布尔属性，因此可以设置为 true 或 false。将该属性设置为 false 与不添加该属性的效果相同，因此通常需要将其设置为 true 并像这样使用：

<div class="my-glyph" aria-hidden="true"></div>

8. 视觉顺序和 Dom 顺序应始终匹配

实现合理的 Tab 键顺序是为用户提供流畅的键盘导航体验的重要组成部分。屏幕阅读器和其他辅助技术会按照 DOM 顺序导航页面。信息流应该合理。

让我们看一个例子

<ol>
  <li>Basket Ball</li>
  <li>Foot Ball</li>
  <li>Throw Ball</li>
</ol>

HTML 最终会以这种方式呈现在 DOM 中（因此它也会以这样的方式呈现给辅助技术），并且默认情况下，这些列表项也会以该顺序进行视觉显示。在大多数布局情况下，视觉顺序将与 DOM 顺序一致。如果不执行任何操作，列表项将沿文档的块方向流动。应用 flexbox 布局后，列表项将沿文档的行内方向流动。

但是 flexbox 和 grid 也会让你把事情搞砸。比如这个：

ol { 
  display: flex;
  flex-direction: row-reverse;
}

在上面的例子中，DOM 顺序仍然合理，但视觉顺序完全错误。当你使用 Tab 键在内容中移动时，视觉顺序和键盘导航 (DOM) 顺序之间存在脱节。在这个简单的例子中，虽然它仍然是错误的，但在flex-box用于布局复杂界面的情况下，它可能会给使用辅助技术的用户带来糟糕的体验，使其无法使用。

解决方案是提供tabindex给元素，以便视觉和 dom 顺序匹配

但问题在于 tabindex 的作用域限定在文档内。如果将上述代码添加到页面中，它将完全破坏 Tab 键顺序。无论 tabindex 对应的三个元素在 DOM 结构中的位置如何，它们都会成为页面上最先获得键盘焦点的元素。

要了解更多信息，请查看这篇精彩的文章

9.谨慎使用颜色。

背景和前景内容（通常是文本）之间的颜色对比度应该足够大以确保可读性。

您可以使用多种工具来评估颜色对比度，这将帮助您使您的页面对于视力低下或不同程度色盲的人来说尽可能具有视觉可用性。

10.使动态内容可访问。

当网页内容动态更新（即无需刷新页面）时，屏幕阅读器可能无法感知页面上发生的事件。这包括屏幕叠加层、页面内更新、弹出窗口和模态对话框。

问题：
仅使用键盘的用户可能会被页面叠加层困住。使用放大软件的用户可能会放大到页面的错误部分。

解决方案

这些功能可以轻松访问。选项包括 ARIA 角色和警报。

确保视频播放器不会自动播放（非自愿性声音），并且播放器可以与键盘配合使用。此外，所有视频都必须提供隐藏字幕和文字记录选项，方便听障人士观看。

如果您的网站包含幻灯片，请确保每张照片都带有替代文本，并且可以通过键盘导航。如果您使用任何独特的小部件（例如日历选择器或拖放功能），请务必测试其可访问性。

这是我在网上找到的一篇很棒的文章，我推荐

阅读资源📚

WebAIM文章、资源和 Web 无障碍相关培训。
色彩无障碍工作流程：Geri Coady 提供的一些简洁示例，助您在设计中轻松掌握色彩。

有用的工具

WebAIM 颜色对比度检查器：出色的对比度颜色检查器，可实时提供常规文本和大文本的检查结果。
包容性组件：以博客形式呈现的模式库，专注于包容性设计。每篇文章都会探讨一个常见的界面组件，并提出一个更好、更强大、更易于访问的版本。Color
Oracle：适用于 Windows、Mac 和 Linux 的免费色盲模拟器。它实时显示患有常见色觉障碍的人所看到的内容。Vox
产品可访问性指南：面向设计师、工程师和项目经理的综合清单。AXE
Google Chrome 扩展程序：使用 Chrome 检查器测试任何网站是否存在可访问性违规行为。
对比度：一个用于快速访问 WCAG 颜色对比度的 macOS 应用。

负责任地开发。谢谢。