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

当我必须添加ARIA属性和地标时，有一个简单的规则吗

例如，我是否需要选中输入类型复选框或收音机的

aria

？或者我需要向

元素添加

role=“main”

？我是否必须向

元素添加

role=“navigation”

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

咏叹调的第一条规则

如果可以将本机HTML元素或属性与 您需要的语义和行为已经内置，而不是 重新确定元素的用途，并将ARIA角色、状态或属性添加到 使其可访问，然后执行此操作

来源：

• 关于使用的条款
• （使用规则）

---

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

当我必须添加它们时，是否有一个简单的规则

是的，当元素的隐式语义与您的用法不匹配时，您应该添加适当的

[role]

属性，以使浏览器了解非标准用法

通过“语义”——意思是“意义”——我指的是浏览器根据元素在（或）中的定义自动解释元素的能力

---

用一个例子更容易看出这一点

假设您有一个带有按钮的设计。标记此UI的典型方法是使用

元素和单击处理程序（为了简洁起见使用jQuery）：

HTML: 但是，有时由于特殊情况，

不合适或无效，例如您必须在按钮内放置一个

。在这些情况下，通常会使用

：

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

这种方法的问题在于浏览器不知道

元素是按钮，应该将其视为按钮。这意味着浏览器不会告诉辅助导航（如屏幕阅读器）该元素应标识为按钮。这还意味着浏览器不知道它应该是仅键盘用户的选项卡顺序，并且它需要是可聚焦的，并使用Enter键或空格键事件触发

单击

事件

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

要告诉浏览器将元素标识为按钮，可以使用

[role=“button”]

：

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

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

这意味着将一个

转换成一个合适的

示例如下：

HTML: 很容易忘记做所有这些事情，只需使用

并免费获取浏览器提供的内容就简单多了

但有时，您正在创建的接口没有可用的本机元素

这些角色中的许多都没有本地对等角色。一个简单的例子是选项卡式界面。历史上，选项卡式界面的标记如下：

<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>

添加所有这些附加信息似乎都很乏味，但确保浏览器能够正确识别呈现给用户的内容并为需要的用户提供适当的帮助是至关重要的

---

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

详细说明了每个角色应该如何使用，以及哪些属性适合与这些角色一起使用。关于堆栈溢出，关于如何标记特定的UI模式以使其可访问，也有许多问题，但请注意，答案的质量往往参差不齐，因为很少有可访问性专家真正测试过他们的“可访问”标记

---

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

注意：HTML可访问性API映射1.0-中定义了HTML功能的可访问性语义的公开方式和时间，以及中定义了可在HTML元素上使用的ARIA的时间和内容，HTML规范遵从这些规范。

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

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

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

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

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

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

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

<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>

<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>