WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 months ago

#51012 closed defect (bug) (fixed)

Menu dashicons should be hidden from assistive technology

Reported by: joedolson Owned by: desrosj
Milestone: 5.6 Priority: normal
Severity: normal Version:
Component: Administration Keywords: good-first-bug has-patch commit
Focuses: accessibility, administration Cc:

Description

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.

Attachments (2)

voice control.gif (907.1 KB) - added by afercia 3 months ago.
51012.diff (2.2 KB) - added by audrasjb 3 months ago.
Administration: use aria-hidden attribute on WP-Admin Menu icons to hide them from assistive technology software

Download all attachments as: .zip

Change History (9)

#1 @SergeyBiryukov
4 months ago

  • Component changed from General to Administration

#2 @afercia
3 months ago

  • Keywords needs-patch added
  • Milestone changed from Future Release to 5.6

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.

Last edited 3 months ago by afercia (previous) (diff)

#3 @afercia
3 months ago

Related: #40428.

This ticket was mentioned in PR #509 on WordPress/wordpress-develop by adriantirusli.


3 months ago

  • Keywords has-patch added; needs-patch removed

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
3 months ago

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

#5 @audrasjb
3 months ago

  • Keywords commit added
  • Owner set to audrasjb
  • Status changed from new to accepted

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

#6 @desrosj
3 months ago

  • Owner changed from audrasjb to desrosj
  • Status changed from accepted to assigned

#7 @desrosj
3 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.