Search code examples
htmlaccessibility

What's the best way to allow for keyboard navigation on a Bootstrap navbar?

First I don't have any code to share, but more of a general help question. I have built a custom WordPress site and I want to make the header / footer nav elements keyboard focusable and be able to open using the keyboard. I want to know if:

  1. There is anything I can do with the HTML Markup (using Tabindex, for example) or
  2. Do I need to custom-write this functionality with JavaScript?

Here's my live site for a Demo, feel free to inspect source code

The Main Problem is that by loading the page and tabbing through the elements, the browser skips the header and footer, and jumps further down the page. This is common on all pages.

Functionality expected: I want the user to tab to the first account / search links, followed by the eCommerce links, followed by the navigation links. I'm using Bootstrap 4.6.

Any ideas?

Solution

  • The tab order on your page seems correct. What is not working is expanding the submenus correctly.

    From the Bootstrap documentation on navbar dropdowns, this would be the correct markup:

    <li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>

    For better accessibility, role="button" and aria-expanded need to be added and updated by means of JavaScript. The JS Dropdown-plugin will pick up data-toggle="dropdown" and handle all this.

    Currently on the linked page, the expanding logic is added in CSS for :hover only, which is not accessible to touchscreen our keyboard users.

    It’s a quite common issue with such dropdown navigation menus, that touchscreen and keyboard users are left out because the design decision was to open the submenu and have the parent item a clickable link at the same time.

    You’ll need to get rid of that. A common workaround is to add a visually different Overview link at the top of each submenu.

    Mark the current page in a menu

    You also have the usability-issue that the current page is not visually marked, nor for assistive technology.

    Bootstrap 4 uses the active class for the menu-item to do so, and recommends adding a hidden (current) text in the link.

    But you can also combine this with the Bootstrap 5 way of adding the aria-current="page" to the link:

    <li class="nav-item active"><a aria-current="page" href="https://www.fralinpickups.com/blog/" class="nav-link">The Workbench</a>