<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

这个没有标准方法是对还是错。

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

header of any document <header> is usually at the top of the page, so naturally it's logical to include the navigation<nav>里面的

除了您提供的代码之外，在原生 HTML5 元素上使用 role="" 是不好的做法，因为现代浏览器和辅助技术会识别元素的语义并相应地传达它，所以有无需使用 ARIA 角色 *

* Notably however, IE11 does not do this. So it's still good practice to include the redundant role attribute, if you intend to support users with IE11. Without the role attribute, users with IE11 + NVDA are not able to navigate using landmark regions.

– Credit andrewmacpherson

Answer 2

两个例子都很好。

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

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

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

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

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

<nav>和<header>的关系

The relationship between <nav> and <header>

html

accessibility

semantic-markup