ARIA的5条规则

你听说过ARIA吗？它听起来可能有点奇怪，甚至乍一听会让人望而生畏。

在这篇文章中，我想谈谈ARIA的5条基本规则。

ARIA代表什么？

我们先来了解一下这个缩写词的含义。ARIA
代表Accessible Rich Internet Applications（可访问的富互联网应用程序）。它
是一套角色和属性，定义了如何让网络内容和网络应用程序（尤其是用 JavaScript 开发的应用程序）对所有人更易于访问。

ARIA 有 5 条基本规则。

第一条规则——不要使用ARIA（除非别无选择）

这听起来可能有点违反直觉，但与其创建我们自己的自定义元素并通过添加 ARIA 属性来使其可访问，我们不如使用原生 HTML 元素。

而不是使用以下方式创建按钮<div>

<div role=“button” tabindex=“0” aria-pressed=“false”>Open</button>

最好还是使用原生 HTML <button>。

<button type=“button”>Open</button>

如果可以使用原生 HTML 元素，那就应该这样做。只有在万不得已的情况下才应该联系 ARIA。

第二条规则——优先使用原生语义而非ARIA语义。

我们应该始终优先选择原生 HTML 元素，而不是带有 ARIA 属性的自定义元素。

假设我们要创建一个标题。在这种情况下，最好使用原生<h2>HTML 元素，而不是<div>带有 ARIA 属性的元素。

这不是个好主意。

<div role="heading" aria-level="2">Title text</div>

我们应该优先使用原生HTML元素。

<h2>Title text</h2> 

注意：
如果我们创建一个交互式元素，例如一个 `<div>` ，<button>除了 使用正确的 ARIA 属性之外，我们还需要使用 JavaScript 添加适当的交互行为（例如点击处理程序）。<div>

因此，对于 <a> 元素<button>，使用原生元素要好得多，也容易得多。

<button type=“button”>Open</button>

第三条规则——所有交互元素都必须能够通过键盘操作。

所有交互元素，无论是我们创建的自定义元素还是原生 HTML 元素，都必须能够同时使用鼠标和键盘进行操作。

如果我们创建了一个可以点击、轻触、拖动、滑动或滚动的控件，用户应该能够同时使用鼠标和键盘来操作它。

如果在自定义元素上使用role=button，则该元素必须能够获得焦点，并且用户必须能够使用enter（在 WIN 操作系统上）和space键来激活与该元素关联的操作。

第四条规则——不要在可聚焦元素上使用role="presentation"or 符号aria-hidden="true"

使用role="presentation"或aria-hidden聚焦于可聚焦元素可能会导致部分用户将注意力集中在该元素上，从而获取不准确的信息。在某些情况下，用户甚至可能无法发现此类元素。

在可聚焦元素上使用这两种方法中的任何一种都可能导致一些用户聚焦在“任何东西”上。

<button role=“presentation”>press me</button> 

<button aria-hidden=“true”>press me</button>

注意：aria-hidden对可见交互元素（例如）的父元素/祖先元素进行设置<button>，也会使辅助技术（例如屏幕阅读器）无法识别该元素。

<div aria-hidden="true">  
   <button>press me</button> 
</div> 

注意：我们可以aria-hidden对元素使用，只要该元素不可聚焦即可。

我们可以设置tabindex="-1"一个可聚焦元素，使其从 Tab 键顺序中移除，这样键盘就无法聚焦它，但如果需要，我们仍然可以使用 JavaScript 来聚焦它。

// tabindex="-1" removes the button from the tab order  
<button tabindex=“-1” aria-hidden=“true”>press me</button> 

注意：如果我们对元素或其祖先元素使用display: none` visibility: hiddentabindex` 或 `tabindex`，该元素将无法获得焦点，并且会从辅助功能树中移除。
也就是说，屏幕阅读器将无法识别它。在这种情况下，我们不需要aria-hidden为该元素添加 `tabindex` 或 `tabindex` 为负值。

CSS

.hidden-btn {display: none;} 

HTML

<button class=“hidden-btn“>press me</button> 

第五条规则——所有交互元素都必须具有易于理解的名称。

可访问名称是用户界面元素的名称。每个平台都有自己的辅助功能 API 来提供此属性。可访问名称的值可以来源于元素的可见或不可见属性。

Visible 属性——元素的可见文本。例如，按钮上的可见文本。

不可见属性- ARIA 属性，例如aria-label或aria-labelledby

让我们来看几个例子，以便更好地理解它。

这里，“按我”是可见文本<button>，因此可以用作辅助名称。

<button>press me</button>

当该<button>元素获得焦点时，屏幕阅读器可能会播报类似“按我，按钮”的内容，将元素的角色（按钮）与其名称（按我）连接起来。

连接顺序和角色描述取决于平台的辅助功能 API 和所使用的辅助技术（例如屏幕阅读器）。

<input>以下代码示例中的元素有一个可见的标签“ username ”，但没有可访问的名称。

username <input type="text"> 

或者

<span>username</span> <input type="text">

这里<input>有一个可见的标签，但它不能用作辅助功能名称。它不能与关联<input>。
在这种情况下，屏幕阅读器将无法朗读的辅助功能名称<input>。这将构成无障碍访问违规。

相比之下，它<input>既有可见的标签，又有易于理解的名称。

使用<for>属性

<label for="userNameId">username</label> 
<input type="text" id="userNameId"> 

或者

用……包裹<label>

<label> 
  username  
  <input type="text"> 
</label> 

在上面的示例中，我们使用一个<label>元素为我们的元素提供一个易于访问的名称<input>。

如果我们无法使用<label>或for归属怎么办？

在这种情况下，我们可以使用 ARIA 属性，
即aria-label或aria-labelledby。

使用aria-label

<input type="text" aria-label="Username"> 

使用aria-labelledby

<span id="fldUsrnm">username</span>  


<input type="text" aria-labelledby="fldUsrnm">

在这种情况下，我们将 ARIA 作为最后的选择，这完全没问题。

结论

以上就是ARIA的5条规则。

1. 不要使用ARIA（除非万不得已）。

2. 优先选择原生语义而非 ARIA 语义

3. 所有交互元素都必须能够通过键盘操作。

4. 不要对
   可聚焦元素使用 role="presentation" 或 aria-hidden="true"

5. 所有交互元素都必须具有易于理解的名称。

当然，这并非全部，我们只是略窥门径。尽管如此，我希望这能成为更好地了解ARIA的开端。

希望这篇文章对您有所帮助。