辅助功能 地标
为什么
使用地标，使用 屏幕阅读器 的视障用户可以跳转到网页的各个部分。
什么
在 HTML 中，有一些语义元素可以用来定义网页的不同部分
<header><nav><main><aside><section><footer>
如何 - 白宫的示例
白宫的首页使用了地标。它在顶部包含一个 <header>，一个包含所有主要内容的 <main>，以及底部的一些 <nav> 元素的 <footer>。
可视化地标的一种方法是使用工具 辅助功能洞察。其中一个功能是它可以突出显示地标，正如我们在下面的屏幕截图中看到的那样。
自己试试。下载浏览器扩展 辅助功能洞察 并打开地标可视化。您最喜欢的网站是否使用了地标？
角色
但是，它显示了 banner、contentinfo 和 navigation。这有点令人困惑。原因是每个地标元素都有一个对应的角色。我们在这门课程中还没有谈到角色。我们将在后面回到这个问题，但作为简单的解释
一个 <header> 有一个内置的角色 banner。这意味着 <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"。这意味着屏幕阅读器用户可以直接跳到社交导航。提供帮助。有人会说，在 <nav> 的标签中使用 "navigation" 这个词是多余的。没有绝对的正确或错误，但 aria-label="social" 就足够了。
<aside> 和 <section> 标签
自从地标被引入 HTML 以来，开发人员一直感到困惑。人们发现两个定义模糊的元素是 <aside> 和 <section>。让我们试着澄清一下。最大的区别是 <aside> 与主要内容相关，而 <section> 不相关。
白宫的联系页面同时使用了 <aside> 和 <section>。三个分享按钮位于 <aside> 中。这是有道理的，因为它们与主要内容相关。如果您使用它们，您将分享您当前所在的页面。
"保持联系" 是一个 <section>。很好。它与主要内容无关，其他任何地标都不合适。白宫可以对这些地标进行的一个改进是添加标签。这对于屏幕阅读器用户来说将会有所帮助。 <section aria-label="Newsletter"> 和 <aside aria-label="Share this page"> 将非常有用。
