使用有意义的结构
学习目标
完成本单元后,您将能够:
- 总结无障碍内容的重要性。
- 描述一些让内容更加无障碍的结构性组件。
为什么在编写时考虑到无障碍性很重要?
大约 20% 的人有某种类型的视力损伤;失聪或有部分听力损失;或有身体、言语、认知或神经障碍。当您编写产品文档或在线培训材料等内容时,您所提供的意义和价值必须对所有用户都可用,而无论他们的个人能力如何。
为确保为所有用户提供同等的含义,请像对待任何一组设计约束一样接受无障碍内容编写指南。对于打造令人惊艳的内容而言,这既是挑战,也是动力。
结构的重要性
格式正确的内容为所有用户充分利用您的内容铺平了道路。适当的格式包括组织信息的结构元素,这有助于用户快速了解页面上的信息范围并便于键盘导航。让我们来探讨一下以下结构元素如何增加无障碍性。
- 标题
- 列表
- 表格
- 链接标签
以下信息提供了一般性建议。您的风格指南在某些方面可能有所不同。
标题
有符合逻辑的标题结构时,没有视力障碍的用户可以快速浏览内容以查找题目或标题。有视力障碍的用户可以使用屏幕阅读器列出页面上的所有标题,以全面了解所包含的内容。
标题还提供了内容大纲,帮助用户理解页面的层次结构。这对智障人士尤其有帮助。
请记住,好的标题能总结标题下面的内容,但并不会包括所有内容。如果关于标题没有更多的话要说,请考虑为内容采用其他格式。
以下是使用标题时要遵循的一些最佳做法。
- 使用标题和副标题来描述后面的内容。
- 使用标题和副标题将文本分成不同的逻辑块。
- 仅使用一个一级标题 <h1> 来提供页面标题。
- 标题应始终嵌套、连续,并使用 <h2> 至 <h6> 的标题级别进行格式化。创建新的副标题时,不要跳过标题级别。
- 避免过度嵌套。例如,将大多数营销内容限制为标题级别 <h1> 到 <h3>。
下面这些额外的风格指南也同样适用于标题,请务必记住。
- 不要使用罗马数字、字母或数字创建标题结构。
- 不要使用不同的字体或更大的字体来创建标题或标题结构。
- 避免只有标题的内容。
让我们看几个使用标题和副标题来组织内容的例子。
假设您作为新的 Salesforce 管理员第一次参加 Dreamforce,多么令人兴奋!然而,当您打开注册电子邮件时,您看到的是这样的内容:
欢迎来到 Dreamforce!查看 2022 年时间表——11 月 14 日星期一,注册和徽章领取时间为中午 12:00 至下午 6:00,地点为 Dream Forest。也可在下午 12:00 至晚上 10:00 在 Garden Grove 进行注册和徽章领取。11 月 15 日星期二,认证考试将于下午 6:00 至晚上 9:00 在 Campground 举行。
这些信息是不是很难理解?
现在,让我们使用标题和适当的格式来让这些内容对读者更友好。
Dreamforce 2022 时间表
11 月 14 日星期一
注册和徽章领取
- Dream Forest:12:00 PM–6:00 PM
- Garden Grove:12:00 PM–10:00 PM
11 月 15 日星期二
认证考试
- Campground:6:00 PM–9:00 PM
利用适当的标题和部分,您可以快速确定页面上的信息范围,跳过不重要的部分,并专注于感兴趣的内容。如果您正在查找特定信息,您可以浏览标题以确定该页面是否包含您要查找的内容。
列表
列表是组织多个要点并帮助读者遵循一系列步骤的好方法。使用结构合理的列表,用户可以快速识别属于列表的信息,识别列表中项目的数量,并在执行步骤时轻松明确自己所在的位置。
以下是使用列表时要遵循的一些最佳做法。
- 当列表项的顺序很重要时,请使用编号列表。
- 不要使用缩进、粗体、破折号或星号等符号或任何其他标点符号制作项目符号列表项。
- 所有列表,包括项目符号式和编号式,都应采用带有适当 HTML 标签的列表结构。
- 使用简洁的要点而不是长句或复合句。
让我们在注册 Dreamforce 会议的过程中了解一下上述各点的实际运用。这对您来说是一个新的会议,所以让我们回顾一下关于如何注册的说明。
在 Dreamforce 主页上,选择“时间表”。在“时间表”页面上,选择“立即注册”。输入您的姓名、邮寄地址、电子邮件地址和电话号码,然后选择“下一步”。选择您计划参加的会议。选择“完成注册”。
很难遵循这些步骤,因为说明是以段落形式组织的。很难记住您在注册过程中的位置,因此完成这些步骤变得很困难。
我们可以怎么做呢?让我们将这些步骤重组为编号列表!
- 在 Dreamforce 主页上,选择时间表。
- 从时间表页面选择立即注册。
- 输入您的姓名、邮寄地址、电子邮件地址和电话号码,然后选择下一步。
- 选择您计划参加的每个会议。
- 选择完成注册。
显而易见,列表将大幅提高读者完成任务的能力。
表格
表格是整理和显示数据的好方法。下面这个表格总结了几个需要记住的要点,以确保您的表格易于访问。
无障碍表格的特性
表格特性 | 特性目的 |
---|---|
在表格之前包括一个标题和简短摘要或表格概述。 |
屏幕阅读器使用此信息为视障用户描述表格。 |
确保标题行或列(<th> 元素)和所有标题单元格都包含内容。 |
空的标题单元格会给依赖屏幕阅读器的用户造成麻烦。 |
具备单一概念或单项数据。 |
包含不同数据类型或概念组合的单元格会给依赖屏幕阅读器的用户造成问题。 |
确保单元格不跨越不同的行或列。 |
合并的单元格会给依赖屏幕阅读器的用户造成问题。 |
尽可能以百分比 (%) 而非绝对像素宽度定义单元格宽度。 |
这有助于减少在较小屏幕上显示表格时出现的问题。 |
避免定义单元格高度。 |
定义绝对单元格高度可能会导致当用户放大内容时内容被截断。 |
链接标签
几乎所有内容都包含一个或多个链接。因为屏幕阅读器用户经常选择在网页上列出链接,因此请以清楚且唯一的方式描述每个链接目标。
指定链接标签时:
- 描述链接目标而不是提供实际的网址。典型 URL 中的字母、数字和符号对屏幕阅读器用户没有帮助。
- 避免使用模糊的短语,例如“了解更多”或“转到此处”,这些短语无法为从列表中访问链接的人提供上下文。
- 确认页面上没有重复的链接标签,除非您有意获取指向同一目标的链接标签。
- 如果链接指向外部域,请使用外部链接图标 向用户表明这一点,并指定 alt=“在新窗口中打开”。
- 对于在新选项卡或窗口中打开的链接,请让读者知道。其中一种方法是使用链接文本,例如:“XYZ 链接名称 [链接在新选项卡中打开]”。
让我们总结一下
使用结构元素(如标题、列表、表格和链接标签)来组织和呈现信息可以极大地提高内容的无障碍性。我们稍后会讨论其他无障碍注意事项,但遵守这些基本原则可确保所有用户(包括残障人士)更容易访问您的内容。
在下一个单元中,我们将讨论如何使用语言来增加内容的无障碍性。
资源
- W3C:页面结构概念
- 社会保障总署:Microsoft Word 365 基本编写与测试指南
- 社会保障总署:PDF 508 无障碍检查清单
- WebAIM:资源
- 美国人口普查局:新闻发布