Recently I’ve been working on a rebuild of my website and one of my key goals is to improve accessibility considerations across the site. The first thing I wanted to tackle was the navigation menu. For a while I had contemplated not using any sort of toggle to display the menu on a mobile device and just have the links on view. However after much deliberation, I felt the balance of the design was improved when employing a menu toggle. If you can get away without a toggle though, I would strongly suggest you do so.
What I came up with was a mix of solutions after a fair bit of reading. In essence it uses a hidden attribute on the nav element to determine its visible state, and that is controlled via a click event on a button. At the same time it also updates the aria attributes to provide detail to screen readers about the current states.
For keyboard users, enter or space will toggle the menus visual state when focus is on the menu toggle button. In addition, once open the first link in the menu will gain focus, with a visible outline. Finally using the ESC key will close the menu.
Below in the CodePen example you can review the HTML, CSS (SCSS) and JavaScript code that makes this workable. And I encourage you to try accessing the menu, both via a mouse click, and with the keyboard. Though with the latter make sure you click into the CodePen result window first so your focus is in the right place.
I’m sure there will be more I can add to this example to improve it, so if you have any suggestions let me know.