WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 5 weeks ago

#47051 new defect (bug)

Twenty Nineteen theme sub-menu returns error in WAVE accessibility tool

Reported by: johnfclifford Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: needs-patch
Focuses: accessibility Cc:

Description

I'm building a site in (a child theme of) Twenty Nineteen. In the top menu, each instance of a menu item that has a child item is returning one error in the WAVE accessibility tool. The reported error is "empty button" and below is the explanation:

What It Means
A button is empty or has no value text.
Why It Matters
When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.
How to Fix It
Place text content within the <button> element or give the <input> element a value attribute.
The Algorithm... in English
A <button> element is present that contains no text content (or alternative text), or an <input type="submit">, <input type="button">, or <input type="reset"> has an empty or missing value attribute.
Standards and Guidelines
1.1.1 Non-text Content (Level A)
2.4.4 Link Purpose (In Context) (Level A)

This is the HTML that is returning the alleged error:
<button class="menu-item-link-return" tabindex="-1"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>About us</button>

Attachments (1)

button-accessibility-error.pdf (142.6 KB) - added by johnfclifford 7 weeks ago.

Download all attachments as: .zip

Change History (5)

#1 follow-up: @afercia
7 weeks ago

  • Component changed from Menus to Bundled Theme
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.2.1
  • Severity changed from minor to normal

@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:

http://cldup.com/UwlgRTNLbZ.png

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

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 weeks ago

#3 in reply to: ↑ 1 @johnfclifford
7 weeks ago

Thanks for your speedy response to my first-ever ticket. I'll await developments.
Replying to 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:

http://cldup.com/UwlgRTNLbZ.png

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

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

#4 @ianbelanger
5 weeks ago

  • Milestone changed from 5.2.1 to 5.3
  • Version changed from 5.1.1 to 5.0

Changing milestone as Bundled Themes are only updated during major releases. Also changed to version 5.0 as this was introduced in that version.

Note: See TracTickets for help on using tickets.