We’ve been working towards making our website and products more accessible. Ensuring our teams are aware of Web Content Accessibility Guidelines (WCAG) and including accessibility testing in our quality assurance process. As part of this effort, we’d like to share our experiences to document our findings and contribute to the tech community.
Our focus problem:
The mobile view of kahoot.com has a menu icon to trigger the off-canvas navigation menu. When clicked the navigation appears and the rest of the webpage is hidden behind.
- User opens off-canvas menu
- Focus remains on the menu icon
- User navigates by keyboard (tabbing)
Focus iterates through the next elements on the web-page, in this case elements on our webpage hidden behind the navigation menu.
In the bottom left of the video above you can observe the path of the focused element changing.
Links on the page behind the menu are being traversed in the focus order.
When a dialog or off-canvas navigation is opened focus of hidden elements should be prevented – the items which can be navigated by keyboard should be the same as those that can be viewed and focused visually.
This becomes a really obvious problem when using a screen reader as every (out of context) element is announced as you navigate.