Update to TwentyTwelve & Child Theme: Accessible Submenu

A quick update. I’ve previously written on developing an Accessible TwentyTwelve Child Theme. Recently, a new version of the parent theme (TwentyTwelve) was released, so I had to update the Child Theme to reflect the changes in the parent.

Increased Menu Accessibility

The main change was to the navigation menu. Previously, the submenu was not at all accessible to keyboard users and screen readers.

Unfortunately, they did not fix the issue with the mobile “mode” where you have the button-looking menu.

This actually made the changes a tad more complex, because I had to keep the changes I made to make the mobile “mode”, while getting rid of the changes I made for the larger screen sizes.

Comparing CSS

I basically copied all the relevant CSS from the parent theme and systematically looked at each class to see what I could rely on the parent, and what parts I needed to keep in my own CSS to make sure it overwrites any changes I made.

Tip on Checking CSS on Focus/Hover

I get the feeling everyone else already knows about this already, but if you want to see what the page looks like with specific elements having a focus, hover, active state, then…

In Chrome, click on the middle icon next to styles to show checkboxes.

In Firefox, right click on the element to choose the state.

Check out the stackoverflow thread for more.

At least on quick use, I preferred the Chrome one because in Firefox, the states would reset when I focused on a different element, which was annoying when I wanted to see how the code changed based on a parent element having focus.

Accessible Submenu in Larger Screens

Anyway, the point is that now if you use a screen reader, it will read the submenu links and if you use a keyboard, you can now tab through the submenus as well.