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.
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
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!