Recently I’ve been doing a lot of research in web accessibility, and it’s lead me to testing web pages more thoroughly. I’ve been testing keyboard-only navigation a lot. Keyboard-only input is how most screen reader users interact with the web, as well as many alternative input and mouse-less users.
This afternoon I was testing a new feature I want to add to Ind.ie’s accessible video player, and started moving down our style guide (work in progress!) page, tabbing through the links. Our style guide is really long, so I’ve added skip links at the top of the page, allowing you to jump to the relevant section without having to scroll such a long way. Skip links are very common as an accessibility feature to skip past lengthy navigation to get straight to the page content. They’ve also become a common form of navigation used on one-page sites that have a lot of content on one page.
The code usually looks something like:
<a href="#main-content">Skip to content</a> ... <div id="#main-content"> ... </div>
What’s the problem?
Some browsers don’t support skip links in this way. After some very quick tests, I found both Safari and Chrome don’t change the keyboard focus to the visual focus area when a user follows a skip link. This means you might be looking at the section on branding, but the keyboard focus is still on the navigation at the top of the page. If you tab to the next item, your visual focus will scroll right back to the top of the page. A few web searches later and I find this isn’t a new problem at all.
The difference between visual and actual focus could be an irritation to any sighted users, but for screen readers users, it makes skip links utterly useless. They’re not actually skipping at all.
How can we fix this?
Having a read through this Webkit bug report, there’s seems to be cross-platform issues and implications. There’s no web standard for skip links, so there’s no guidance for browsers to follow.
Without consistent behaviour for focus on skip links, they’re little value to the wider audience on the web.
Other sites posting on this issue:
- WebAIM keyboard accessibility (October, 2013)
- Fixing “Skip to content” links (January, 2013)
- Skip links and other in page links in WebKit browsers (March, 2012)
- Keyboard Navigation in Mac Browsers (useful for knowing how to test)