Understanding Success Criterion 2.1.1: Keyboard

Understanding Success Criterion 2.1.1 Keyboard

All functionality of content should also be navigable by a keyboard or keyboard interface. This benefits users who don’t use a mouse for navigating a website.

Official Requirements

Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)

Note 1: This exception relates to the underlying function, not the input technique. For example, if using handwriting to enter text, the input technique (handwriting) requires path-dependent input but the underlying function (text input) does not.

Note 2: This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.

Why is it required?

People with mobility or dexterity impairments find it hard to navigate websites using a mouse. Therefore it is essential that all functions are accessible by keyboards or alternate keyboards. Furthermore, it also helps vision-impaired people to access your content through keyboard emulators. Keyboard emulators are assistive technologies that include speech input software, sip-and-puff software, on-screen keyboards, scanning software and alternate keyboards.

How do we fix it?

  • Tab: Navigates through all elements on the page buttons, links, form controls
  • Enter and/or spacebar: Activates the buttons, links & form controls
  • No time-based actions to perform a task when more than one key is required to activate it

Are there any exceptions?

Functions that rely on the path of the user’s movement instead of endpoints, for example, websites that support drawing.

Mistakes to avoid

  1. Widgets are not supporting keyboard
  2. Access keys are in conflict with assistive technology keys 
  3. Keeping Tabindex=-1 and making elements unreachable via sequential keyboard navigation
  4. The image opens in a new tab but it is not accessible by keyboard
  5. The dialogue boxes on the website don’t have a closing option

References

Understanding Success Criterion 2.1.1: Keyboard

Picture of Aditya Bikkani

Aditya Bikkani

Aditya is the COO of AELData, a growing technology company in the Digital Publishing and Education sectors. He is also an entrepreneur and founder of an accessibility tool called LERA. A W3C COGA (Cognitive and Learning Disabilities Accessibility) Community Member Aditya contributes to researching methodologies to improve web accessibility and usability for people with cognitive and learning disabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on Social Media

Facebook
Twitter
LinkedIn
Email
Pinterest
Reddit
WhatsApp

Related Blogs

How Accessible Is Your Website?

Check your site’s accessibility in few seconds with our FREE accessibility checker. Ensure compliance with ADA & WCAG guidelines and improve user experience across the board.

Skip to content