Opened 4 years ago
Closed 4 years ago
#51012 closed defect (bug) (fixed)
Menu dashicons should be hidden from assistive technology
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (9)
This ticket was mentioned in PR #509 on WordPress/wordpress-develop by adriantirusli.
4 years ago
#4
- 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
@
4 years ago
Administration: use aria-hidden
attribute on WP-Admin Menu icons to hide them from assistive technology software
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:
aria-hidden='true'
on all the<div class='wp-menu-image ...
occurrences insrc/wp-admin/menu-header.php
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.