Archived topic
Hamburger menu failing accessibility
4 replies · Started by Danny on November 11, 2019
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>
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 :)
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?
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.
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).
