语义在页面导航中的作用
您已经了解了可供性、语义以及辅助技术如何使用辅助功能树为其用户创建替代用户体验。您可以看到，编写富有表现力的语义 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>
对于复杂的应用程序，当视觉设计不需要或没有空间容纳可见标题时，这可能是一种容纳标题的好方法。
其他导航选项
虽然带有良好标题的页面可以帮助屏幕阅读器用户导航，但他们还可以使用其他元素在页面中移动，包括链接、表单控件和地标。
读者可以使用屏幕阅读器的转子功能（一种隔离和扫描页面标题列表的简单方法）来访问页面上的链接列表。有时，就像在 wiki 上一样，链接很多，因此读者可能会在链接中搜索某个术语。这会将点击次数限制为实际包含该术语的链接，而不是页面上每次出现该术语。
仅当屏幕阅读器可以找到链接且链接文本有意义时，此功能才有用。例如，以下是一些使链接难以找到的常见模式。
- 没有
href属性的锚标记。这些链接目标通常在单页应用程序中使用，会给屏幕阅读器带来问题。您可以在这篇关于单页应用程序的文章中阅读更多内容。 - 使用链接实现的按钮。这些按钮会导致屏幕阅读器将内容解释为链接，并且按钮功能丢失。对于这些情况，请将锚标记替换为真正的按钮并适当设置样式。
- 用作链接内容的图像。有时是必要的，链接图像可能对屏幕阅读器不可用。为了保证链接正确暴露给辅助技术，请确保图像具有
alt属性文本。
链接文本不佳是另一个问题。诸如“了解更多”或“点击此处”之类的可点击文本没有提供有关链接去向的语义信息。相反，请使用描述性文本，例如“了解有关响应式设计的更多信息”或“查看此 canvas 教程”，以帮助屏幕阅读器提供有关链接的有意义的上下文。
转子还可以检索表单控件列表。使用此列表，读者可以搜索特定项目并直接转到它们。
屏幕阅读器常犯的一个错误是发音。例如，屏幕阅读器可能会将“Udacity”发音为“oo-dacity”，或者将电话号码读作一个大整数，或者将大写文本读作首字母缩写词。有趣的是，屏幕阅读器用户非常习惯这种怪癖，并将其考虑在内。
一些开发人员试图通过提供仅屏幕阅读器文本（以语音方式拼写）来改善这种情况。以下是语音拼写的简单规则：不要这样做；这只会使问题变得更糟！例如，如果用户正在使用盲文显示器，则单词的拼写将不正确，从而导致更多混乱。屏幕阅读器允许大声拼写单词，因此请让读者控制他们的体验并决定何时需要这样做。
读者可以使用转子查看地标列表。此列表帮助读者找到主要内容和一组由 HTML 地标元素提供的导航地标。
HTML5 引入了一些新元素，这些元素有助于定义页面的语义结构，包括 header、footer、nav、article、section、main 和 aside。这些元素专门在页面中提供结构线索，而不会强制任何内置样式（无论如何您都应该使用 CSS 来完成）。
语义结构元素取代了多个重复的 div 块，并为作者和读者提供了一种更清晰、更具描述性的方式来直观地表达页面结构。