You are here: Home > All Topics > Accessibility improvements in Greyd.Suite popup and popover hamburger button
From left to right: Thomas Koschwitz, Anne-Mieke Bovelett and Jakob Trost. All three are wearing dark gray sweatshirts with a white version of the GREYD logo.

Accessibility improvements in Greyd.Suite popup and popover hamburger button

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.