语义在网页导航中的作用
您已了解了利用价值、语义以及辅助技术如何使用无障碍功能树为用户打造替代用户体验。您可以看到，通过编写富有表现力的语义 HTML，您无需付出太多努力即可实现许多无障碍功能，因为许多标准元素都内置了语义和支持行为。
在本课中，我们将介绍一些不太明显的语义，这些语义对屏幕阅读器用户非常重要，尤其是在导航方面。在一个简单的页面中，如果控件很多但内容不多，您可以轻松浏览页面以找到所需内容。但是，在内容丰富的网页（例如 Wikipedia 条目或新闻聚合器）上，从上到下阅读所有内容并不切实；您需要一种高效浏览内容的方式。
开发者常常会误以为屏幕阅读器的使用很繁琐且缓慢，或者屏幕上的所有内容都必须可聚焦，屏幕阅读器才能找到它们。但事实并非如此。
屏幕阅读器用户通常会依靠标题列表来查找信息。大多数屏幕阅读器都提供了一些简单的方法来隔离和扫描页面标题列表，这项重要功能称为旋转器。我们来看看如何有效使用 HTML 标题来支持此功能。
有效使用标题
首先，我们来重申一下之前提到的一点：DOM 顺序很重要，不仅对焦点顺序很重要，对屏幕阅读器顺序也很重要。在使用 VoiceOver、NVDA、JAWS 和 ChromeVox 等屏幕阅读器进行实验时，您会发现标题列表遵循的是 DOM 顺序，而不是视觉顺序。
一般来说，屏幕阅读器也是如此。由于屏幕阅读器与无障碍功能树互动，而无障碍功能树基于 DOM 树，因此屏幕阅读器感知的顺序直接基于 DOM 顺序。这意味着，适当的标题结构比以往更加重要。
在结构较好的大多数网页中，标题级别会嵌套，以指明内容块之间的父子关系。WebAIM 核对清单反复提及了此技术。
并非所有标题都必须显示在屏幕上。 例如，维基百科使用一种方法，即刻意将某些标题放置在屏幕之外，以便仅屏幕阅读器和其他辅助技术可以访问这些标题。
<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>
对于复杂的应用，当视觉设计不需要或没有空间显示标题时，这是一种很好的标题容纳方式。
其他导航选项
虽然带有良好标题的网页有助于屏幕阅读器用户导航，但他们还可以使用其他元素在网页中移动，包括链接、表单控件和地标。
读者可以使用屏幕阅读器的轮替功能（一种轻松隔离和扫描页面标题列表的方法）来访问页面上的链接列表。有时，如维基百科中，会有很多链接，因此读者可能会在链接中搜索某个字词。这样一来，命中结果就会仅限于实际包含该字词的链接，而不是网页中该字词的每个出现情况。
只有当屏幕阅读器能够找到链接且链接文字有意义时，此功能才有用。例如，以下是一些会导致链接难以找到的常见模式。
- 不含
href属性的锚链接标记。这些链接目标通常用于单页应用，会给屏幕阅读器带来问题。如需了解详情，请参阅这篇介绍单页应用的文章。 - 使用链接实现的按钮。这会导致屏幕阅读器将内容解读为链接，而按钮功能会丢失。对于这些情况，请将锚点标记替换为真实按钮，并为其设置适当的样式。
- 用作链接内容的图片。有时，屏幕阅读器无法使用链接的图片。为确保链接能够正确显示辅助技术，请确保图片包含
alt属性文本。
链接文字不当也是另一个问题。“了解详情”或“点击此处”等可点击文本不会提供有关链接指向何处的语义信息。请改用描述性文本，例如“详细了解响应式设计”或“查看此画布教程”，以帮助屏幕阅读器提供有关链接的有意义的上下文。
旋转图标还可以检索表单控件列表。读者可以使用此列表搜索特定内容并直接前往相应内容。
屏幕阅读器常犯的一个错误是发音。例如，屏幕阅读器可能会将“Udacity”读作“oo-dacity”，将电话号码读作一个大整数，或将大写文本读作首字母缩写。有趣的是，屏幕阅读器用户已经习惯了这种怪癖，并会将其纳入考量范围。
有些开发者会尝试通过提供拼音的仅限屏幕阅读器文本来缓解这种情况。下面是有关拼音拼写的简单规则：请勿使用；这只会让问题变得更糟！例如，如果用户使用的是盲文显示屏，则该字词的拼写将不正确，从而导致更大的困惑。屏幕阅读器可以大声拼读字词，因此请让读者自行控制其体验，并决定何时需要这样做。
读者可以使用旋转图标查看地标列表。此列表可帮助读者找到主要内容以及 HTML 地图标记元素提供的一组导航地图标记。
HTML5 引入了一些有助于定义网页语义结构的新元素，包括 header、footer、nav、article、section、main 和 aside。这些元素专门用于在页面中提供结构线索，而不会强制使用任何内置样式（您应该使用 CSS 来实现样式）。
语义结构元素取代了多个重复的 div 块，为作者和读者提供了一种更清晰、更具描述性的方式来直观地表达页面结构。