内容结构

数字无障碍功能最重要的方面之一是页面的底层结构。当您使用结构元素构建网站或应用，而不是仅仅依赖样式时，您可以为使用屏幕阅读器等辅助技术 (AT) 的用户提供关键的上下文。

结构元素充当屏幕上内容的轮廓，但它们也充当锚点，以便更轻松地在内容中导航。

当您使用语义 HTML 元素时，每个元素的固有含义都会传递到无障碍功能树，并由 AT 使用，从而为内容赋予比非语义元素更多的含义。在某些情况下，您可能需要添加额外的 ARIA 属性来构建关系或增强整体用户体验，但在大多数情况下，可用的 100 多个 HTML 元素之一应该可以很好地独立工作。

虽然本模块侧重于对数字无障碍功能至关重要的最广泛使用的结构元素，但在将结构构建到您的网站或应用中时，肯定还有其他元素和环境因素需要考虑。这些示例是对该主题的介绍，而不是包罗万象。

地标

AT 用户依赖于结构元素来为他们提供有关页面整体布局的信息。当划分大型内容区域时，您可以使用 ARIA 地标角色或较新的 HTML 地标元素来为您的页面添加结构上下文。

地标确保内容位于可导航区域中。建议您在每个页面上至少提供一个地标。

一些资源建议将 ARIA 和 HTML 地标结合使用，以提供更好的 AT 覆盖率。虽然这种类型的冗余不应给您的用户带来问题，但请使用屏幕阅读器测试这些模式以确保万无一失。如有疑问，最好默认仅使用较新的 HTML 地标元素，因为 浏览器支持非常强大。

让我们比较一下 映射到其对应 ARIA 地标角色的 HTML 地标元素。

HTML 地标元素 ARIA 地标角色
<header> banner
<aside> complementary
<footer> contentinfo
<nav> navigation
<main> main
<form> 1 form
<section> 1 region
1 需要包含 name 属性才能实现无障碍功能。section 必须是 可访问地命名，其隐式 ARIA 角色 region 才能对辅助技术可见。

现在，比较可访问内容结构的示例。

不要这样做
<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>
这样做
<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

标题

如果正确实现，HTML 标题级别会形成页面整体内容的简洁轮廓。

我们可以使用六个标题级别。一级标题 <h1> 用于页面最高和最重要的信息，逐渐移动到六级标题 <h6> 用于最低和最不重要的信息。

标题级别的顺序很重要。理想情况下，您不会跳过标题级别，例如，以 <h1> 开始一个部分，然后立即使用 <h5>。相反，您应该按顺序前进到 <h5>。标题级别顺序对于 AT 用户尤其重要，因为这是他们浏览内容的主要方式之一。

为了帮助您遵守标题的正确语义结构和顺序，请考虑将 CSS 样式与标题级别解耦。这使您可以在保持标题级别顺序的同时，更灵活地设置标题样式。至关重要的是，您不要仅使用样式来创建标题，因为辅助技术不会将这些视为标题。

当我们伪造标题时，适当的结构不会传达给 AT 用户。

标题对患有认知障碍和注意力缺陷障碍的人也有帮助。重要的是使标题内容有意义，以帮助他们理解页面上最重要的内容。

不要这样做
<div>
    <h3>Stamps</h3>
    <p>Stamp collecting, also known as philately, is the study of
  postage stamps, stamped envelopes, postmarks, postcards, and
  other materials relating to postal delivery.</p>
</div>

<div>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>
这样做
<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>What is stamp collecting?</h2>
        <p>Stamp collecting, also known as philately, is the study of
    postage stamps, stamped envelopes, postmarks, postcards, and
    other materials relating to postal delivery.</p>
    </section>

    <section aria-label="Start a stamp collection">
        <h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

列表

HTML 列表是一种以语义方式对彼此相似的项目进行分组的方式，赋予它们固有的含义，就像您的杂货店清单或您一直忽略的永无止境的待办事项清单一样。

HTML 列表有三种类型

列表项 <li> 元素用于表示有序列表或无序列表中的项目，而描述术语 <dt> 和定义 <dd> 元素可以在描述列表中找到。

如果正确编程，这些元素可以告知非视觉 AT 用户列表的可见结构。当 AT 遇到语义列表时，它可以告诉用户列表名称以及其中包含多少项。当用户在列表中导航时，AT 将大声朗读每个列表项，并告知它在列表中的编号 - 五项中的第一项，五项中的第二项，依此类推。

将项目分组到列表中也有助于有认知障碍和注意力障碍以及阅读障碍的视觉正常人士，因为列表内容通常被设计为具有更多的视觉空白，并且内容切中要点。

不要这样做
<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>
这样做
<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

表格

在 HTML 中，表格通常用于组织数据或页面布局。

根据表格的用途，您将使用不同的语义结构元素。表格的结构可能非常复杂，但是当您坚持基本的语义规则时，它们在很大程度上是可访问的，而无需太多干预。

布局

在互联网的早期，布局表是用于构建视觉结构的主要 HTML 元素。今天，我们混合使用语义和非语义元素（例如 <div> 和地标）来创建布局。

虽然创建布局表的时代大部分已经过去，但在某些时候仍会使用布局表，例如在视觉效果丰富的电子邮件、新闻邮件和广告中。在这些情况下，仅用于布局的表格不得使用传达关系和添加上下文的结构元素，例如 <th> 或 <caption>。

布局表还必须使用 ARIA presentation 角色或 aria-hidden 状态对 AT 用户隐藏。

不要这样做
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>
这样做
<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

数据

与应向 AT 用户隐藏的布局表不同，数据表及其所有元素都必须公开。数据表的结构对于向用户传达简单和复杂的信息至关重要。

当表格结构正确时，列标题和行以及表格内的数据之间会形成关系。当结构不正确时，用户需要自己解读表格中信息的含义和上下文。

根据表格的复杂性，通过代码形成关系的方式各不相同。使表格可访问的第一步是使用 <th> 标记标题单元格，并使用 <td> 元素标记数据单元格。

对于更复杂的表格，您可能需要使用其他 HTML 表格元素，例如 <rowgroup>、<colgroup>、<caption> 和 scope，以传达含义和关系。

不要这样做
<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>
这样做
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>