WAI-ARIA 角色

ARIA 角色共分为 6 类：

文档结构角色用于给内容的段落添加一个结构的描述。这些角色大多数都不应该再使用，因为浏览器现在支持带有相同的含义的语义化 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

各种小部件角色用于定义常见的交互模式。类似于文档结构角色，有些这些角色与同样受支持的原生 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"），这是个抽象的角色，不在小部件角色类别中。

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

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

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

• alert
• log
• marquee
• status
• timer

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

• alertdialog
• dialog

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

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

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

ARIA：button 角色

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

ARIA：group 角色

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

ARIA：list 角色

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

ARIA：listbox 角色

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

ARIA：listitem 角色

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

ARIA：window 角色

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

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