[Resolved] Hamburger menu failing accessibility

Home Forums Support Hamburger menu failing accessibility

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1059927
    Danny

    The hamburger menu button is failing lighthouse accessibility. Any suggestions on how to fix this?

    Failing Element:

    button
    <button class="menu-toggle" aria-controls="mobile-menu" aria-expanded="false">

    Copy of button code:
    <button class="menu-toggle" aria-controls="mobile-menu" aria-expanded="false"> <span class="gp-icon icon-menu-bars"><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z"></path> </svg><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path> </svg></span> <span class="mobile-menu"></span> </button>

    #1060069
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    We’ve actually addressed this in GP 2.4.0, which you can update to now if you’d like: https://generatepress.com/generatepress-2-4-0/

    Let me know if you need more info 🙂

    #1060097
    Danny

    Hey Tom, I updated. I am still using a child theme for my custom css, should I remove this?

    Also, can you point me in the right direction on how to rectify this accessibility issue?

    #1060109
    Danny

    I didn’t see anything I could edit . I’m getting accessibility score of 97, prior it was 84. Getting a warning on contrast of buttons.

    #1060831
    Tom
    Lead Developer
    Lead Developer

    You likely still need your custom CSS (depending on what it is).

    The update fixed that issue automatically, so there’s nothing else for you to do there.

    Button contrast is something you can address by tweaking your buttons colors (background and text).

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.