Keyboard navigation

There are many dif­fer­ent ways to use the web besides a mouse and a pair of eyes. Users nav­i­gate for exam­ple with a key­board only or with their voice.

All the func­tion­al­i­ty, includ­ing menus, links and forms should work using a key­board only. This is essen­tial for all assis­tive tech­nol­o­gy to work prop­er­ly. The only way to test this, at the moment, is man­u­al­ly. The best time to test this is dur­ing devel­op­ment.

How to keyboard test:

Tab through your pages, links and forms to do the fol­low­ing tests:

• Confirm that all links can be reached and acti­vat­ed via key­board, includ­ing any in drop­down sub­menus.
• Confirm that all links get a vis­i­ble focus indi­ca­tor (e.g., a bor­der high­light).
• Confirm that all visu­al­ly hid­den links (e.g. skip links) become vis­i­ble when in focus.
• Confirm that all form input fields and but­tons can be accessed and used via key­board.
• Confirm that all inter­ac­tions, but­tons, and oth­er con­trols can be trig­gered via key­board — any action you can com­plete with a mouse must also be per­formable via key­board.
• Confirm that focus doesn’t move in unex­pect­ed ways around the page.
• Confirm that using shift+tab to move back­wards works as well.

Resources

• The Make WordPress Accessibility Handbook
  • Test for web acces­si­bil­i­ty
• Keyboard Accessibility by WebAIM
• Workshop key­board acces­si­bil­i­ty
• Theme review acces­si­bil­i­ty-ready require­ments: Keyboard Navigation