WAI-ARIA 角色
ARIA 角色为内容提供了语义,允许屏幕阅读器和其他工具与对象类型的用户预期一致的方式进行呈现并支持交互。ARIA 角色可以用于描述不在 HTML 中原生存在的元素,或者存在但没有完整的浏览器支持的元素。
默认情况下,很多语义的 HTML 元素都有角色,例如,<input type="radio">
有“radio”角色。HTML 的非语义的元素没有角色,例如没有添加语义的 <div>
和 <span>
会返回 null
。role
属性可以添加语义。
将 ARIA 角色添加到 HTML 元素的方法是使用 role="角色类型"
,其中角色类型是角色在 ARIA 规范中的名称。有些角色需要包含相关的状态或属性;其他这些仅在与其他角色关联时有用。
例如,<ul role="tabpanel">
会被屏幕阅读器读作“标签面板(tab panel)”。但是,如果标签页面没有嵌套的标签,带有标签页面角色的元素实际上并不是个标签面板,从而对无障碍造成负面影响。
各角色的页面中都包含了相关的 ARIA 状态和属性,而每个属性都有一个专门的页面。
ARIA 角色类型
ARIA 角色共分为 6 类:
1. 文档结构角色
文档结构角色用于给内容的段落添加一个结构的描述。这些角色大多数都不应该再使用,因为浏览器现在支持带有相同的含义的语义化 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>
)
这些内容是为保持完整而包含的,但至今很少使用或有用:
2. 小部件角色
各种小部件角色用于定义常见的交互模式。类似于文档结构角色,有些这些角色与同样受支持的原生 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),这些仅为完整性而包含。大多数情况下,带有无障碍的交互性的语义等价也是可用且受支持的。更多信息,请参见其各个角色的文档。
复合小部件角色
避免使用 grid (en-US)、listbox 和 radiogroup (en-US),这些仅为完整性而包含。更多信息,请参见其各个角色的文档。
注意还有个 widget 角色(role="widget"
),这是个抽象的角色,不在小部件角色类别中。
3. 地标角色
地标(landmark)角色提供了一种识别网页的组织和结构的方法。对页面的各个部分进行分类并添加标签,可以用编程方式呈现出通过布局直观传达的结构信息。屏幕阅读器使用地标角色为页面的重要部分提供键盘导航。谨慎使用这些。太多的地标角色会在屏幕阅读器中产生“噪音”,导致难以理解页面的整体布局。
4. 实时区域角色
实时区域(Live Region)角色用于定义带有动态更改的内容的元素。动态变化在视觉上明显时,具有视力的的用户可以看到。这些角色可帮助低视力和盲人用户了解内容是否更新。辅助技术,例如屏幕阅读器,可以告知动态内容变更:
5. 窗口角色
窗口角色为同一文档内的主文档窗口定义了子窗口,例如弹出模态框:
6. 抽象角色
抽象角色仅由浏览器使用,以帮助组织和简化文档。编写 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)。
备注: 不要在你的网站和应用中使用抽象角色。抽象角色是由浏览器使用的,这里列出来仅用于参考。
警告:“抽象角色用于本体。作者不得在内容中使用抽象角色。”——WAI-ARIA 规范
MDN 中定义的角色
以下是包含 MDN 中讨论的 WAI-ARIA 角色的参考页面。
- ARIA:button 角色
button
角色用于可单击的元素,在用户激活时触发响应。添加role="button"
会告诉屏幕阅读器这个元素是个按钮,但是不提供按钮的功能。你应该使用的button
或者type="button"
的input
。- ARIA:list 角色
ARIA
list
角色可用于标识项目列表。它通常与listitem
角色结合使用,该角色用于标识包含在列表中的列表项。- ARIA:listbox 角色
listbox
角色用于列表,用户可以从中选择一个或多个静态选项,并且与 HTMLselect
元素不同,它可能包含图像。- ARIA:listitem 角色
ARIA
listitem
角色可用于标识项目列表中的项目。它通常与list
角色(用于标识列表容器)结合使用。