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 屬性確定了公開的標題級別。