Problem/Motivation
The 4.4.x version of the responsive menu module depends on mmenu version ^8.5.6.
There is an open issue for several years to get the 5.x version of the module working with mmenu version 9, which has accessibility fixes built in, but that issue seems stalled.
Meanwhile, thousands of sites are getting dinged with accessibility issues on every page in their site due to several avoidable errors from this module and its dependencies.
Errors caused by this module and the mmenu JS library dependency:
- 3 "Empty button" errors, one for
button.mm-tabstart and two more for the 2 instances of button.mm-tabend
- 1 "Redundant title text" alert on the
a. toggle-icon
Since the "Redundant title text" alert is handled by the patch on
🐛
Accessibility: title attribute the same as the text
Active
, we should focus this issue on solving 3 "Empty button" errors.
The offending HTML amounts to a empty buttons provisioned with no aria-label or innerHTML / text.
<button class="mm-tabstart mm-sronly" aria-hidden="true" role="presentation"></button>
<button class="mm-tabend mm-sronly" aria-hidden="true" role="presentation"></button>
Why this matters
When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button. Despite having aria-hidden, the HTML doesn't pass accessibility standards because it is an empty tag.
Standards and Guidelines
1.1.1 Non-text Content (Level A)
2.4.4 Link Purpose (In Context) (Level A)
Steps to reproduce
- Install Drupal.
- Install Responsive Menu module.
- Install a compatible theme like Bootstrap Barrio.
- Replace the default Drupal "Main navigation" block with the "Horizontal Menu" block provided by this module.
- Add the "Responsive menu mobile icon" block provided by this module.
- Add some pages to the site and build out the main menu links.
- Enable WAVE WebAIM chrome extension and run it on any page in the site.
Proposed resolution
Place default text content within the <button> element or provide an appropriate aria-label attribute.
Remaining tasks
User interface changes
API changes
Data model changes