Fix the accessibility of your Genesis responsive menu

cheeseburger

The Genesis Framework is my favorite tool to build a WordPress website. And with the next update (version 2.2) a lot of accessibility features and fixes will be added. But a framework is no child theme.
The HTML5 themes you can purchase with StudioPress have a beautiful responsive menu for the primary navigation. And that menu is completely inaccessible for keyboard and screen reader users.

What’s wrong?

The HTML code to show the responsive menu is:

 <div class="responsive-menu-icon"></div>

A div is not focusable, if you tab though a page the menu is skipped and you have no way to open it, only by using a mouse. And also the div is an empty container, with no content.

What needs to be changed?

  1. Change the <div> to a <button>, a button is focusable and clickable
  2. Add some text inside the  <button></button> to tell a screen reader user what the button is about. You can make this visibly hidden by using the screen-reader-text class
  3. Tell a screen reader user if the menu is open or closed by adding dynamically aria-expanded=”false” or aria-expanded=”true”

How can you do that?

The Genesis child themes use js/responsive-menu.js (GitHub) to show the responsive menu.
Change this JavaScript into for example:

jQuery(function( $ ){

 $(".nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<button class="responsive-menu-icon" aria-expanded="false"><span class="screen-reader-text">Menu</span></button>');

 $(".responsive-menu-icon").click(function(){
 var _this = $( this );
 _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
 $(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu").slideToggle();
 });

 $(window).resize(function(){
 if(window.innerWidth > 768) {
 $("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
 $(".responsive-menu > .menu-item").removeClass("menu-open");
 }
 });

 $(".responsive-menu > .menu-item").click(function(event){
 if (event.target !== this)
 return;
 $(this).find(".sub-menu:first").slideToggle(function() {
 $(this).parent().toggleClass("menu-open");
 });
 });

});

See an other accessible example of an Accessible Genesis responsive-menu.js at GitHub. With the visual text “Menu” (I hate hamburgers) and a leading heading.

You have to add the screen-reader-text class and maybe change the CSS .responsive-menu-icon to style the button so it fits your theme.

So: by changing a few lines of JavaScript and adding a few lines of CSS you turn your responsive menu into a perfectly accessible awesome responsive menu.

Discussion

Yes, this is a quick and dirty fix. There’s now untranslatable hardcoded text in the JavaScript, this could be done way better and cleaner. But you’ve got the picture of what needs to be changed. If you are a JavaScript pro: all help is welcome 🙂

4 thoughts on “Fix the accessibility of your Genesis responsive menu”

  1. Thanks for this, Rian. I’ll start incorporating this in all of my projects/themes going forward, and work on retroing my previous ones as I can.

    Really appreciate all of the effort you’re making (along with some others in the Genesis community) to educating us in this area!

  2. Hi Rian,

    Great write-up and thanks for bringing this to people’s attention.

    This was talked about in the Genesis Slack channel and we came up with a little fine-tuning that could be done by adding an extra aria attribute to the element. “aria-controls” tells screen readers (by ID) which DOM element is being expanded or collapsed by the button.

    The updated bit of your JS code would look like this:
    gist.github.com/Deaner666/

    Cheers,

    Dave

  3. Hi Rian,

    Since you explicitly stated that the translation part was missing, I gave a shot at adding it. I wrote a post on making the Genesis menu both accessible and translatable.

    If you see something wrong with the code, don’t hesitate to give me a shout and I’ll update it. I reused your selectors but also incorporated the `aria-controls` attribute from Daves comment. Don’t know if it makes sense to mix classes and IDs like that.

    The post can be found at http://thepilcrow.net/make-responsive-genesis-menu-accessible-localized/

    Cheers!
    Karin

Leave a Reply

Your email address will not be published. Required fields are marked *