ARIA: heading 角色

描述

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 功能

所需的事件處理程式

無。

更改屬性值

通常不需要，除非動態插入內容。在這種情況下，新新增的標題需要 aria-level 屬性，其值應與文件結構的其餘部分一致。

示例

以下是典型的頁面結構。

<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>

可訪問性考慮

如果你必須使用 heading 角色和 aria-level 屬性，請不要超過級別 6，以便與 HTML 保持一致。雖然理論上你可以設定更高的級別，並且一些螢幕閱讀器可能支援它，但結果在不同的瀏覽器和螢幕閱讀器組合中可能不可預測。

最佳實踐

使用此角色的最佳方法是完全不使用它，而是使用原生的標題標籤 h1 到 h6，如上面的示例所示。heading 角色和 aria-level 屬性僅應用於你無法進行重大更改的舊程式碼，以恢復可訪問性。

與其使用 ARIA heading 角色，不如使用語義 HTML 元素

新增優勢

無。

規範

優先順序順序

heading 角色會覆蓋其所使用的元素的本機語義含義。此外，aria-level 屬性決定了暴露的標題級別。

另見

• <h1> 到 <h6>：HTML 部分標題元素