Click, click, scroll… rage click!
"Wow, I can’t even click on this menu," my husband said in frustration.
"Huh? What is it? Oh, it’s an accessibility overlay! I’ve heard of them, seen them, but never one that completely blocked the menu—hahaha!"
I couldn’t help but laugh—an accessibility overlay meant to make the website accessible, but instead, it’s making it even more inaccessible. The irony is just too good!
Accessibility Overlay is a third-party web add-on that allows user-based control of things like font sizes and colors to improve readability. You can try it on their website.
(Source: Overlay Factsheet)
After lunch at the place, I went back home excitely and put together 3 slides:
1️⃣ The problem we spotted on the mobile.
2️⃣ Solution 1. Remove the overlay that is blocking the main menu.
3️⃣ Solution 2. Shorten the length of the logo that is blocking the secondary menu.
Feel free to check the Slide Deck or Watch the Loom Video
My first email didn’t get their attention, so I followed up with them.
Hi, I'm a designer following up on your overlay blocking the menu.
This is not spam or a business email. I'm sending a friendly reminder to remove the overlay to help your customers access the menu. Hope you have a great rest of your day!
with a screenshot of one of the slides with the link to the slide deck
Guess what? They fixed it! Woohoo! 🎉
They finally took action on those two issues and unblocked both the primary and secondary menus! Even though they didn’t respond to my email, I was thrilled to see the changes. :) It was a small win 🥳!
On Mobile (Before & After)
Here’s a before-and-after comparison of a mobile view overlay: The "before" shows the overlay blocking the menu, while the "after" has the menu repositioned to the left. It's not exactly what I suggested, but it solves the issue.
On Desktop (Before & After)
Here’s the desktop view: On the left, the logo is blocking the secondary menu, and on the right, the shortened logo is no longer covering the secondary nav.
If you see similar issues, Send Them an Accessibility Remediation Love Letter 💌
At the end of the day, small wins like these remind us that progress is made through open communication. Let’s continue to spread awareness and work together to make the web more accessible for everyone. Thanks for reading, and stay tuned for more small wins from the elegantly Accessible team!
If you have any accessibility wins you like to share, please email us at info@elegantlyA.com