CODEWITHSUNDEEP
htmlaccessibilitysemantic-markup
Konstantin Galiakhmetov
Konstantin Galiakhmetov

Reputation: 213

The relationship between <nav> and <header>

Often I meet web pages which have the following structure:

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

i.e. element with role="navigation" placed inside of role="banner", but it seems to me that the correct structure when <nav> and <header> locate on the same level of DOM:

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

Please help me to understand what example is more correct.

Upvotes: 5

Views: 6542

Answers (2)

Shannon Young
Shannon Young

Reputation: 1576

There is no standard method for this that is right or wrong.

It is purely down to developer discretion as to what makes sense within the site structure and semantics.

The header of any document <header> is usually at the top of the page, so naturally it's logical to include the navigation <nav> within this.

As an aside to the code you supplied, using role="" on native HTML5 elements is bad practise, as modern browsers and assistive technology recognise the element’s semantics and convey it accordingly, so there is no need to use the ARIA role *

* 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

Upvotes: 5

andrewmacpherson
andrewmacpherson

Reputation: 1561

Both examples are fine.

The WAI-ARIA Authoring Practices provides some General Principles of Landmark Design. These make it clear that:

  • Landmark regions can be nested, and
  • Navigation landmark regions do not have to be top-level landmarks.

Something to consider is how different screen readers handle nested regions. JAWS and NVDA provide a landmarks overview tool, which allows discovery of nested landmark regions. Another tool is a keyboard command to skip to the next landmark; but some screen readers (e.g. ChromeVox) only expose the top-level landmarks this way.

In my view, the main navigation for a page is best treated as as a top-level landmark (typically just after the <header> like your first example). If your page has secondary navigation regions, these are suitable for nesting. For example, a sub-menu for one section of the website could be a <nav> inside an <aside>.

If your page has multiple navigation landmarks, it's important to provide labels for them, using aria-label or aria-labelledby.

Upvotes: 2

Related Questions