CODEWITHSUNDEEP
htmlnavigationstandards
Konrad
Konrad

Reputation: 63

Should I include the "menu button" inside the nav tags?

I have a simple question. Should the button, that I use to open/close my navigation menu be included in the nav tags?

The button itself is not helping in navigating but without him, there is no access to navigation. 

<nav>
  <ul class="nav">
    <li class="nav__el nav__el-active">Home</li>
    <li class="nav__el">Generic</li>
    <li class="nav__el">Services</li>
    <li class="nav__el">Blog</li>
    <li class="nav__el">Contact</li>
  </ul>
  <i class="fas fa-bars"></i> //menu btn
</nav>

that's the example. Now the btn is in the nav, but it also can be like that:

  <div class="topbar">
    <nav>
      <ul class="nav">
        <li class="nav__el nav__el-active">Home</li>
        <li class="nav__el">Generic</li>
        <li class="nav__el">Services</li>
        <li class="nav__el">Blog</li>
        <li class="nav__el">Contact</li>
      </ul>
    </nav>
    <i class="fas fa-bars"></i> //menu btn
  </div>

Upvotes: 1

Views: 974

Answers (1)

Danziger
Danziger

Reputation: 21161

At first glance, when reading this at WHATWG:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

It seems to me that the button should not be included, as that's clearly not a navigation link.

Anyway, if you continue reading:

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).

With that in mind, it makes sense to include that button and any other non-link control you might have (usually in the header area) because if a screen reader user wants to...:

  • ...skip the whole navigation, they also want to skip the other controls that are not links.

  • ...jump straight to the navigation, they might also want to use some navigation elements that are not links.

If you check some of the examples at WHATWG, it looks like they are applying these criteria. The first example is:

<body>
    <h1>The Wiki Center Of Exampland</h1>

    <nav>...</nav>

    <article>...</article>

    ...

</body>

Here, it makes sense not to skip the title on the page (to know where you are) but then skip all the navigation elements and jump straight to the content.

However, on the last one:

<nav>
    <h1>Folders</h1>

    <ul>
        <li><a ...>... </a></li>

        ...
    </ul>
</nav>

It would make sense to skip the Folders heading element if you are not interested in the navigation because it's actually part of it, the same way you put the heading of a section inside a section and not before it. The same applies to your menu button.

Some other examples of elements that might be part of the main navigation of the site, and thus go into <nav> are logos that link to the root of the site or search forms.

For example, LinkedIn is doing that:

LinkedIn <nav> screenshot

Also, Bruce Lawson, who is part of the Accessibility Task Force, has the search inside the <nav> element on his personal website:

Bruce Lawson's personal website <nav>

However, you can also find examples of the opposite. For example, AirBnB only includes some links in the <nav> element:

enter image description here

While in this case, I would have also included the search, that for me clearly represents the main way to navigate on their site.

Anyway, you could and should also use ARIA for accessibility and structured data / Schema.org markup for search engine support.

Upvotes: 1

Related Questions