ARIA：标题角色
heading 角色将此元素定义为页面或部分的标题，aria-level 属性提供更多结构。
描述
标题角色指示辅助技术此元素应像标题一样处理。屏幕阅读器会读取文本并表明它像标题一样格式化。此外，级别告诉辅助技术此标题表示页面结构的哪一部分。级别 1 标题（用 aria-level="1" 指示）通常表示页面的主标题，级别 2 标题（用 aria-level="2" 定义）表示第一个子部分，级别 3 是该子部分的子部分，依此类推。
html
<div role="heading" aria-level="1">This is a main page heading</div>
这将 <div> 中的文本定义为页面的主标题，通过 aria-level 属性指示为级别 1。建议改用 h1（到 h6）元素。
html
<h1>This is a main page heading</h1>
关联的 WAI-ARIA 角色、状态和属性
aria-level-
aria-level属性指定文档结构中的标题级别。如果不存在级别，则默认值为 2。
键盘交互
此角色不需要任何特殊的键盘导航。与任何标题一样，为其提供 ID 可确保可以从锚链接引用它，从而可以通过键盘访问它。
所需的 JavaScript 功能
示例
以下显示了典型的页面结构。
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-label 或 aria-labelledby 会将标题内容隐藏在辅助技术之外，读取标签而不是标题。
如果必须使用 heading 角色和 aria-level 属性，请不要超过级别 6，以便与 HTML 保持一致。虽然理论上您可以设置更高的级别，并且某些屏幕阅读器可能支持它，但与其他浏览器和屏幕阅读器组合的结果可能无法预测。
最佳实践
新增优势
无。
规范
| 规范 |
|---|
| 可访问的富互联网应用程序 (WAI-ARIA) # heading |
| 未知规范 # when_to_use_structural_roles |
优先级顺序
标题角色覆盖了正在使用的元素的本机语义含义。此外，aria-level 属性确定了公开的标题级别。