[wp-trac] [WordPress Trac] #51012: Menu dashicons should be hidden from assistive technology

[WordPress Trac]

#51012: Menu dashicons should be hidden from assistive technology
-------------------------------------+-------------------------------------
 Reporter:  joedolson                |       Owner:  (none)
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  5.6
Component:  Administration           |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  good-first-bug needs-    |     Focuses:  accessibility,
  patch                              |  administration
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  good-first-bug => good-first-bug needs-patch
 * milestone:  Future Release => 5.6


Comment:

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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51012#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform