Twenty Twelve: (Sub) Menus inaccessible via Apple VoiceOver

[sixhours]

Expected Behavior: When accessibility assistant software, Apple VoiceOver, is enabled, to be able to cycle through custom menu items and have sub menus expand when reached.

Actual Behavior: When accessibility assistant software, Apple VoiceOver, is enabled, menu items can be cycled through but items with sub menus are treated as top-menu items only.

To Replicate:

1. Set theme to Twenty Twelve
2. Add a custom menu with at least one sub menu
3. Visit site
4. Enable VoiceOver by pressing Command + F5
5. Navigate to the menu and over the menu items.
6. Notice the lack of expansion for the nested menus.

Screencast demonstration:
​http://twentytwelvemenuaccessibility.wordpress.com/the-specification/

(This may apply to other bundled themes with CSS drop-down menus as well.)

[artychan]

I don't know that there is a simple solution to this. The reason VoiceOver (or any screen reader) doesn't read the sub menus is because it doesn't "exist" until the hover state is triggered.

Refer to style.css line 1519

.main-navigation li ul {
  display: none;
  /* etc */
}

You get the same issue in terms of using the keyboard and tabbing through the menu.

I would probably be more concerned about the fact that a screen reader (such as VoiceOver) will not read the menu at all when in the "mobile" mode (menu is just a button that needs to be toggled on and off).

Refer to style.css line 92

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    display: none;
}

Fixing this issue requires quite a number of rewrites to style.css and a lot of testing to make sure it works cross-browser and across devices.

I've made a stab at fixing this issue through ​a child theme, so maybe some of the code could taken from there, but even in my child theme, I've only fixed the issue as far as the menu button part. Probably will just require me sitting down to do it for submenu items as well, but it's not there yet.

[sabreuse]

Replying to sixhours:

(This may apply to other bundled themes with CSS drop-down menus as well.)

It does indeed (and to most themes out there, but we can only directly control the bundled ones!) That's the reason we created the the Accessible Dropdown Menus plugin for Twenty Ten through Twenty Thirteen (​http://wordpress.org/plugins/accessible-dropdown-menus/).

For Twenty Fourteen, we introduced a similar solution (see [25756] and [25757]) -- I suggest extending that to all the bundled themes.

Related: #27039

[lancewillett]

Duplicate of #24839.

[lancewillett]

Fixed in r27606.