Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 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 3 years ago.
21349-2.patch (46.5 KB) - added by azaozz 3 years ago.
21349-3.patch (37.4 KB) - added by azaozz 3 years ago.
21349-4.patch (1.6 KB) - added by azaozz 3 years ago.

Download all attachments as: .zip

Change History (23)

comment:1 @rianrietveld3 years ago

  • Component changed from General to Accessibility

comment:2 @azaozz3 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 3 years ago by azaozz (previous) (diff)

@azaozz3 years ago

comment:3 @azaozz3 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.

comment:4 @hidgw3 years ago

  • Cc hidgw added

comment:5 @rianrietveld3 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,

@azaozz3 years ago

comment:6 @azaozz3 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).

comment:7 @wonderboymusic3 years ago

  • Keywords has-patch added

comment:8 @stickbear3 years ago

  • Cc shane@… added

@azaozz3 years ago

comment:9 @azaozz3 years ago

Refreshed the patch after the recent css cleanups.

comment:10 @ocean903 years ago

  • Cc ocean90 added

comment:11 @scribu3 years ago

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

comment:12 @azaozz3 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?

comment:13 @scribu3 years ago

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

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

comment:14 @rianrietveld3 years ago

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

comment:15 @azaozz3 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

comment:16 @nacin3 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.

@azaozz3 years ago

comment:17 @azaozz3 years ago

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

comment:18 @azaozz3 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

comment:19 @azaozz3 years ago

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

Note: See TracTickets for help on using tickets.