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

Question

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

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

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

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

请帮助我理解哪个例子更正确。

Answer 1

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

\n\n

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

\n\n

任何文档的标题通常位于页面顶部，因此包含导航自然是合乎逻辑的<header> <nav>通常位于页面顶部，因此在其中

\n\n

除了您提供的代码之外，role=""在本机 HTML5 元素上使用是不好的做法，因为现代浏览器和辅助技术可以识别 element\xe2\x80\x99s 语义并相应地传达它，因此无需使用ARIA*

\n\n

\n

* 但值得注意的是，IE11 不这样做。因此，如果您打算支持使用 IE11 的用户，那么包含冗余角色属性仍然是一个好习惯。如果没有角色属性，使用 IE11 + NVDA 的用户将无法使用地标区域进行导航。

\n\n

\xe2\x80\x93 信用andrewmacpherson

\n

\n