ARIA: heading 角色

heading 角色将此元素定义为页面或部分的标题,并使用 aria-level 属性提供更多结构。

描述

heading 角色指示辅助技术将此元素视为标题。屏幕阅读器会朗读文本并指示其格式为标题。此外,级别告诉辅助技术此标题代表页面结构中的哪个部分。一级标题,用 aria-level="1" 表示,通常表示页面的主标题;二级标题,用 aria-level="2" 定义,表示第一个子部分;三级标题是该子部分的子部分,依此类推。

html
<div role="heading" aria-level="1">This is a main page heading</div>

这会将 <div> 中的文本定义为主标题,通过 aria-level 属性指示为一级。请改用 h1(到 h6)元素。

html
<h1>This is a main page heading</h1>

关联的 WAI-ARIA 角色、状态和属性

aria-level

aria-level 属性指定文档结构中的标题级别。此属性是必需的:作者必须指示正确的嵌套级别,以确保具有 heading role 的元素被组织成逻辑大纲。如果属性错误地未指定,则浏览器将使用 回退值 2

键盘交互

此角色不需要任何特殊的键盘导航。与任何标题一样,为其设置 ID 可确保它可以通过锚点链接进行引用,从而可以通过键盘进行访问。

所需的 JavaScript 功能

所需的事件处理程序

无。

更改属性值

通常不需要,除非动态插入内容。在这种情况下,新添加的标题需要 aria-level 属性,其值应与文档结构的其余部分一致。

注意:与其使用带有 heading 角色和 aria-level<div><span>,不如考虑使用原生的 h1h6 元素来指示文本是标题,以及它代表结构中的哪个部分。

示例

以下是典型的页面结构。

html
<div id="container">
  <div role="heading" aria-level="1">The main page heading</div>
  <p>This article is about showing a page structure.</p>
  <div role="heading" aria-level="2">Introduction</div>
  <p>An introductory text.</p>
  <div role="heading" aria-level="2">Chapter 1</div>
  <p>Text</p>
  <div role="heading" aria-level="3">Chapter 1.1</div>
  <p>More text in a sub section.</p>
</div>

但是,你应该这样做

html
<div id="container">
  <h1>The main page heading</h1>
  <p>This article is about showing a page structure.</p>
  <h2>Introduction</h2>
  <p>An introductory text.</p>
  <h2>Chapter 1</h2>
  <p>Text</p>
  <h3>Chapter 1.1</h3>
  <p>More text in a sub section.</p>
</div>

可访问性考虑

警告:使用 aria-labelaria-labelledby 将会隐藏你的标题内容,辅助技术将读取标签而不是标题。

如果你必须使用 heading 角色和 aria-level 属性,请不要超过级别 6,以便与 HTML 保持一致。虽然理论上你可以设置更高的级别,并且一些屏幕阅读器可能支持它,但结果在不同的浏览器和屏幕阅读器组合中可能不可预测。

最佳实践

使用此角色的最佳方法是完全不使用它,而是使用原生的标题标签 h1h6,如上面的示例所示。heading 角色和 aria-level 属性仅应用于你无法进行重大更改的旧代码,以恢复可访问性。

与其使用 ARIA heading 角色,不如使用语义 HTML 元素

HTML 元素 heading 角色
h1 <div role="heading" aria-level="1">
h2 <div role="heading" aria-level="2">
h3 <div role="heading" aria-level="3">
h4 <div role="heading" aria-level="4">
h5 <div role="heading" aria-level="5">
h6 <div role="heading" aria-level="6">

新增优势

无。

规范

规范
无障碍富互联网应用程序 (WAI-ARIA)
# heading
未知规范
# when_to_use_structural_roles

优先级顺序

heading 角色会覆盖其所使用的元素的本机语义含义。此外,aria-level 属性决定了暴露的标题级别。

另见