内容结构

数字无障碍最重要的一个方面就是 页面结构。当您使用 结构元素 不只依赖于样式，因此可以为使用辅助工具的用户提供关键背景信息 技术 (AT)，例如屏幕阅读器。

结构元素是屏幕上内容的轮廓， 还可用作定位点，以便用户更轻松地在内容中导航。

使用语义 HTML 元素时， 系统会将每个元素的固有含义传递给无障碍树，并 与非语义元素相比，这种文本为内容赋予了更多的含义。 在某些情况下，您可能需要添加其他 ARIA 属性来构建 或提升整体用户体验， 超过 100 个 HTML 元素 它们单独使用时应该能够取得相当不错的效果。

本单元着重介绍最常用的结构元素， 数字无障碍、 构建网站结构时要考虑的环境因素， 应用。这些示例并未涵盖所有主题，而是仅对相应主题起到介绍作用。

地标

AT 的用户依靠结构元素来提供有关 页面的整体布局。在划分大片区域时，您可以 您可以使用 ARIA 地标角色或较新的 HTML 地标元素来添加 网页的结构方式

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

部分资源建议结合使用 ARIA 和 HTML 位置标记 以提供更好的 AT 覆盖范围。虽然此类冗余不应该 给用户带来问题，请使用屏幕阅读器测试这些模式 如果不确定，最好默认仅使用新版 HTML 标记元素， 浏览器支持 稳健。

我们以如下方式比较 HTML 标记元素： 映射到 对应的 ARIA 地标角色。

。 <ph type="x-smartling-placeholder">
HTML 地标元素 ARIA 地标角色
<header> 横幅广告
<aside> 补充
<footer> contentinfo
<nav> navigation
<main> 主
<form> 1 表单
<section> 1 区域
</ph> 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> 用于显示网页上最重要的信息，逐渐过渡到 6 级标题 <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 会大声读出每个列表项，并告诉 它在列表中位于哪个编号（第 1 项，第 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 的 AT 用户隐藏布局表格 演示角色 或 aria-hidden（隐藏状态）。

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