语义和内容导航

语义在页面导航中的作用

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

您已经了解了可供性、语义以及辅助技术如何使用辅助功能树为其用户创建替代用户体验。您可以看到,编写富有表现力的语义 HTML 可以为您带来很大的可访问性,而只需付出很少的努力,因为许多标准元素都内置了语义和支持行为。

在本课程中,我们将介绍一些不太明显的语义,这些语义对于屏幕阅读器用户非常重要,尤其是在导航方面。在控件很多但内容不多的简单页面中,很容易扫描页面以找到您需要的内容。但在内容丰富的页面(例如 Wikipedia 条目或新闻聚合器)上,从上到下阅读所有内容是不切实际的;您需要一种有效浏览内容的方法。

开发人员通常有一种误解,认为屏幕阅读器使用起来既繁琐又缓慢,或者屏幕上的所有内容都必须可聚焦才能让屏幕阅读器找到它。但事实并非总是如此。

屏幕阅读器用户通常依赖标题列表来查找信息。大多数屏幕阅读器都有简单的方法来隔离和扫描页面标题列表,这是一项称为转子的重要功能。让我们看看如何有效地使用 HTML 标题来支持此功能。

有效使用标题

首先,让我们重申早先的观点:DOM 顺序很重要,不仅对于焦点顺序,而且对于屏幕阅读器顺序也很重要。当您尝试使用 VoiceOver、NVDA、JAWS 和 ChromeVox 等屏幕阅读器时,您会发现标题列表遵循 DOM 顺序而不是视觉顺序。

这对于一般的屏幕阅读器来说都是如此。因为屏幕阅读器与辅助功能树交互,而辅助功能树是基于 DOM 树的,所以屏幕阅读器感知的顺序直接基于 DOM 顺序。这意味着适当的标题结构比以往任何时候都更加重要。

在大多数结构良好的页面中,标题级别是嵌套的,以指示内容块之间的父子关系。《WebAIM 清单》多次提到此技术。

  • 1.3.1 提到“语义标记用于指定标题”
  • 2.4.1 提到标题结构是一种绕过内容块的技术
  • 2.4.6 讨论了编写有用的标题的一些细节
  • 2.4.10 指出“内容的各个部分应在适当情况下使用标题指定”

并非所有标题都必须在屏幕上可见。例如,《维基百科》使用了一种有意将某些标题放在屏幕外的技术,专门使其对屏幕阅读器和其他辅助技术可访问。

<style>
    .sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
</style>

<h2 class="sr-only">This heading is offscreen.</h2>

对于复杂的应用程序,当视觉设计不需要或没有空间容纳可见标题时,这可能是一种容纳标题的好方法。

其他导航选项

虽然带有良好标题的页面可以帮助屏幕阅读器用户导航,但他们还可以使用其他元素在页面中移动,包括链接表单控件地标

读者可以使用屏幕阅读器的转子功能(一种隔离和扫描页面标题列表的简单方法)来访问页面上的链接列表。有时,就像在 wiki 上一样,链接很多,因此读者可能会在链接中搜索某个术语。这会将点击次数限制为实际包含该术语的链接,而不是页面上每次出现该术语。

仅当屏幕阅读器可以找到链接且链接文本有意义时,此功能才有用。例如,以下是一些使链接难以找到的常见模式。

  • 没有 href 属性的锚标记。这些链接目标通常在单页应用程序中使用,会给屏幕阅读器带来问题。您可以在这篇关于单页应用程序的文章中阅读更多内容。
  • 使用链接实现的按钮。这些按钮会导致屏幕阅读器将内容解释为链接,并且按钮功能丢失。对于这些情况,请将锚标记替换为真正的按钮并适当设置样式。
  • 用作链接内容的图像。有时是必要的,链接图像可能对屏幕阅读器不可用。为了保证链接正确暴露给辅助技术,请确保图像具有 alt 属性文本。

链接文本不佳是另一个问题。诸如“了解更多”或“点击此处”之类的可点击文本没有提供有关链接去向的语义信息。相反,请使用描述性文本,例如“了解有关响应式设计的更多信息”或“查看此 canvas 教程”,以帮助屏幕阅读器提供有关链接的有意义的上下文。

转子还可以检索表单控件列表。使用此列表,读者可以搜索特定项目并直接转到它们。

屏幕阅读器常犯的一个错误是发音。例如,屏幕阅读器可能会将“Udacity”发音为“oo-dacity”,或者将电话号码读作一个大整数,或者将大写文本读作首字母缩写词。有趣的是,屏幕阅读器用户非常习惯这种怪癖,并将其考虑在内。

一些开发人员试图通过提供仅屏幕阅读器文本(以语音方式拼写)来改善这种情况。以下是语音拼写的简单规则:不要这样做;这只会使问题变得更糟!例如,如果用户正在使用盲文显示器,则单词的拼写将不正确,从而导致更多混乱。屏幕阅读器允许大声拼写单词,因此请让读者控制他们的体验并决定何时需要这样做。

读者可以使用转子查看地标列表。此列表帮助读者找到主要内容和一组由 HTML 地标元素提供的导航地标。

HTML5 引入了一些新元素,这些元素有助于定义页面的语义结构,包括 headerfooternavarticlesectionmainaside。这些元素专门在页面中提供结构线索,而不会强制任何内置样式(无论如何您都应该使用 CSS 来完成)。

语义结构元素取代了多个重复的 div 块,并为作者和读者提供了一种更清晰、更具描述性的方式来直观地表达页面结构。