ARIA：主要角色

main 地標角色用於指示文件的主要內容。主要內容區域包含與文件的中心主題或應用程式的主要功能直接相關或擴充套件的內容。

html
<div id="main" role="main">
  <h1>Avocados</h1>
  <!-- main section content -->
</div>

這是討論牛油果的文件的主要部分。該文件的子部分可以討論牛油果的歷史、不同型別、生長地區等等。

描述

main 角色是一個導航 地標 角色，用於識別文件的主要內容。地標可供螢幕閱讀器等輔助技術使用，以快速識別和導航到文件的較大部分。

透過對頁面的部分進行分類和標記，可以以程式設計方式表示透過佈局在視覺上傳達的結構資訊。螢幕閱讀器使用地標角色為頁面上的重要部分提供鍵盤導航。對於透過地標角色進行導航的使用者，主要角色是“跳至主要內容”連結的替代方案。

每個文件中應該只有一個 main 地標角色。

<main> 元素的角色是 main。開發人員應該使用語義 HTML（在這種情況下為 <main>）而不是使用 ARIA。

關聯的 ARIA 角色、狀態和屬性

aria-owns

aria-owns 屬性在輔助技術層建立了 DOM 中不存在的關係。文件和應用程式可以在 DOM 中巢狀，這可能導致 DOM 後代中存在多個主要元素。如果出現這種情況，請包含 aria-owns 以標識主要元素與其文件或應用程式祖先之間的關係。

aria-label 或 aria-labelledby

如果存在可見標題，則使用 aria-labelledby 識別可訪問名稱。否則，包含 aria-label 有助於為輔助技術使用者提供方向，特別是在單頁面應用程式中，主要內容更改會發生而不會生成頁面載入事件。

示例

html
<body>
  <!-- primary navigation -->

  <div role="main">
    <h1>The First Indochina War</h1>
    <!-- article content -->
  </div>

  <!-- sidebar and footer -->
</body>

無障礙性問題

每個文件中只使用一個 main 角色

main 地標角色 每個文件中只應使用一次。

如果文件包含兩個 main 角色（例如，透過 JavaScript 觸發時更新頁面內容），則應使用諸如切換 hidden 屬性 等技術從輔助技術中刪除非活動 main 角色的存在。

html
<main>
  <h1>Active `main` element</h1>
  <!-- content -->
</main>

<main hidden>
  <h1>Hidden `main` element</h1>
  <!-- content -->
</main>

包含可訪問名稱也很有幫助，這有助於為輔助技術使用者提供方向，尤其是在單頁面應用程式中，主要內容更改會發生而不會生成頁面載入事件。這可以透過 aria-labelledby（如果內容中存在適當的名稱）或 aria-label（如果不存在）新增。

最佳實踐

優先使用 HTML

使用 <main> 元素將自動傳達某個部分具有 main 的角色。如果可能，優先使用它。

跳過導航

跳過導航（也稱為“skipnav”）是一種技術，允許輔助技術使用者快速跳過大量重複內容（主導航、資訊橫幅等）。這使使用者可以更快地訪問頁面的主要內容。

將 id 屬性 新增到宣告為 role="main" 的元素，允許它成為使用者跳過導航連結的目標。

html
<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <div id="main-content" role="main">
    <!-- main page content -->
  </div>
</body>

等同於

html
<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

規範

規範
可訪問的富網際網路應用 (WAI-ARIA)
# main
未知規範

另請參閱