Workshop Keyboard Navigation

Short workshop on how to navigate a website with a keyboard only.

The basics

  • Tab: Move forward from link to link or to controls
  • Shift + Tab: Move backward from link to link or to controls
  • Enter: Activate links, buttons, or other interactive elements
  • Arrow: Navigate radio buttons and select boxes and scroll up and down a page
  • Spacebar: Activate radio buttons and check boxes and buttons

Continue reading “Workshop Keyboard Navigation”

Looking back on 2015 and forward to 2016

Last year I changed the focus of my company. I wanted to do web accessibility related work only. The plan was to:

  • build and maintain accessible websites only
  • give accessibility training to web developers and graphic designers
  • help developers and companies fixing accessibility issues
  • give talks on WordCamps and Meetups
  • keep contributing to WordPress

Continue reading “Looking back on 2015 and forward to 2016”

Girls can’t code and my English sucks

Last week I had the exact same conversation four times. With four different WordPress developers. All women.

The topic: I want to publish code, discuss issues that matter, ask questions to core developers, blog, make some noise, contribute, but I’m to afraid to do that. It reminded me of myself.

What is the matter with us women? Why the self inflicted self pity and lack of confidence?

“I am not good enough, I don’t know enough, what if they think I’m stupid, my English really sucks.”

Do only female WordPress programmers think that way? Or are women and men with talent and knowledge all over the world hiding themselves, because they think they aren’t good enough? Sobbing under their desks, anxiously staring at the world, hiding from critisim and ridicule. What a waste of talent and possibilities!

So what are we afraid of, why sell we ourselves short?

Every contribution, blog post, piece of code you publish is valuable. Criticism is part of the job, learn from it, don’t hide, embrace it, it helps you getting better! Nobody makes fun of you when you want to contribute and do you best. You are most welcome!

Do you really think all the guys, that make so much noise, always write perfect code and never make mistakes? Hell no, just like you they work and learn, make mistakes, write bugs and try to improve themselves.

Exactly the same as you…

So girl: pull yourself together, put your teeth into it, jump in at the deep end. Study hard and publish what you found useful. Respect is not earned by sitting silently in a corner.

Show what you can do and be proud of yourself, and don’t be afraid to make a mistake. We are all human, boys and girls alike.

Fix the accessibility of your Genesis responsive menu

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>');

 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();

 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 ( !== this)
 $(this).find(".sub-menu:first").slideToggle(function() {


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.


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 🙂