辅助功能地标
为什么
借助地标，使用 屏幕阅读器 的盲人用户能够跳转到网页的各个部分。
什么
在 HTML 中有一些语义元素可用于定义网页的不同部分:
<header><nav><main><aside><section><footer>
如何 - 来自白宫的例子
白宫的首页正在使用地标。 它由顶部的 <header> 和包含所有主要内容的 <main> 组成 和一个 <footer>，底部有一些 <nav> 元素。
一种可视化地标的方法是使用工具 Accessibility Insights。 其中一个特点是它突出了地标，正如我们在下面的屏幕截图中看到的那样。
自己试试吧。 下载浏览器扩展 Accessibility Insights 并打开地标可视化。 您最喜欢的网站是否使用地标?
角色
等等，它显示了 banner、contentinfo 和 导航。 这有点令人困惑。 原因是每个地标元素都有对应的作用。 到目前为止，我们还没有讨论过本课程中的角色。 我们将回到这一点，但作为一个简化的解释:
<header> 有一个内置的横幅角色。 这意味着 <header>、<header role="banner"> 和 <div role="banner"> 或多或少是等价的。 在大多数情况下，<header> 就足够了。
<nav>也是如此，它内置了role="navigation"。<main> 比较简单，它有 role="main"。 然后我们有 <footer> 及其 role="contentinfo"。 让我们暂时离开角色。
每个地标不止一个
一条经验法则是每页只使用一个 <main>。 当我们使用不止一种地标时，例如本例中的多个 <nav>，我们必须标记它们中的每一个。 这是通过属性 aria-label 完成的。
在白宫的页脚中，我们有三个 <nav>，每个都有一个 aria-label，例如 aria-label="social navigation"。 这意味着屏幕阅读器用户可以直接跳到社交导航。 伸出援助之手。 有人会说，将"navigation"导航一词用作 <nav> 标签的一部分是多余的。 没有对错之分，但是 aria-label="social" 应该没问题。
<aside> 和 <section> 标签
自从将地标引入 HTML 以来，开发人员一直感到困惑。 人们发现定义模糊的两个元素是 <aside> 和 <section>。 让我们试着澄清一下。最大的区别是一个 <aside> 与主要内容相关，<section>不相关。
白宫的联系页面同时使用了 <aside> 和 <section>。三个共享按钮位于 <aside> 中。 这是有道理的，它们与主要内容相关。 如果您使用它们，您将共享您所在的页面。
Stay Connected 是 <section>。 好的。 它与主要内容无关，其他地标也不合适。白宫可以对这些地标进行的一项改进是添加标签。 这对于屏幕阅读器用户来说会更好。 <section aria-label="Newsletter"> 和 <aside aria-label="Share this page"> ; 会有帮助。
