语义在网页导航中的作用
您学习了功能可见性、语义，以及辅助技术如何使用 无障碍树，以便为用户打造另一种用户体验。 如您所见，编写富有表现力的语义 HTML 可以获得很多 因为许多标准元素同时具有 语义和支持行为。
在本课程中，我们将介绍一些不太明显的语义， 屏幕阅读器用户，尤其是在导航方面。在采用 控件很多，但内容不多，那么您可以轻松浏览网页 所需的资源。但在内容较多的网页上，例如维基百科条目或新闻网站上 从上到下通读所有内容并不现实；您 需要一种高效浏览内容的方法。
开发者经常误认为屏幕阅读器既繁琐又缓慢 或者屏幕上的所有内容都必须可聚焦于屏幕上 找到它。实际情况并非如此。
屏幕阅读器用户通常依靠标题列表来查找信息。大多数人 屏幕阅读器可以轻松隔离和扫描网页标题列表、 称为转子的重要特征。我们来看一下如何使用 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属性文本。
另一个问题是链接文字不当。可点击的文字，如“了解详情”或“点击 此处”不提供关于链接所在位置的语义信息。而应使用 描述性文字，如“详细了解自适应设计”或“查看此画布 教程"帮助屏幕阅读器提供有关链接的有意义上下文。
转子还可以检索表单控件列表。通过此列表，读者可以 您可以搜索特定商品并直接前往它们。
屏幕阅读器的一个常见错误是发音。例如，屏幕 读者可能会发音为“Udacity”例如“oo-dacity” 大整数，也可以像使用首字母缩略词一样读出相应的大写文字。 有趣的是，屏幕阅读器用户已经习惯于这种怪异行为， 考虑度。
有些开发者试图通过提供仅限屏幕阅读器的广告来改善这种情况 以发音拼写的文本。以下是一条简单的拼音规则： 不要这样做；只会让问题变得更糟！例如，如果用户使用的是 那么这个词的拼写会不正确， 造成混淆。屏幕阅读器支持大声拼写字词，因此请留给屏幕阅读器 来控制自己的体验并决定何时有必要这样做。
读者可以通过转子查看地标列表。这份清单有助于读者 查找 HTML 提供的主要内容和一组导航地标 标志元素。
HTML5 引入了一些新元素，
该网页，包括 header、footer、nav、article、section、main 和
aside。这些元素在网页中明确提供了结构线索
而不强制进行任何内置样式设置（反正您都应使用 CSS 执行此操作）。
语义结构元素取代了多个重复的 div 块，并且
提供更清晰、更具描述性的方式，直观地表达网页结构
为作者和读者都提供便利。