东俄勒冈大学 > 数字无障碍在东俄勒冈大学 > 数码无障碍指引 > 标题和清单

标题和清单

标题为内容提供了视觉和结构组织。使用已定义的标题元素(有时称为语义标题),而不是使用常规文本并将其样式化,使其看起来像标题,这使得屏幕阅读器等辅助技术能够在页面各部分之间跳转,并轻松识别与它们最相关的内容。

标题

指导方针

  • 像文字处理器和富文本编辑器这样的内容创建工具已经定义了Heading元素。使用这些内容来组织内容,而不是使用增加字体大小、下划线、固定文本、颜色等方式来对非标题文本进行样式化。
  • 标题是按照标题级别的重要性排列的。标题级别的语法和数量因平台而异,但通常以

    作为页面上的主标题,

    表示内容的主要子部分,直到

    作为最低级别的标题。
  • 页面的标题必须是1

    。这是页面的主要内容。

  • 大多数内容不需要6级标题。
  • 不要跳过标题级别。

    标题必须跟在

    标题后面。

  • 小心那些可能被内容模板自动插入的标题。例如,一些网络平台可能会自动将页面标题添加为H1标题。

标题层次结构示例:

以下是一个数字版报纸如何在其页面上构建标题的例子。

<标题>员工Infoline h1 > < /

对Infoline < h2 > < / h2 >

< h3 > < / h3 > Infoline历史

< p > < / p >段落内容

< h2 > < / h2 >其他资源

< h3 >东谈< / h3 >

< p > < / p >段落内容

数字符号< h3 > < / h3 >

< p > < / p >段落内容

学生Infoline < h3 > < / h3 >

< p > < / p >段落内容

列表和其他结构化内容

  • 根据您的内容编辑平台,您可能有多种其他预定义的内容类型。这通常包括编号列表(有时称为有序列表)和项目列表(有时称为无序列表)。它还可能包括诸如预定义的Quotation样式和增加/减少缩进选项之类的元素。
  • 只要有可能,使用这些内置选项,而不是使用样式来模拟相同的效果。这为页面提供了结构化定义,允许使用辅助技术的用户更容易地理解内容。

“假”列表的例子:

这个示例演示了使用键盘字符和空白来创建项目符号列表的视觉外观,而不使用已定义的列表元素。

我最喜欢的狗品种:

——罗得西亚脊背

——爱尔兰狼犬

——英国斗牛犬

这将被一些屏幕阅读器解读为:

我最喜欢的狗品种空间空间连字符罗得西亚背空间空间连字符爱尔兰狼犬空间空间连字符英国斗牛犬

如果我使用正确定义的无序列表工具,我的列表看起来像这样:

我最喜欢的狗品种:

  • 罗得西亚脊背犬
  • 爱尔兰猎狼犬
  • 英国牛头犬

这将被相同的屏幕阅读器读取:

我最喜欢的狗的品种,无序列表的三个项目。项目1:罗得西亚背犬,项目2:爱尔兰狼犬,项目3:英国斗牛犬

如何测试

航向结构可以手工测试,也可以使用自动化测试工具进行测试。列表和其他结构化内容可以手工测试。右键单击或ctrl单击一段结构化内容,然后在web浏览器中打开开发人员控制台(检查器)。验证内容确实是标题/列表/其他结构化元素,而不是添加样式的通用段落文本。如果它是一个标题,请验证它是否在标题层次结构中适当地嵌套。像WebAIM WAVE这样的自动化测试工具也可以检查正确的标题结构。有些自动化工具会对标题层次错误产生假阴性结果,因此,尽管自动化工具可以帮助您轻松识别合法的标题层次错误,但如果工具没有报告错误,仍然值得手动检查页面上的标题。