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

[rianrietveld]

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?

[azaozz]

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.

[azaozz]

In 21349.patch:

• The main improvement is the HTML structure of the menu. It is simplified a lot. Now the items are:

  <li.menu-top>
    <a>
      <div.wp-menu-arrow">
      <div.wp-menu-image">
      <div.wp-menu-name">
    </a>
    <ul.wp-submenu>
      <li>
      <li>
      ....
    </ul>
  </li>
  

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

[rianrietveld]

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,
Rian

[azaozz]

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

[azaozz]

Refreshed the patch after the recent css cleanups.

[scribu]

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

[azaozz]

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?

[scribu]

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

[rianrietveld]

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

[azaozz]

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

[nacin]

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.

[azaozz]

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

[azaozz]

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

[azaozz]

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