数字无障碍最重要的一个方面就是 页面结构。当您使用 结构元素 不只依赖于样式,因此可以为使用辅助工具的用户提供关键背景信息 技术 (AT),例如屏幕阅读器。
结构元素是屏幕上内容的轮廓, 还可用作定位点,以便用户更轻松地在内容中导航。
使用语义 HTML 元素时, 系统会将每个元素的固有含义传递给无障碍树,并 与非语义元素相比,这种文本为内容赋予了更多的含义。 在某些情况下,您可能需要添加其他 ARIA 属性来构建 或提升整体用户体验, 超过 100 个 HTML 元素 它们单独使用时应该能够取得相当不错的效果。
本单元着重介绍最常用的结构元素, 数字无障碍、 构建网站结构时要考虑的环境因素, 应用。这些示例并未涵盖所有主题,而是仅对相应主题起到介绍作用。
地标
AT 的用户依靠结构元素来提供有关 页面的整体布局。在划分大片区域时,您可以 您可以使用 ARIA 地标角色或较新的 HTML 地标元素来添加 网页的结构方式
地标可确保内容位于可导航的区域。建议您为每个页面至少提供一个位置标记。
部分资源建议结合使用 ARIA 和 HTML 位置标记 以提供更好的 AT 覆盖范围。虽然此类冗余不应该 给用户带来问题,请使用屏幕阅读器测试这些模式 如果不确定,最好默认仅使用新版 HTML 标记元素, 浏览器支持 稳健。
我们以如下方式比较 HTML 标记元素: 映射到 对应的 ARIA 地标角色。
现在,我们比较一下无障碍内容结构的示例。
<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>