Question

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

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

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

Answer 1

ARIA的第一条规则

如果您可以使用本机HTML元素或属性   您需要已经内置的语义和行为，而不是   重新定位元素并添加ARIA角色，州或财产   让它可以访问，然后这样做。

来源： Notes on Using ARIA in HTML

Answer 2

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

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

通过＆＃34;语义＆＃34; - 这意味着＆＃34;含义＆＃34; -I＆＃39; m指的是浏览器根据自己的定义自动解释元素的能力。 HTML spec（或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">元素是一个按钮，应该被视为一个按钮。这意味着浏览器不会告诉辅助导航，例如屏幕阅读器，该元素应该被标识为按钮。这也意味着浏览器不知道它应该是仅限键盘用户的Tab键顺序，并且它需要是可聚焦的，并且使用 Enter 触发click事件或 Space 关键事件。

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

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

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

要告诉浏览器在标签顺序中包含该元素，您需要为其赋予[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>

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

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

The w3c WAI ARIA spec详细说明了如何使用每个角色以及哪些属性适合与这些角色一起使用。 Stack Overflow上还有很多关于如何标记特定UI模式以便访问的问题，但要注意答案的质量通常是不稳定的，因为很少有可访问性专家真正测试过他们的＃34; access＆＃34 ;标记。

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

Answer 3

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

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

3 个答案: