[wp-trac] [WordPress Trac] #47051: Twenty Nineteen theme sub-menu returns error in WAVE accessibility tool

[WordPress Trac]

#47051: Twenty Nineteen theme sub-menu returns error in WAVE accessibility tool
---------------------------+----------------------------
 Reporter:  johnfclifford  |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  5.2.1
Component:  Bundled Theme  |     Version:  5.1.1
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:  accessibility
---------------------------+----------------------------
Changes (by afercia):

 * keywords:   => needs-patch
 * component:  Menus => Bundled Theme
 * severity:  minor => normal
 * milestone:  Awaiting Review => 5.2.1


Comment:

 @johnfclifford thanks for the ticket and welcome to Trac! Looks like the
 Twenty Nineteen menu has a few things that don't work well for
 accessibility.

 I'm not sure the empty buttons are the ones in the snippet you provided
 (actually, there's an "About us" text there). Instead, seems to me the
 empty buttons are the ones with the CSS class `submenu-expand`.

 On large screens, these buttons don't say anything and don't do anything.
 Even if they have a `tabindex="-1"` attribute and they're not focusable,
 assistive technology users can get to them by other means. For a screen
 reader user, for example, hearing just "button" and observe the button
 doesn't do anything is not a great experience:

 [[Image(http://cldup.com/UwlgRTNLbZ.png)]]

 On small screens, the whole menu transforms to adapt to touch:

 [[Image(http://cldup.com/A7mkjw4up5.png)]]

 These buttons do make the sub-menus slide-in, but they're actually still
 empty. Worth reminding that many screen reader users
 [https://webaim.org/projects/screenreadersurvey7/#mobilekeyboard do use an
 external keyboard with their mobile devices].

 If this different behavior on large and small screens is desired, then on
 large screens the buttons should be removed and there should be only the
 icons. On small screens, the buttons should be displayed and have some
 meaningful text.


 Other things noticed that don't work well:
 - `aria-expanded`: seems to me on large screens it's never updated. On
 small screens it is updated, but seems to me the true/false values are
 randomly incorrect depending on the sub-menus state.
 - [https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup aria-haspopup] should
 be used only for controls that require user interaction: on large screen
 no user interaction is required so this attribute should be removed. It
 should be added only on small screens where user interaction is required
 to expand the sub-menus.

 @kjellr @allancole @laurelfulford when you have a chance, would you mind
 having a look at this please? Thank you.

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