<nav>和<header>之间的关系

Question

我经常遇到具有以下结构的网页：

<header role="banner">
    <nav role="navigation">
    </nav>
</header>

即在role="navigation"内放置role="banner"的元素，但在我看来<nav>和<header>位于同一DOM级别时正确的结构：

<header role="banner">
</header>
<nav role="navigation">
</nav>

请帮助我了解哪个示例更正确。

Answer 1

没有正确或错误的标准方法。

对于网站结构和语义中什么有意义，这完全取决于开发人员的判断。

任何文档schemaspy.dp=postgresql-42.2.4.jar的{​​{3}}通常位于页面顶部，因此自然而然地在其中包含header <header>是很合理的。

除了您提供的代码外，在本机HTML5元素上使用<nav>是一种不好的做法，因为现代浏览器和辅助技术会识别元素的语义并相应地进行传达，因此无需使用{ {3}}角色*

  

*然而，值得注意的是navigation。因此，如果您打算使用IE11支持用户，则包括冗余角色属性仍然是一个好习惯。如果没有角色属性，则使用IE11 + NVDA的用户将无法使用界标区域进行导航。

     

–信用ARIA

Answer 2

两个例子都很好。

WAI-ARIA创作实践提供了一些General Principles of Landmark Design。这些明确表明：

• 标记区域可以嵌套，并且
• 导航地标区域不必是顶级地标。

需要考虑的是不同的屏幕阅读器如何处理嵌套区域。 JAWS和NVDA提供了一个地标概述工具，该工具允许发现嵌套的地标区域。另一个工具是键盘命令，可跳至下一个界标。但是某些屏幕阅读器（例如ChromeVox）仅以这种方式显示顶级地标。

在我看来，页面的主导航最好被视为顶级地标（通常像第一个示例一样，在<header>之后）。如果您的页面具有辅助导航区域，则这些区域适合嵌套。例如，网站某个部分的子菜单可以是<nav>中的<aside>。

如果您的页面有多个导航地标，请使用aria-label或aria-labelledby为它们提供标签。