WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#27011 closed defect (bug) (duplicate)

Twenty Twelve: (Sub) Menus inaccessible via Apple VoiceOver

Reported by: sixhours Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.5
Component: Bundled Theme Keywords:
Focuses: Cc:
PR Number:

Description

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

Change History (5)

#1 @SergeyBiryukov
6 years ago

  • Version changed from trunk to 3.5

#2 @artychan
6 years ago

  • Summary changed from Twenty Twelve: Sub Menus inaccessible via Apple VoiceOver to Twenty Twelve: (Sub) Menus inaccessible via Apple VoiceOver

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 (though it looks like that's being fixed in #24839 ).

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.

A possible solution is to do something similar to the patch under ticket #27039 (for twentythirteen theme)

Last edited 6 years ago by artychan (previous) (diff)

#3 in reply to: ↑ description @sabreuse
6 years ago

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

#4 @lancewillett
6 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #24839.

Note: See TracTickets for help on using tickets.