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>