Skip to main content

Make the responsive Genesis menu both accessible and localized

Rian Rietveld posted on her blog a little snippet on how to make the responsive menu on Genesis framework accessible.

This is done by making the menu button an actual button element using a bit of javascript trickery. This is important since a div element cannot receive focus and will only be accessible using a mouse. Something that works like a button should be – a button element.

In the post, she writes that it’s a quick and dirty fix and her example code leaves untranslatable hard-coded text in the javascript files. I decided to add the translation part for a slightly more complete version.

Oh, and by this I’m not in any way implying that Rian writes dirty code 🙂 It’s just that this example was missing the translation part and I wanted to add it. If you didn’t know how to do it, then I hope I can help by adding this part of the puzzle.

First, we create an array of the localized data and ask WordPress to pass that data to our script using wp_localize_script

We now have an object containing the translated strings that we can use in our responsive menu js

This all implies that you have your css setup with menu styling and styles for screen reader text. Of course, this technique is valid in any theme and not just Genesis.

Since I am not super familiar with the Genesis framework, I cannot guarantee that all is perfect. I incorporated the aria-controls attribute from a comment from Dave on the post, but became a bit unsure about the selectors. If you see a mistake or have a better suggestion, give me a shout and I’ll update the gist.

Hopefully, using this code you will have both an accessible and translatable responsive menu. You can have your cake and eat it too!