[Resolved] Buttons do not have an accessible name

[David]

Hello,

after the update from today (it does´nt mean, that this issue comes from the update) the lighthouse reports shows me an accessability issue:

*********
Buttons do not have an accessible name
When a button doesn’t have an accessible name, screen readers announce it as “button”, making it unusable for users who rely on screen readers. Learn more.
Failing Elements
button
<button class=”menu-toggle” aria-controls=”primary-menu” aria-expanded=”false” data-nav=”site-navigation”>
**********

As usually i am testing with this url:
https://sinnstiften.biz/flipchart-gestalten/

I guess that you can give the collapsed burger menu button as name, so that google (and visitor with a screen reader) is happier then.

Thank you,
David

[David]

Hi there,

try adding the ‘label’ you want to the Mobile Menu Label in Customizer > Layout > Primary Navigation.
Then add this CSS to put the label out of view:

.menu-toggle .mobile-menu {
    position: absolute!important;
    clip: rect(0,0,0,0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

[David]

Hi David,

thank you. I´ve added “menu” for the mobile caption.
I will leave it this way, because some visitors may be not yet familiar with the burger menu icon.

And in the lighthouse report my Accessibility score went up from 88 to 97 again.
Don´t know if it helps my visitors, but google likes it.

Now all of my lighthouse report lights are green again.

I thank you for the fast and excellent response,
David

[David]

Glad to be of help!

[Author]

Posts