How Not To Build Menus
I’ve recently visited the following site that really surprised me in terms of how bad their accessibility is. The site is difficult to navigate even for me and I don’t have any impairments that would make it even harder. Let’s see just one particular thing, the main menu.
A main menu is probably one of the most important parts of a website, users should be able to understand it quickly and use it to get to the content they want.
Let’s see Edenred’s homepage:
I’ve already opened the Discover the group menu item.
What is the first thing that comes to your mind here?
To me, it’s definitely the opacity of the menu. You can see through it, which is problematic because there’s a picture that makes is difficult to read the menu items.
But it doesn’t end there. When I hover over the menu items, they do not change in any way, making it really difficult to see where the cursor is and what I’m about to click on.
Obviously the menu items are links as well:
But the links do not look like links. That in itself is a bad design practice when it comes to accessibility.
You can also use Web Disability Simulator Chrome extension to simulate different conditions people might have. One of them is related to how people see a website in direct sunshine.
Edenred’s menu looks like this in sunshine:
It’s not readable at all.
While colours, colour contrasts, links are important, I’d also focus on the menu itself, how it is built in the first place.
By that I mean that this is a fly-out menu, you have to hover over the main menu items in order to get to the child menu items. That in itself could be problematic because:
- thy fly-out menu won’t open if I use only a keyboard; the keyboard has no “hover” event
- even using a mouse could be problematic since some people might have a problem hovering over a certain place (I actually think this might not be a problem here since the main menu items seem to be big enough.)
One last thing I’ll look at is how the menu looks like when I enlarge the fonts. I’ll use 200 % and font only mode (in Firefox). This is the result:
You can see the menu disappeared. There’s actually the “hamburger” menu on the right side, let’s click it:
Not really a good experience. When I hover over the Discover the group menu item, this is what I saw. I don’t understand why the menu item is crossed with the red line. No child menu items opened, but that could be achieved by clicking the plus button on the right, which is pretty small and people might not be able to click it.
All in all, such a menu is pretty inaccessible no matter who sits in front of it. It is unfortunately one in many examples of a website where the people who created it did not think about even basic accessibility. That unfortunately seems to be a common problem across the Internet.