语义和内容导航

语义在网页导航中的作用

爱丽丝·博克斯霍尔
Alice Boxhall
戴夫·加什
Dave Gash
梅金·卡尼
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 规定“在适当的情况下,使用标题指定各个内容版块”

并非所有标题都必须在屏幕上显示。例如,Wikipedia 使用一种技术,故意将某些标题置于屏幕之外,使这些标题专门可供屏幕阅读器和其他辅助技术访问。

<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 代码块,并提供了一种更清晰、更具描述性的方式来为作者和读者直观地表达页面结构。