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
未知规范

另请参阅