Accessibility - How to make bootstrap navbar collapse button keyboard accessible

Question

I've used bootstrap-ui to create a collapsable navbar, and added in a custom high-contrast-mode toggle, styled to look like the collapse toggle:

<nav class="navbar navbar-default navbar-fixed-top dark" ng-controller="NavBarController">
  <header class="container container-fluid">
    <div class="navbar-header">
      <button tabindex="0" type="button" name="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" aria-expanded="false" aria-controlls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <i role="img" class="fa fa-bars"></i>
      </button>
      <high-contrast-switch class="btn navbar-btn navbar-right navbar-toggle">
        <i role="img" class="fa text-white fa-adjust" aria-label="High Contrast Mode"></i>
      </high-contrast-switch>
      <a href="/"><h1 class="logo navbar-text">Kupat Givat HaMivtar</h1></a>
    </div>
    <div uib-collapse="isCollapsed" class="navbar-collapse collapse" aria-expanded="true">
      <ul class="nav navbar-nav navbar-right">
        <li du-scrollspy="donate"><a du-smooth-scroll="donate">Donate</a></li>
        <li du-scrollspy="about"><a du-smooth-scroll="about">About</a></li>
        <li du-scrollspy="stories"><a du-smooth-scroll="stories">Stories</a></li>
        <li du-scrollspy="contact"><a du-smooth-scroll="contact">Contact</a></li>
      </ul>
    </div>
  </header>
</nav>

As you can see, I've given the collapse control a tabindex, but the button is still not keyboard-accessible at screen-xs resolutions. This gif illustrates how tabbing through the page focusses (in order)

the high-c toggle
the page title
the first nav item in my secondary nav.

I've tested disabling the secondary nav, but there seems to be no conflict

How do I enable keyboard-accessibility of the navbar toggle button?

I am not sure if it is what you're looking for, but you could give accesskey="h" to the button. When you press... (Firefox: [ALT] [SHIFT] + h) (Opera prior version 15: [SHIFT] [ESC] + h) or (IE, Chrome, Safari, Opera 15+: [ALT] + h), then it should (in theory) toggle the button. — user5832974
That's interesting... but how should a user know that 'h' is the ticket? — Benny Powers
You can change the h to any letter or number. What did you want it to be originally? — user5832974
I am not sure if it is right as i don't do much jQuery, but try if (keyCode == 9) {e.preventDefault();yourFunction(); — user5832974

Benny Powers Benny Powers · Accepted Answer · 2016-03-31T12:18:04

Turns out I had a typo in my markup. Instead of aria-controlls="navbar" it should be aria-controls="navbar"

Accessibility - How to make bootstrap navbar collapse button keyboard accessible

2 Answers