WAI-ARIA 角色

ARIA 角色类型

ARIA 角色共分为 6 类：

1. 文档结构角色

文档结构角色用于给内容的段落添加一个结构的描述。这些角色大多数都不应该再使用，因为浏览器现在支持带有相同的含义的语义化 HTML 元素。没有相应 HTML 等价的角色，例如 presentation、toolbar 和 tooltip 角色，为辅助技术（例如屏幕阅读器）提供了文档结构信息，而这些信息没有可用的原生 HTML。

• toolbar
• tooltip
• feed
• math
• presentation / none
• note

对于大多数结构角色，都有可用、受支持且等价的语义化 HTML 元素。请避免使用：

• application
• article（请使用 <article>）
• cell（请使用 <td>）
• columnheader（请使用 <th scope="col">）
• definition（请使用 <dfn>）
• directory
• document
• figure（请使用 <figure>）
• group
• heading（请使用 h1 到 h6）
• img（请使用 <img> 或 <picture>）
• list（请使用 <ul> 或 <ol>）
• listitem（请使用 <li>）
• meter（请使用 <meter>）
• row（请使用 <tr> 和 <table>）
• rowgroup（请使用 <thead>、<tfoot> 和 <tbody>）
• rowheader（请使用 <th scope="row">）
• separator（如果不可以聚焦，请使用 <hr>）
• table（请使用 <table>）
• term（请使用 <dfn>）

这些内容是为保持完整而包含的，但至今很少使用或有用：

• associationlist
• associationlistitemkey
• associationlistitemvalue
• blockquote
• caption
• code
• deletion
• emphasis
• insertion
• paragraph
• strong
• subscript
• superscript
• time

2. 小部件角色

各种小部件角色用于定义常见的交互模式。类似于文档结构角色，有些这些角色与同样受支持的原生 HTML 的语义是重复的，因此不应该使用。这两个列表的区别在于，通常来说，小部件角色需要 JavaScript 交互，而文档结构角色不需要。

• scrollbar
• searchbox
• separator（如果可以聚焦）
• slider
• spinbutton
• switch
• tab
• tabpanel
• treeitem

避免使用 button、checkbox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、progressbar、radio和 textbox，这些仅为完整性而包含。大多数情况下，带有无障碍的交互性的语义等价也是可用且受支持的。更多信息，请参见其各个角色的文档。

复合小部件角色

• combobox
• menu
• menubar
• tablist
• tree
• treegrid

避免使用 grid、listbox 和 radiogroup，这些仅为完整性而包含。更多信息，请参见其各个角色的文档。

注意还有个 widget 角色（role="widget"），这是个抽象的角色，不在小部件角色类别中。

3. 地标角色

地标（landmark）角色提供了一种识别网页的组织和结构的方法。对页面的各个部分进行分类并添加标签，可以用编程方式呈现出通过布局直观传达的结构信息。屏幕阅读器使用地标角色为页面的重要部分提供键盘导航。谨慎使用这些。太多的地标角色会在屏幕阅读器中产生“噪音”，导致难以理解页面的整体布局。

• banner （文档 <header>）
• complementary（<aside>）
• contentinfo（<footer>）
• form（<form>）
• main（<main>）
• navigation（<nav>）
• region（<section>）
• search

4. 实时区域角色

实时区域（Live Region）角色用于定义带有动态更改的内容的元素。动态变化在视觉上明显时，具有视力的用户可以看到。这些角色可帮助低视力和盲人用户了解内容是否更新。辅助技术，例如屏幕阅读器，可以告知动态内容变更：

• alert
• log
• marquee
• status
• timer

5. 窗口角色

窗口角色为同一文档内的主文档窗口定义了子窗口，例如弹出模态框：

• alertdialog
• dialog

6. 抽象角色

抽象角色仅由浏览器使用，以帮助组织和简化文档。编写 HTML 标记的开发者不应使用这些抽象角色。这样做不会向辅助技术或用户传达任何有意义的信息。

避免使用command、composite、input、landmark、range、roletype、section、sectionhead、select、structure、widget 和 window。

MDN 中定义的角色

以下是包含 MDN 中讨论的 WAI-ARIA 角色的参考页面。

ARIA：button 角色

button 角色用于可单击的元素，在用户激活时触发响应。添加 role="button" 会告诉屏幕阅读器这个元素是个按钮，但是不提供按钮的功能。你应该使用的 button 或者 type="button" 的 input。

ARIA：command 角色

command 角色定义了一个执行操作但不接收输入数据的微件。

ARIA：composite 角色

composite 抽象角色表示一个可能包含可导航子元素或拥有子元素的微件。

ARIA：directory 角色

directory 角色用于表示一组成员的引用列表，例如静态目录。

ARIA：group 角色

group 角色用于标识无需被辅助技术所包含的页面摘要或目录中的 UI 对象。

ARIA：input 角色

input 抽象角色是一种允许用户输入的通用的小部件类型。

ARIA：list 角色

ARIA list 角色可用于标识项目列表。它通常与 listitem 角色结合使用，该角色用于标识包含在列表中的列表项。

ARIA：listbox 角色

listbox 角色用于列表，用户可以从中选择一个或多个静态选项，并且与 HTML select 元素不同，它可能包含图像。

ARIA：listitem 角色

ARIA listitem 角色可用于标识项目列表中的项目。它通常与 list 角色（用于标识列表容器）结合使用。

ARIA：marquee 角色

marquee 是一种实时区域类型，包含频繁变化的非必要信息。

ARIA：none 角色

none 角色是 presentation 角色的同义词；它们都会将元素的隐式 ARIA 语义从无障碍树中移除。

ARIA：range 角色

range 抽象角色是一种表示值范围的通用结构角色。

ARIA：roletype 角色

roletype 角色是一个抽象角色，所有其他 ARIA 角色都继承自该角色。

ARIA：sectionhead 角色

sectionhead 角色是一个抽象角色，是其相关部分主题标签或摘要的超类角色。

ARIA：select 角色

select 角色是一个抽象角色，同时也是允许用户从一组选项中进行选择的表单小部件角色的父级角色。

ARIA：window 角色

window 角色定义了浏览器或应用程序窗口。

参见

• 使用 ARIA：角色、状态和属性
• ARIA 状态和属性