Make WordPress Core

Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#21349 closed enhancement (fixed)

Accessibility/semantics of the HTML structure of the main menu in Admin

Reported by: rianrietveld Owned by: azaozz
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-patch
Focuses: Cc:


The HTML structure of the main menu in Admin is confusing for screen readers.
A problem for the screenreader user is, that the reader can't determine the structure of the list items. What is a main menu item and what a sub item?
The reason for this is that the sub items are placed into separate div’s and not directly as li tags relating into the menu list.
For each subitem two links are added, one for the image and one for the link itself.

Maybe it's better to put each sub item with one link into a <li>, adding the image and the mouse over effects by CSS?

Attachments (4)

21349.patch (29.7 KB) - added by azaozz 6 years ago.
21349-2.patch (46.5 KB) - added by azaozz 6 years ago.
21349-3.patch (37.4 KB) - added by azaozz 6 years ago.
21349-4.patch (1.6 KB) - added by azaozz 5 years ago.

Download all attachments as: .zip

Change History (23)

#1 @rianrietveld
6 years ago

  • Component changed from General to Accessibility

#2 @azaozz
6 years ago

  • Component changed from Accessibility to Menus
  • Milestone changed from Awaiting Review to 3.5
  • Type changed from defect (bug) to enhancement
  • Version 3.4.1 deleted

Yes, the menu has gone through several updates during the last few years making its structure rather complex. We were just talking about this yesterday in IRC. It would be good to simplify the HTML and CSS there, that would make it better for screen readers and for touch devices.

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

6 years ago

#3 @azaozz
6 years ago

In 21349.patch:

  • The main improvement is the HTML structure of the menu. It is simplified a lot. Now the items are:
  • Visibly there are no changes to the fly-outs or to how the menu functions.
  • The fly-outs when the menu is folded have been moved few pixels away from the icons so the click targets are a bit larger and their "headers" are clickable.
  • Few minor visual glitches are fixed.

The CSS and HTML is back-compat for adding or replacing menu icons and hiding (with JS or CSS) of menu and submenu items.

Related #12718.

#4 @hidgw
6 years ago

  • Cc hidgw added

#5 @rianrietveld
6 years ago

  • Cc rian@… added

Hi Andrew,

Thank you very much for this!

About the fly-outs:
The most convenient and usable for screen readers will be not to hide the sub menu's, but to keep them always readable.
So, not hide them with style display is none, but with techniques described in e.g. http://webaim.org/techniques/css/invisiblecontent/

Kind regards,

6 years ago

#6 @azaozz
6 years ago

Replying to rianrietveld:

About the fly-outs:
The most convenient and usable for screen readers will be not to hide the sub menu's, but to keep them always readable...

Done in 21349-2.patch. Also added :focus styles to open, close, highlight the menu items. With this the menu works very well by only using the tab key.

Other improvements include support for folding and unfolding the menu on narrow screens (tablets, etc.) and full no-js support (folded and unfolded).

#7 @wonderboymusic
6 years ago

  • Keywords has-patch added

#8 @stickbear
6 years ago

  • Cc shane@… added

6 years ago

#9 @azaozz
6 years ago

Refreshed the patch after the recent css cleanups.

#10 @ocean90
6 years ago

  • Cc ocean90 added

#11 @scribu
6 years ago

If the current look and feel can be pulled off without all the extra divs, +1 from me.

#12 @azaozz
6 years ago

You mean the three divs inside the <a> above or the two wrapper divs that used to be around the submenu <ul> and are gone in this patch?

#13 @scribu
6 years ago

I meant the divs that wrapped submenu <ul>s, i.e. +1 for 21349-3.patch.

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

#14 @rianrietveld
6 years ago

Thank you all for your effort, this is great :)

#15 @azaozz
6 years ago

In [21574]:

Improve the layout and accessibility of the admin menu: simplify the HTML structure, move the submenus off the viewport (still visible for screen readers) instead of hiding them with display: none, make it possible to unfold the menu on small/narrow screens, see #21349

#16 @nacin
5 years ago

Anything left here?

I recall there being some possible issues with plugins targeting .wp-menu-image a or some similar selectors. (IRC convo here.) We should ready content for a post on make/core.

5 years ago

#17 @azaozz
5 years ago

Only updating the documentation/inline comments to explain the use of 'div' instead of an URL.

#18 @azaozz
5 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [21877]:

Admin menu: add phpdoc/inline comments describing the usage of the param $icon_url in add_menu_page(), add string 'none' to be used when a menu icon is added from CSS, switch core items in the admin menu to use 'none', fixes #21349

#19 @azaozz
5 years ago

Added 'none' as discussed in #wordpress-dev.

Note: See TracTickets for help on using tickets.