Accessibility improvements in Greyd.Suite popup and popover hamburger button
By Anne-Mieke Bovelett on December 7, 2023
Status: up to date
From keyboard trap to being accessible
In the old situation, these elements were not accessible and resulted in keyboard traps. Below you find an example of what happened, with the hamburger menu.
Old situation
The first video shows the keyboard navigation, the second video shows the screen reader experience.
The keyboard trap
Testing showed that it was not possible to open the hamburger menu by keyboard.
The screen reader experience
When we ran the screen reader, it turned out that it ignored the hamburger menu completely.
The new and improved button
The focus shifts to the right place. And now both popup and popover elements can also be used to make your own mega menu. And additionally: you can add an aria-label to tell the user what the button will trigger. In this case I simply added “menu” as the label.
Good reasons not to use popup or popover
Always ask yourself if content shouldn’t be visible by default. Content that is meant for conversion should not be hidden under an additionial click. If you feel the need to use popups or popovers to convey information which otherwise would not fit the screen, maybe you need to rethink your design. Anything that’s obvious will be clicked faster.
In the end, your visitors are looking for fulfilment of the promise of your website to get them what they want or need. Websites are functional. Popups and popover can be like that overly talkative sales person in a store who does not get to the point, making you want to walk out.
