语义在网页导航中的作用
您了解了功能可见性、语义，以及辅助技术如何使用无障碍树为用户打造另一种用户体验。您会发现，编写具有表现力的语义 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 引入了一些有助于定义网页的语义结构的新元素，包括 header、footer、nav、article、section、main 和 aside。这些元素在网页中明确提供结构线索，而不会强制设置任何内置样式（反正您都应使用 CSS 执行此操作）。
语义结构元素取代了多个重复的 div 代码块，提供了一种更清晰、更具描述性的方式，让作者和读者都能直观地表达网页结构。