Your website is accessible by keyboard only, without exception

Your users have varying degrees of motor skills and may use your website with only their keyboard. Users with motor impairment, including many elderly users, need help to navigate your website.

All parts of your website must be accessible by keyboard only. That means, without a mouse or pointing device, your forms, menus, shopping cart and everything between. On top of that, you cannot require specific timings for keystrokes to access any feature.

What to do

A clean HTML and CSS website will often have keyboard accessibility without further work. This is a great example of why you need to invest in web design and development from the outset.

Tips

  • Unlike the lower-level Guideline 2.1.1, there are no exceptions here. All aspects of your website must be accessible by keyboard. It’s up to you to decide if Level AAA conformance is worth you removing any mouse-only features.
  • Unplug your mouse and make sure you can fully use your website with your keyboard.
  • Make sure no function on your website requires timed keystrokes (for example, ‘ double tap on enter within two seconds’ to submit).
  • Don’t use ‘access keys’ (assigning a navigation link to a particular key) or page-specific key commands as they can conflict with assistive technology.
  • Be wary of third-party adverts and widgets, often these are not accessible.

See also

Your website must not trap keyboard users

Your users have varying degrees of motor skills and may use your website with only their keyboard.
You must make sure that keyboard-only users can’t get stuck anywhere on your site. All parts of your website should be reachable by keyboard alone (See Guideline 2.1.1). Your users must also be able to navigate away from all parts of your website. If your users can reach a feature (such as a subscribe form) by keyboard but can’t leave it by keyboard, they are keyboard trapped.

What to do

  • Test your website to make sure you can navigate away from, as well as to, all parts of your website by keyboard only.
  • Make sure all navigation is controllable by either the ‘Tab’ or arrow keys, which is a standard many people are familiar with.

Tips

  • Unplug your mouse and make sure you can fully use your website with your keyboard.
  • It’s tempting to use non-standard navigation with a text explanation of what to do, but this isn’t worth your time. Stick to the Tab and arrow keys and the majority of your customers will already know how to use your website.
  • Be wary of third-party adverts and widgets, often these are not accessible.

See also

Your customers will have varying degrees of motor skills and will benefit from keyboard accessibility. Customers with motor impairment, including many elderly customers, need your help to navigate your website. Many of these customers will use their keyboard to move around your website.

This article explains what you need to do to meet Guideline 2.1.1 – Keyboard from the Web Content Accessibility Guidelines 2.0.

All parts of your website must pass keyboard accessibility. That means your forms, menus, shopping cart and everything between. On top of that, you cannot require specific timings for keystrokes to access any feature on your website.

What to do

  • A clean HTML and CSS website will often have keyboard accessibility without further work – a great example of why you need to invest in web design and development from the outset

Auditing keyboard accessibility

  • Unplug your mouse and make sure you can fully use your website with your keyboard
  • Make sure no function on your website requires timed keystrokes – such as double tap enter/return within two seconds to submit

A few more things

At the lowest level of accessibility (which 2.1.1 – Keyboard is), you can get away with functions that require a mouse pointer for input. These are things like free drawing tools and some types of game. Just think carefully about who you are excluding when you use these features.

One thing that gets thrown out a lot by keyboard accessibility advocates is ‘Access keys’. You’re already familiar with access keys, which is why people are quick to accept them as useful. Access keys are keyboard shortcuts like ctrl +  p to print pr ctrl + s to save.

Access keys work great in programs like Microsoft Word and Adobe Reader because they’re in a controlled environment. Out on the wild wild web, things aren’t so simple. Your customers access your website on a number of web browsers; some use Internet Explorer, some Firefox, some Google Chrome and so on… These web browsers have different levels of support for Access keys.

Frustratingly, Access keys are a good idea for keyboard accessibility with bad implementation. If you’re a regular computer user, you probably use ctrl + p  much more often than selecting the menu with your mouse pointer. WebAIM has an article about Access keys if you want to know more. My advice: avoid them.

See also

That’s all there is to Guideline 2.1.1 – Keyboard! Is there anything you’d like to add or any questions you have about keyboard accessibility? Leave a comment below and I’ll be sure to respond.