语义和内容导航

语义在网页导航中的作用

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

您已了解了功能、语义,以及辅助技术如何使用无障碍功能树为用户打造替代用户体验。您可以看到,编写具有表现力的语义 HTML 让您可以轻松使用大量的无障碍功能,因为许多标准元素都内置了语义和支持行为。

在本节课中,我们将阐述一些不太明显的语义,它们对屏幕阅读器用户非常重要,特别是在导航方面。在包含大量控件但内容不多的简单页面中,可以很容易地浏览页面以找到所需内容。但在一个内容丰富的页面(例如维基百科条目或新闻聚合器)中,从上到下通读所有内容并不现实;您需要找到一种高效的内容浏览方式。

开发者往往错误地认为屏幕阅读器使用起来繁琐而又效率低下,或者屏幕上的所有内容都必须是可聚焦内容,才能让屏幕阅读器找到。实际情况往往并非如此。

屏幕阅读器用户通常依赖标题列表来定位信息。大多数屏幕阅读器都可以轻松地隔离和扫描页面标题列表,这项重要功能称作“转子”。我们来看一下如何 有效利用 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 属性文本。

还有一个问题是不良链接文本。“了解详情”或“点击此处”等可点击文本对链接的指向未提供任何相关语义信息。请改用“了解有关自适应设计的详情”或“请参阅此画布教程”等描述性文字,以帮助屏幕阅读器提供有关链接的有意义上下文。

转子还可检索表单控件列表。阅读者可以利用该列表查找并直接跳转到特定项目。

屏幕阅读器的一个常见错误是发音。例如,屏幕阅读器可能会将“Udacity”发音为“oo-dacity”,读取为大整数的电话号码,或将大写文本当作首字母缩写词来读取。有趣的是,屏幕阅读器用户已经习惯了这种怪异行为,并将其纳入考虑范围。

一些开发者尝试通过提供以语音拼写的屏幕阅读器专用文本来改善这一状况。下面是语音拼写的简单规则:不要这么做;这样做只会让问题变得更糟!例如,如果用户使用盲文显示器,将会出现词语拼写不正确的情况,造成更多困惑。屏幕阅读器允许朗读式拼写词语,因此应交由阅读器来控制其体验以及决定何时有必要这样做。

阅读器可以利用转子来查看地标列表。该列表有助于阅读器找到主要内容以及一组由 HTML 地标元素提供的导航地标。

HTML5 引入了一些新元素,有助于定义网页的语义结构,其中包括 headerfooternavarticlesectionmainaside。这些元素在页面中明确提供结构线索,不会强制进行任何内置样式设置(反正您都应使用 CSS 来完成)。

语义结构元素可以取代多个重复性的 div 块,并提供了一种更加清晰、更具描述性的方式,能够同时为制作者和阅读器直观表达页面结构。