Accessibility for Navigation

[Sabine]

Hi Tom,
I received the following accessibility error message. How and where can I install role=”presentation” for the dropdown-menu-toggle?

Title: WCAG 4.1.2: Ensures buttons have discernible text (.dropdown-menu-toggle[role=”button”])
Tags: Accessibility, WCAG 4.1.2, button-name

Issue: Ensures buttons have discernible text (button-name – https://dequeuniversity.com/rules/axe/3.5/button-name?application=msftAI)

Element path: #menu-item-1606 > a > .dropdown-menu-toggle[role=”button”]

Snippet: <span role=”button” class=”dropdown-menu-toggle” tabindex=”0″>

How to fix:
Fix any of the following:
Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element’s default semantics were not overridden with role=”presentation”
Element’s default semantics were not overridden with role=”none”
Element has no title attribute or the title attribute is empty

Environment: Chrome version 84.0.4147.125

====

This accessibility issue was found using Accessibility Insights for Web 2.20.0 (axe-core 3.5.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

[Tom]

Hi there,

Thanks for the heads up here. Will look at this for 3.0-alpha.3 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tom]

Just a heads up that alpha.3 is available and should have this fixed: https://generatepress.com/generatepress-3-0-a-new-era/

Would be great if you’re able to test it out.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sabine]

Hi Tom, great. Big praise to you! For performance, service, price level and friendliness.

Now it works in the mobile version. But it should also work in the desktop and tablet size. There the errors are still shown to me.

Sabine

[Tom]

The dropdown arrows don’t actually do anything on desktop/tablet, they’re simply presentational. Are you using the Hover dropdown type, or one of the click types?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts