WordPress.org

Make WordPress Core

Opened 21 months ago

Closed 19 months ago

Last modified 19 months 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:

Description

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

Download all attachments as: .zip

Change History (23)

comment:1 rianrietveld21 months ago

  • Component changed from General to Accessibility

comment:2 azaozz21 months 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 21 months ago by azaozz (previous) (diff)

azaozz21 months ago

comment:3 azaozz21 months ago

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.

comment:4 hidgw21 months ago

  • Cc hidgw added

comment:5 rianrietveld21 months 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,
Rian

azaozz21 months ago

comment:6 azaozz21 months 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 wonderboymusic21 months ago

  • Keywords has-patch added

comment:8 stickbear21 months ago

  • Cc shane@… added

azaozz21 months ago

comment:9 azaozz21 months ago

Refreshed the patch after the recent css cleanups.

comment:10 ocean9021 months ago

  • Cc ocean90 added

comment:11 scribu21 months ago

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

comment:12 azaozz21 months 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 scribu21 months ago

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

Last edited 21 months ago by scribu (previous) (diff)

comment:14 rianrietveld21 months ago

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

comment:15 azaozz20 months 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 nacin19 months 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.

azaozz19 months ago

comment:17 azaozz19 months ago

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

comment:18 azaozz19 months 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 azaozz19 months ago

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

Note: See TracTickets for help on using tickets.