只需 5 个简单步骤即可解决 85% 的 Web 可访问性问题

标题 1

标题 1

在之前的文章中，我们看到了Web 可访问性的重要性，并提到了WebAIM Million ，这是WebAIM对 100 万个热门页面的 Web 可访问性现状进行的分析。

结果令人震惊：被分析的主页平均每个网站有近60个错误，而干净网站的比例不到3%。不过，也有一线希望：大多数错误可以归为几类。在总共5960万个错误中，有5210万个错误是由五个易于预防的问题引起的：

• 3600 万个文本实例对比度不足。
• 其中 1230 万张是没有替代文字的图片。
• 200 万是没有相应标签的输入。
• 其中 130 万个链接为模糊链接或空链接。
• 50 万个是无序标题。

纠正这五种问题类型将解决检测到的大多数可访问性问题。

5 个简单步骤

1.增加文本颜色对比度

根据 WebAIM 报告，文本对比度差是最常见的错误。平均而言，所分析的主页存在 36 个文本与背景对比度不足的问题。

对我来说，这可能是最严格的要求（至少在创意方面），因为很多时候我发现一个有趣的调色板最终会被丢弃，因为它不符合WCAG规范。一个选择是遵循限制较少的 AA 级标准，因为某些内容无论如何都不可能满足所有 AAA 级成功标准。

WebAIM 有一个非常棒的检查颜色对比度的工具，你也可以在网上找到许多其他工具。实际上，自己实现一个也非常简单。它需要一些数学知识，但并不复杂，而且可以成为一次很棒的学习体验。例如，我自己开发了一个对比度检查器来测试 RGB 颜色，因为我在网上找到的所有检查器都只支持十六进制值。

2. 为图片添加替代文本

为图像添加替代文本是Web 可访问性的主要支柱和基本原则之一。然而，这几乎是每个网站最常见的问题之一，即使alt图像中必须添加该属性。

<img src="guernica.jpg" alt="Guernica painting by Pablo Picasso" />

虽然看起来只需在标签alt中添加带有描述的属性<img>，但替代文本可能需要一些思考。图片的作用是什么？图片周围的文字是什么？我们可能不想忽略图片（添加一个alt=""），也不想让屏幕阅读器重复显示相同的信息两次。

alt="Guernica painting by Pablo Picasso" alt="Guernica: a large oil painting by Spanish artist Pablo Picasso completed in June 1937" alt=""

还有一件事需要考虑：如果图片被用作CTA，那么它alt应该是对要采取的操作的描述，而不是图片本身！用户可能想知道图片是一台打印机，但他们真正想知道的是，如果他们点击它，文档就会被打印出来。

3. 标签表单元素

标签有很多好处，例如：（1）它们有助于识别并提供有关字段的附加信息；（2）点击时，它们将聚焦于链接的表单元素；（3）它们易于实现。你只需要用标签包裹文本<label>，并使用for属性指向元素的 id 即可：

<label for="username">Username:</label>
<input id="username" type="text" name="user">
<label for="password">Password:</label>
<input id="password" type="password" name="pass">

有时可能会出现一些棘手的情况，输入可能没有针对每个输入的特定标签（例如，包含允许编辑的行的表，或者应应用于多个字段的标签）。在这种情况下，您可以使用属性aria-labelledby指向将用作标签的元素：

<table>
  <thead>
    <tr>
      <th id="namelabel">Name</th>
      <th id="addresslabel">Address</th>
      <th id="agelabel">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input aria-labelledby="namelabel" name="name" /></td>
      <td><input aria-labelledby="addresslabel" name="address" /></td>
      <td><input aria-labelledby="agelabel" name="age" /></td>
    </tr>
    ...
  </tbody>
</table>

如果您有一个包含表单元素（例如输入字段或单选按钮）的表单或组件，请不要忘记为不同的表单元素添加标签或添加aria-labelledby属性。

4. 为链接添加含义

你有多少次发现一个网站或博客，上面有帖子摘要和链接，要求你“阅读更多”？虽然这描述了用户将要执行的操作，但它并没有真正赋予链接意义。我们究竟是想阅读更多关于大象、网络编程还是脑外科手术的内容呢？阅读更多关于什么的内容？

现在有人可能会说：“但是一个很长的有意义的链接会破坏我们网站的呈现方式！那里只剩下‘阅读更多’的标题了！ ” 对于他们来说，还有另一种选择：aria-label在链接中使用：

<a href="#" aria-label="Read more about Web Accessibility">
  Read more
</a>

现代屏幕阅读器将读取aria-label而不是锚文本，因此您可以保留短链接标题，同时提供有意义且易于理解的文本。

5. 正确组织内容

每个页面的内容都应该语义清晰、组织有序，并使用正确的标题。这听起来似乎显而易见，但却是一个常见的错误：在我们分析的主页中，超过一半都存在这个问题。

屏幕阅读器允许用户在各个标题之间跳转。一份组织混乱的文档对他们来说就像一本《选择你自己的冒险》！而且，这种混乱的组织结构不仅会让网站爬虫感到困惑，也会让其他人感到困惑。

另外，别忘了使用合适的语义标签；务必使用标题（<h1>、<h2>等），而不是将其他元素设计成类似标题的样式。它们在视觉上可能相似，但并非所有用户都依赖视觉。

结论

WebAIM 分析发现 87% 的 Web 可访问性问题都是很容易发现的错误，这似乎是个好消息，但我们需要对这些结果持保留态度：所分析的页面只是主页，通常不包含容易出现更复杂的可访问性问题的复杂组件。

另外，声称 85% 的无障碍问题可以通过上述 5 个步骤解决，这有点夸大其词。（抱歉，标题太吸引人了。）不过，实际比例可能与实际情况相差不远（这正好印证了计算机领域古老的 80/20 规则）。

我们的主要教训是，提高网络可访问性可能具有挑战性，但它并不像看起来那么复杂，而且每一个改进，即使是最微小的改进，都很重要。