Making the GREYD.SUITE menu accessible
By Anne-Mieke Bovelett on October 4, 2023
Status: up to date
The journey to an accessibility ready theme and product continues
This time we decided to do this in an interview format. I rather have you hear this from Jakob Trost, the CTO at GREYD, than from me. It’s their journey that’s being shared here.
On the day we started this project, Jakob and I walked through the greyd.de site using keyboard navigation and a screen reader (voice over, on Mac) and tripped over the menu. As the first video shows, we could not see very well where we were at with the keyboard, as shown in the first video below. There was no indicator that there was a submenu under “features” and even if there had been a submenu indicator, we were unable to open the submenu by keyboard anyway. Neither could we open the hamburger menu on the top right.
As you can see in the second video below, the screen reader was announcing links we were not able to see, nor was it clear these links were residing under the hamburger menu button. Not every screen reader user is fully blind. This was confusing.
Interview with Jakob
What was your first thought when we were going through the menu to see what needed to be improved?
I was mainly curious. You were precise in your explanation and demonstration of what the expectation is of an accessible menu, and it quickly became clear to me where we needed to improve. For example, our menu was missing the focus ring. When we walked through our website, it was all recognizable. Like with the other elements, we went through. Tabbing through with the keyboard, but especially hearing how the screen reader read it was an eye-opener.
What implications did you see for pop-up and pop-out menus in that regard?
Knowing that an important aspect is that everything has to be focusable, we quickly understood what to look for. You said it yourself: it’s not about knowing everything, it’s about knowing where to find the right information.
Are you working on a mega menu as well?
In our suite, it’s fairly straightforward to create a mega menu by using a popup or popover, in which you add your menus. But you will be on your own to create it the correct way when you use headings, for example. Guidance upon creating a mega menu using a popup or a popover may be something that we consider adding to a plugin we are currently working on, that will actively guide users to create an accessible website.
What did you and your team members do to find the right information about how to create an accessible menu.
You handed us lots of informative sources, but what worked best for me was to peek under the hood of menus you said to be great examples of an accessible menu. We looked at the menus of the A11Y Collective, that of Level Level and the one from Equalize Digital. These are all companies who are proficient in accessibility!
You went the extra mile by also adding the ability to navigate through the menu with arrow keys. I know I asked if it were possible, but I’m not the one deciding. That’s your job, as CTO at GREYD. What made you decide to honor the request?
That was an easy decision. Going the extra mile is part of our philosophy. Your remark that we have to think beyond the guidelines, as these are the bare minimum, stuck with me. You told us that in regular software, many users know that you can use an arrow key to go up and down a dropdown menu. Users who did not depend on keyboard navigation, who temporarily depend on keyboard navigation because they broke an arm, for example, are quite likely to try to navigate a dropdown by arrow key.
What can you recommend to fellow developers who embark on the accessibility journey?
Don’t panic about the how. When you understand the why, it’s a lot easier to find and grasp. Do what we did. Hire an accessibility specialist who can show you how to uncover issues. I also recommend you check out the menus of the sites mentioned before.