WAI-ARIA 角色

ARIA 角色共分为 6 类：

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

• toolbar (en-US)
• tooltip (en-US)
• feed (en-US)
• math (en-US)
• presentation (en-US) / none (en-US)
• note (en-US)

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

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

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

• associationlist (en-US)
• associationlistitemkey (en-US)
• associationlistitemvalue (en-US)
• blockquote (en-US)
• caption (en-US)
• code (en-US)
• deletion (en-US)
• emphasis (en-US)
• insertion (en-US)
• paragraph (en-US)
• strong (en-US)
• subscript (en-US)
• superscript (en-US)
• time (en-US)

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

• scrollbar (en-US)
• searchbox (en-US)
• separator (en-US)（如果可以聚焦）
• slider (en-US)
• spinbutton (en-US)
• switch (en-US)
• tab (en-US)
• tabpanel (en-US)
• treeitem (en-US)

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

复合小部件角色

• combobox (en-US)
• menu (en-US)
• menubar (en-US)
• tablist (en-US)
• tree (en-US)
• treegrid (en-US)

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

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

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

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

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

• alert (en-US)
• log (en-US)
• marquee (en-US)
• status (en-US)
• timer (en-US)

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

• alertdialog (en-US)
• dialog (en-US)

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

避免使用command (en-US)、composite (en-US)、input (en-US)、landmark (en-US)、range (en-US)、roletype (en-US)、section (en-US)、sectionhead (en-US)、select (en-US)、structure (en-US)、widget (en-US) 和 window (en-US)。

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

ARIA：button 角色

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

ARIA：list 角色

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

ARIA：listbox 角色

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

ARIA：listitem 角色

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

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