描述
heading 角色指示辅助技术将此元素视为标题。屏幕阅读器会朗读文本并指示其格式为标题。此外,级别告诉辅助技术此标题代表页面结构中的哪个部分。一级标题,用 aria-level="1"
表示,通常表示页面的主标题;二级标题,用 aria-level="2"
定义,表示第一个子部分;三级标题是该子部分的子部分,依此类推。
<div role="heading" aria-level="1">This is a main page heading</div>
这会将 <div>
中的文本定义为主标题,通过 aria-level
属性指示为一级。请改用 h1(到 h6)元素。
<h1>This is a main page heading</h1>
关联的 WAI-ARIA 角色、状态和属性
aria-level
-
aria-level
属性指定文档结构中的标题级别。此属性是必需的:作者必须指示正确的嵌套级别,以确保具有heading
role
的元素被组织成逻辑大纲。如果属性错误地未指定,则浏览器将使用 回退值 2。
键盘交互
此角色不需要任何特殊的键盘导航。与任何标题一样,为其设置 ID 可确保它可以通过锚点链接进行引用,从而可以通过键盘进行访问。
所需的 JavaScript 功能
示例
以下是典型的页面结构。
<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>
但是,你应该这样做
<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-label
或 aria-labelledby
将会隐藏你的标题内容,辅助技术将读取标签而不是标题。
如果你必须使用 heading
角色和 aria-level
属性,请不要超过级别 6,以便与 HTML 保持一致。虽然理论上你可以设置更高的级别,并且一些屏幕阅读器可能支持它,但结果在不同的浏览器和屏幕阅读器组合中可能不可预测。
最佳实践
使用此角色的最佳方法是完全不使用它,而是使用原生的标题标签 h1 到 h6,如上面的示例所示。heading
角色和 aria-level
属性仅应用于你无法进行重大更改的旧代码,以恢复可访问性。
与其使用 ARIA heading
角色,不如使用语义 HTML 元素
新增优势
无。
规范
规范 |
---|
无障碍富互联网应用程序 (WAI-ARIA) # heading |
未知规范 # when_to_use_structural_roles |
优先级顺序
heading 角色会覆盖其所使用的元素的本机语义含义。此外,aria-level
属性决定了暴露的标题级别。