Menu dashicons should be hidden from assistive technology

[joedolson]

In the admin menu, images are added to support text links via icon fonts. Each icon font is contained inside a div within the link.

The container div elements that the icon fonts are attached to should use the attribute aria-hidden="true" so that they will not be exposed to assistive technology. The reading of icon fonts can be unpredictable in screen readers.

Using aria-hidden="true" in this context is semantically equivalent to defining an empty alt attribute.

[afercia]

The reading of icon fonts can be unpredictable in screen readers.

Worth clarifying icon fonts may impact any assistive technology, not only screen readers. For example, speech recognition software may be impacted as the icon fonts are part of the menu items text and thus contribute to the items accessible name computation.

I can't test Dragon naturally speaking on Windows. Testing with Voice Control on macOS does show the icon fonts prevent Voice Control to work correctly.

This issue highlights once again that interactive controls need a "clean" labelling: whether the accessible name comes from the element text or from ARIA attributes (aria-label and the like), the label must not contain extraneous content.

To reproduce:

• on macOS, enable "Voice Control" under System preferences > Accessibility > Voice Control > Enable Voice Control
• use Safari
• go to any admin page
• with Voice Control running, try to voice the following commands:
  • "Click Posts"
  • "Click Pages"
  • "Click Users"
• observe that nothing happens
• add aria-hidden='true' on all the <div class='wp-menu-image ... occurrences in src/wp-admin/menu-header.php
• build
• try to voice the previous commands again
• observe that Voice Control now understands the menu item names and clicks them

For clarity, see the animated GIF attached below where I quickly added aria-hidden="true" to the icon fonts making Voice Control work like a charm.

Moving to the 5.6 milestone as this seems a straightforward fix.

[afercia]

Related: #40428.

In this update I added aria-hidden="true" on all the <div class='wp-menu-image... occurrences in src/wp-admin/menu-header.php in order to make Voice Control works on the admin menu.

Trac ticket: https://core.trac.wordpress.org/ticket/51012

[audrasjb]

Administration: use aria-hidden attribute on WP-Admin Menu icons to hide them from assistive technology software

[audrasjb]

51012.diff refreshes the previous PR and remove some unwanted file from.

[desrosj]

In 48963:

Administration: Add the aria-hidden attribute to admin menu icons.

The admin menu icons are included as a visual element to support the text links. Without the aria-hidden=“true” attribute, they are also exposed to assistive technologies (which can process icon fonts in unpredictable ways).

This change improves the experience for multiple types of assistive technologies, including screen reading and voice control software. With aria-hidden=“true” added, the icons will not be read, and a user can now trigger a click of a top level admin menu item with commands such as “click posts”, or “click plugins”.

Props joedolson, afercia, audrasjb, adriantirusli.
Fixes #51012.