the keyboard navigation project

Hello and welcome! This website is a demonstration of things that commonly go wrong with keyboard accessibility on the web.

How does it work?

Basic keyboard navigation happens by using the tab key to go through all the interactive elements on the page. These are most often links, buttons and form fields. HTML anchors, buttons and inputs all natively support keyboard interaction, so the structure is already in place for keyboard navigation to be possible. However, these native affordances are very easy to break.

The sections on this website describe and enact common problems encountered by keyboard users and provide straightforward solutions for these problems. The top navigation bar is used for demonstration purposes on the Visibility and Focusability sections; attempting to tab through it will reveal the issue being tackled on each page. For the Shortcuts section, the demonstration centres on skip links situated before the nav bar.

How to get around

Each section should be read sequentially, as they each start with a problem and work towards a solution. Visibility precedes Focusability as they both tackle the nav bar; Shortcuts is independent of the preceding sections.

As the top nav is inaccessible on the pages where it is being used as a demonstration, on these pages there is a "skip to navigation" link that reveals an accessible version of the nav bar beneath the main content.

Additional info

This project is an outgrowth from a demo I created for a talk about keyboard navigability at Web Directions 2015. It is very much a work in progress and I plan to add further problems and solutions over time.

Questions?

Tweet stuff at me or email isabel at tellthemachines dot com.