Skip to content

Latest commit

 

History

History
155 lines (113 loc) · 12 KB

index.md

File metadata and controls

155 lines (113 loc) · 12 KB
Raw
title slug l10n
WAI-ARIA 角色
Web/Accessibility/ARIA/Roles
sourceCommit
019ca5c9ce641bfa02825e1ba0444f35dfb646cc

{{AccessibilitySidebar}}

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。

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

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

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

2. 小部件角色

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

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

复合小部件角色

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

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

3. 地标角色

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

4. 实时区域角色

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

5. 窗口角色

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

6. 抽象角色

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

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

Note

不要在你的网站和应用中使用抽象角色。抽象角色是由浏览器使用的，这里列出来仅用于参考。

Warning

“抽象角色用于本体。作者不得在内容中使用抽象角色。”——WAI-ARIA 规范

MDN 中定义的角色

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

{{SubpagesWithSummaries}}

参见