什么时候必须使用 ARIA 属性和地标？

Question

当我必须添加 ARIA 属性和地标时，是否有简单的规则？

例如，输入类型复选框或收音机是否需要 aria-checked？还是我需要在 <main> 元素中添加一个 role="main"？我是否必须将 role="navigation" 添加到 <nav> 元素？

是否有一个列表，我可以在其中查看我必须添加哪些 ARIA 地标和属性？

Answer 1

First rule of ARIA

If you can use a native HTML element or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

来源： Notes on Using ARIA in HTML

关于使用的文章 HTML5 'native' landmark elements
在 HTML 腰带上和 ARIA 大括号
（使用规则）ARIA in HTML specification

Answer 2

所有原生 HTML 元素都内置了辅助功能，因此不需要使用 aria 进一步调整它们。事实上，您只需使用不带 aria 的原生 HTML 5 个元素即可创建完全可访问的 HTML 文档。但是当涉及到您自己的自定义 Java 脚本组件时，您需要仔细设计用户交互并使用适当的 ARIA 角色、状态和属性。

Answer 3

Is there a simple rule when I have to add them?

是的，任何时候元素的隐式语义与您的用法不匹配时，您都应该添加适当的 [role] 属性以使浏览器知道非标准用法。

"semantics"——这个词的意思是 "meaning"——我指的是浏览器根据 HTML spec (or the other HTML spec 中的定义自动解释元素的能力。

通过示例更容易理解。

假设您有一个带有按钮的设计。标记此 UI 的典型方法是使用 <button> 元素和点击处理程序（jQuery 用于简洁）：

_HTML:

<button type="button" class="start">Start</button>

_JS:

$('.start').click(start);

但是，有时由于特殊情况，会出现 <button> 不合适或无效的情况，例如当您必须在按钮中放置 <div> 时。在这些情况下，通常会看到使用 <div>：

_HTML*:

<div class="start">
    <div>...stuff...</div>
</div>

_JS*:

$('.start').click(start);

*这是一个天真的例子，不要这样做

这种方法的问题在于浏览器不知道 <div class="start"> 元素是一个按钮，因此应该将其视为一个按钮。这意味着浏览器不会告诉辅助导航（例如屏幕 reader 该元素应被标识为按钮。这也意味着浏览器不知道它应该在纯键盘用户的 Tab 键顺序中，并且它需要可聚焦，并通过 Enter[=101= 触发 click 事件] 或 Space 按键事件。

一旦您选择不使用本机语义元素，您就必须做额外的工作来支持本机行为。

要告诉浏览器将该元素识别为按钮，您可以使用 [role="button"]:

<div role="button" class="start">

要告诉浏览器将元素包含在 Tab 键顺序中，您需要给它一个 [tabindex] 属性：

<div role="button" tabindex="0" class="start">

要告诉浏览器在 Enter 或 Space 时触发点击事件，您需要处理这些行为通过 JavaScript:

$('.start').keydown(function (e) {
    switch (e.which) {
    case 13: //ENTER
    case 32: //SPACE
        $(this).click();
        break;
    }
});

这意味着将 <div> 变成适当的 <button> 例如：

_HTML:

<div role="button" tabindex="0" class="start">
    <div>...stuff...</div>
</div>

_JS:

$('.start').keydown(function (e) {
    switch (e.which) {
    case 13: //ENTER
    case 32: //SPACE
        $(this).click();
        break;
    }
}).click(start);

忘记做所有这些事情很容易，使用 <button type="button"> 并免费使用浏览器提供的内容要简单得多。

但有时，您正在创建的界面没有可用的本机元素。

The WAI Aria spec has a nice list of all the roles that are available.

其中许多角色都没有对应的本地角色。一个简单的示例是选项卡式界面。历史上的选项卡式界面已按照以下行标记：

<div class="tabs">
    <a href="#panel-1" class="tab">Foo</a>
    <a href="#panel-2" class="tab">Bar</a>
    <a href="#panel-3" class="tab">Baz</a>
</div>
<div class="panels">
    <div class="panel" id="panel-1">
        Lorem ipsum tab panel 1
    </div>
    <div class="panel" id="panel-2">
        Lorem ipsum tab panel 2
    </div>
    <div class="panel" id="panel-3">
        Lorem ipsum tab panel 3
    </div>
</div>

但对于盲人用户来说，这将被视为链接列表，然后是少量内容。为了解决这个问题，以便 <a> 元素被识别为选项卡而不是链接，使用了 [role] 属性。选项卡界面的其他部分还有一些额外的作用，还有一些 [aria-*] 属性可以帮助浏览器识别 UI:

的当前状态

<div role="tablist" class="tabs">
    <a role="tab" aria-selected="true" aria-controls="panel-1" href="#panel-1" class="tab">Foo</a>
    <a role="tab" aria-selected="false" aria-controls="panel-2" href="#panel-2" class="tab">Bar</a>
    <a role="tab" aria-selected="false" aria-controls="panel-3" href="#panel-3" class="tab">Baz</a>
</div>
<div class="panels">
    <div role="tabpanel" aria-expanded="true" class="panel" id="panel-1">
        Lorem ipsum tab panel 1
    </div>
    <div role="tabpanel" aria-expanded="false" class="panel" id="panel-2">
        Lorem ipsum tab panel 2
    </div>
    <div role="tabpanel" aria-expanded="false" class="panel" id="panel-3">
        Lorem ipsum tab panel 3
    </div>
</div>

添加所有这些附加信息可能看起来很乏味，但对于确保浏览器能够正确识别呈现给用户的内容并为需要它的用户提供适当的帮助至关重要。

Is there a list where I can look which ARIA landmarks and attributes I have to add?

The w3c WAI ARIA spec 详细说明了应如何使用每个角色以及哪些属性适合与这些角色一起使用。 Stack Overflow 上也有很多关于如何标记特定 UI 模式以供访问的问题，但请注意，答案的质量通常参差不齐，因为很少有可访问性专家真正测试过他们的 "accessible"标记。

如有疑问，请咨询专家，并执行用户测试以验证所使用的解决方案是否符合您的成功标准。

什么时候必须使用 ARIA 属性和地标？

When do I have to use ARIA attributes and landmarks?

html

wai-aria