html - 和 <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任何文件<header>通常位于页面顶部，因此包含 navigation 是合乎逻辑的<nav>在这里面。

除了您提供的代码，使用 role=""在原生 HTML5 元素上使用是不好的做法，因为现代浏览器和辅助技术可以识别元素的语义并相应地传达它，所以没有必要使用 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