内容结构

数字无障碍功能最重要的方面之一是网页的底层结构。如果您使用结构元素（而非仅依靠样式）构建网站或应用，则可以为使用辅助技术（例如屏幕阅读器）的用户提供关键情境。

结构元素可用作屏幕上内容的大纲，但它们还可用作锚点，以便用户更轻松地浏览内容。

使用语义 HTML 元素时，每个元素的内在含义都会传递给无障碍树并供 AT 使用，这比使用非语义元素为内容赋予更多含义。在某些情况下，您可能需要添加其他 ARIA 属性来建立关系或提升整体用户体验，但在大多数情况下，可用的 100 多种 HTML 元素中的某一种应该就能发挥良好作用。

虽然本单元重点介绍了对数字无障碍至关重要的最常用的结构元素，但在为网站或应用构建结构时，肯定还需要考虑其他元素和环境因素。这些示例仅是对该主题的简要介绍，并非详尽无遗。

地标

AT 用户依赖于结构元素来获取有关网页整体布局的信息。在对大片内容区域进行分区时，您可以使用 ARIA 地标角色或较新的 HTML 地标元素为页面添加结构化上下文。

地标可确保内容位于可导航区域。建议您为每个网页至少提供一个地图注点。

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

我们来比较一下映射的 HTML 地图注点元素与其对应的 ARIA 地图注点角色。

HTML 地标元素 ARIA 地标角色
<header> 横幅广告
<aside> 互补
<footer> contentinfo
<nav> navigation
<main> 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 个列表项、第 2 个列表项，以此类推）。

将项分组到列表中还有助于有认知和注意力障碍的视力正常人士以及阅读障碍人士，因为列表内容通常采用更大的视觉空白，且内容简洁明了。

错误做法
<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>