[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
---------------------------+----------------------------

Comment (by johnfclifford):

 Thanks for your speedy response to my first-ever ticket. I'll await
 developments.
 Replying to [comment:1 afercia]:
 > @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:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform