Navbar Accessibility

Starting with Navbar 3.0, our focus has shifted more towards accessibility, following a similar trend we see with Bootstrap and other frameworks. We've prepared some minor markup tweaks to provide a modern WAI-ARIA compliant component.

In that sense, we've changed the markup to incorporate the native <button> element to enable toggling of sub-menus via keyboard. Further more, we've changed the Navbar event handlers to enable full keyboard navigation via the TAB key, while the SPACE key will allow you to open sub-menus. Let's break it down to pieces:

Navbar Wrapper

<nav class="navbar" data-function="navbar" aria-label="Main"></nav>

When using the wrapper, you mainly need to distinguish between several instances by using the aria-label attribute. The purpose is to enable users' understanding of the context in which the navigation is provided to improve usability and overall experience.

Navbar Menu

<ul class="nav" data-function="navbar" role="navigation" aria-label="Main"></ul>

When not using the wrapper, your menu needs to inform the user that its links are in fact provided to help him find the content easier and more convenient, and that is where the role="navigation" attribute is to be used.

Navbar Toggles

<button class="navbar-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Toggle navigation"></button>

and..

<button class="subnav-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Toggle submenu"></button>

The stars of the show, the <button class="navbar-toggle"> and <button class="subnav-toggle"> elements, both make use of aria-haspopup as well as the aria-expanded attributes to inform the user about the existence of a sub-menu and its state. Since these buttons don't have a text but make use of icons, it's ideal to make use of the aria-label attribute to inform the user about their function.

Navbar Menu Item

<li class="active">
  <a href="#" aria-current="page">Menu Item</a>
</li>

The menu item is best highlighted when links the current page with a strong colourful contrast. In addition, the use of aria-current attribute will also inform the user of the current page within the navigation. Other menu items also make use of colour contrast when hovered or focused which is in line with the WRC recommandations.

Navbar Menu Icons

<li>
  <a href="#">
    <i class="menu-icon" aria-hidden="true"><i>
    <span>Menu Item</span>
    <i class="parent-icon" aria-hidden="true"><i>
  </a>
  <button class="subnav-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Toggle submenu">
    <i class="menu-icon" aria-hidden="true"><i>
  </button>
  <ul class="subnav"></ul>
</li>

All icons within the Navbar markup are simply aesthetic enhancing graphics and serve no other purpose to the user, which means that aria-hidden attribute is required at all times.

Other recommandations

  • The aria-controls attribute can be used for the <button class="navbar-toggle"> / <button class="subnav-toggle"> elements to indicate the connection with a very specific sub-menu.
  • In other cases, a more restrictive markup might be required, then the aria-labelledby and aria-describedby attributes can be more useful to create a very clear description of the context.
  • The usage of the native <label class="visually-hidden"> element can also be used to provide the user with relevant information.
thednp © 2024 Go back to top