内容结构

无障碍设计最重要的一个方面是网页的底层结构。如果您使用结构元素构建网站或应用，而不是只依赖样式，就可以为使用辅助技术 (AT) 的用户（如屏幕阅读器）提供关键上下文。

结构元素充当屏幕上内容的轮廓，但也充当定位点，使内容中的导航更轻松。

当您使用语义 HTML 元素时，每个元素的固有含义都会传递给无障碍功能树并供 AT 使用，从而为内容赋予比非语义元素更多的含义。在某些情况下，您可能需要添加其他 ARIA 属性以建立关系或提升整体用户体验，但在大多数情况下，超过 100 个 HTML 元素中的某个元素本身应该可以很好地运行。

虽然本单元主要介绍对数字无障碍至关重要的最广泛使用的结构元素，但在在您的网站或应用中构建结构时，肯定还有其他元素和环境因素需要考虑。这些示例仅介绍了该主题，而非一概而论。

地标

AT 的用户依靠结构性元素为他们提供有关页面整体布局的信息。在将大片区域的内容分割开时，您可以使用 ARIA 地标角色或较新的 HTML 地标元素，为网页添加结构性上下文。

地标可确保内容位于可导航区域。建议为每个页面至少提供一个位置标记。

部分资源建议合并 ARIA 和 HTML 地标，以提供更好的 AT 覆盖率。虽然此类冗余不会导致用户遇到问题，但请使用屏幕阅读器测试模式，以确定。如果不确定，最好默认仅使用较新的 HTML 地标元素，因为浏览器支持功能非常强大。

我们将映射的 HTML 地标元素与其对应的 ARIA 地标角色进行比较。

HTML 地标元素 ARIA 地标角色
<header> 横幅广告
<aside> 补充
<footer> 内容信息
<nav> navigation
<main> 主函数
<form> 1 表单
<section> 1 区域
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 标题级别可为整个网页内容提供简洁的轮廓。

我们可以使用六个标题级别。1 级标题 <h1> 用于显示网页的最高和最重要的信息，最低和最不重要的信息会逐步移至第 6 级标题 <h6>。

标题级别的顺序很重要。理想情况下，不应跳过标题级别，例如，在开始某个部分时输入 <h1>，然后立即在后面输入 <h5>。您应改为按顺序进入 <h5>。标题级别顺序对 AT 用户来说尤为重要，因为这是他们浏览内容的主要方式之一。

为了帮助您遵循标题的正确语义结构和顺序，请考虑将 CSS 样式与标题级别分离。这可让您更灵活地设置标题样式，同时保持标题级别顺序。请务必不要单独使用样式来创建标题，因为 AT 不会将它们视为标题。

当我们伪造标题时，相应的结构将无法传达给 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 会大声读出每个列表项，并告知列表中有哪个编号（第 1 项（共 5 项）、第 2 项/5 项），依此类推。

将项目分组还有助于有认知和注意力障碍的视力正常的人以及有阅读障碍的人，因为列表内容的样式通常具有更多的视觉空白，并且内容很切合主题。

错误做法
<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 演示角色或 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>