ARIA: main 角色

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

html

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

這是關於牛油果的文件的主要部分。該文件的子部分可以討論它們的歷史、不同型別、種植地區等。

描述

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

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

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

<main> 元素具有 main 角色。開發人員應使用語義 HTML——在這種情況下是 <main>——而不是使用 ARIA。

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

aria-owns: aria-owns 屬性在可訪問性層級中建立 DOM 中不存在的關係。文件和應用程式可以在 DOM 中巢狀，這可能導致擁有多個作為 DOM 後代的 main 元素。如果是這種情況，請包含 aria-owns 來標識 main 元素與其文件或應用程式祖先的關係。
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

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