Menu Toggle Button – Lighthouse Report

  • Resolved lmcarleton

    (@lmcarleton)


    4 years, 9 months ago

    Hi. I’m using the Primer Theme by GoDaddy. I generated a report for my homepage using the Google Lighthouse DevTool. The Accessibility checker noted one failing element for names and labels.

    The warning stated “button doesn’t have an accessible name”.

    Failing Elements
    div
    <div class=”menu-toggle” id=”menu-toggle” role=”button” tabindex=”0″><div></div><div></div><div></div></div>

    How can you correct the error?

    Thank You, Linda

Viewing 1 replies (of 1 total)
  • Thread Starter lmcarleton

    (@lmcarleton)

    I got it!

    To fix the error “button doesn’t have an accessible name” you need to edit the mobile-menu.php page located in the parts (primer > templates > parts) folder.

    Note; you should use a child theme to make changes.

    Open mobile-menu.php in your editor and look for the following code, for me, it was line 11.

    <div class="menu-toggle" id="menu-toggle" role="button" tabindex="0"

    after

    role=button

    add the aria-label code

    aria-label="Navigation Button"

    The code should look like this

    <div class="menu-toggle" id="menu-toggle" role="button" aria-label="Navigation Button" tabindex="0"

    Save mobile-menu.php in your child theme parts (primer > templates > parts) folder and upload it to your server.

    The menu will now pass The Google Lighthouse Accessibility checker.

    ?? Linda

Viewing 1 replies (of 1 total)
  • The topic ‘Menu Toggle Button – Lighthouse Report’ is closed to new replies.