网络无障碍——ARIA 简介

在上一篇文章中，我们讨论了在编写代码时HTML5使用的屏幕阅读器的重要性semantic HTML。今天我们将讨论ARIA，它可以补充标记，以便将应用程序中常用的小部件和交互传递给assistive technologies。你可能听说过它，但它到底是什么呢ARIA？

无障碍富互联网应用程序 (ARIA) 是一组属性，用于定义如何使 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的 Web 应用程序）更方便残障人士访问。 （MDN）

简单来说，它们是我们添加到HTML标签中的属性。这些属性提供了关于元素的额外信息，这些信息原本是非语义的，会给屏幕阅读器带来困难translate。需要强调的是they do not replace HTML5，它们应该只在我们无法使用时使用semantic elements。这是什么意思呢？让我们来看一个例子：

错误的

<header>
 <ul>
  <li>About</li>
  <li>Portfolio</li>
  <li>Contact</li>
 </ul>
</header>

我们在标题内构建了一个无序列表的导航。这对于屏幕阅读器来说毫无意义，它会大声读出列表，而不知道我们想要传达的是导航菜单（用户会听到类似这样的话：）list with there items。

更好的

<header>
 <div role="navigation">
  <ul>
   <li>About</li>
   <li>Portfolio</li>
   <li>Contact</li>
  </ul>
 </div>
</header>

我们可以通过使用 使代码更易于理解"role" ARIA attribute。现在屏幕用户会知道它正在读取导航（用户会听到类似： 的内容）。好多了，对吧？但是，虽然我们的问题解决了，但由于提供了语义元素，navigation with three items解决方案并不完全正确。所以，如果我们想要实现最佳方法，我们可以编写如下代码：HTML5nav

最好的

<header>
 <nav>
  <ul>
   <li>About</li>
   <li>Portfolio</li>
   <li>Contact</li>
  </ul>
 </nav>
</header>

对于用户来说，效果是相同的，他听到的也是相同的translation。当然，这是一个使用ARIA属性的非常简单的例子，所以让我们看另一个。

让我们使用原生inputHTML 元素实现一个复选框：

<label>
 <input type="checkbox">
 Agree with the terms and services
</label>

当屏幕阅读器遇到此代码时，它会告诉用户这是一个复选框，它会读取标签，并读出复选框的状态（选中或未选中）。但是，假设我们必须实现一个自定义复选框，我们不能使用元素，input而只能使用以下div元素：

<div id="checkbox" checked>
 Agree with the terms and services
</div>

屏幕阅读器不会提示用户这个 div 是复选框。最好的情况是，它会读出 div 内部的文本，但不会提示任何关于元素角色或其状态（选中或未选中）的信息。注意，我使用了role和state。我们可以通过添加 ARIA 属性来指定元素的role和，使这段代码更适合屏幕阅读器：state

<div role="checkbox" aria-checked="true">
 Agree with the terms and services
</div>

通过向 中添加额外的信息div，屏幕阅读器现在可以告诉用户它遇到了checked checkbox。很棒，不是吗？

其他示例role attributes包括：

• button
• scrollbar
• searchbox
• ETC

其他示例state attributes包括：

• aria-disabled
• aria-grabbed
• aria-autocomplete
• ETC

属性列表当然比这更大，如果您想了解更多信息ARIA，可以阅读W3C（万维网联盟）提供的这个超级全面的资源。

图片来源：Pexels 上的 energepic/@energepic-com-27411