2.1.1: Keyboard
Guideline 2.1.1 "Keyboard" under WCAG 2.0 ensures that all functionality of web content is operable through a keyboard interface. This guideline is crucial for users who rely on keyboard navigation due to physical disabilities, visual impairments, or other conditions that prevent them from using a mouse. Ensuring keyboard accessibility improves usability and inclusivity for a broader audience.
Importance of 2.1.1: Keyboard Success Criterion
Keyboard accessibility is vital for users who cannot use a mouse due to physical disabilities, including motor impairments and conditions like repetitive strain injury (RSI). It also benefits users with visual impairments who navigate using screen readers and individuals who prefer keyboard shortcuts for efficiency. Ensuring all interactive elements and functionalities are accessible via the keyboard creates an inclusive environment, allowing all users to interact with web content seamlessly. Moreover, it aligns with accessibility standards, reducing legal risks and enhancing user satisfaction.
Primary Use Cases and Requirements Under Guideline 2.1.1: Keyboard (Level A)
Use Case 1: Navigation Menus
Users should be able to navigate through a website’s menu using the Tab key and arrow keys.
How to Test (Without Assistive Technology): Use the Tab key to navigate through the menu items. Ensure that each menu item receives focus and is accessible. Use arrow keys to navigate through submenus if applicable. Use the Enter or Space key to activate menu items.
How to Test (With Assistive Technology): Turn on a screen reader and use the Tab key and arrow keys to navigate through the menu items. Verify that the screen reader announces each menu item correctly and that all items are accessible. Use the Enter or Space key to activate menu items.
Use Case 2: Forms and Input Fields
Users should be able to fill out and submit forms using only the keyboard.
How to Test (Without Assistive Technology): Navigate through form fields using the Tab key. Ensure that all input fields, checkboxes, radio buttons, and submit buttons are accessible and operable via the keyboard. Press Enter to submit the form.
How to Test (With Assistive Technology): Turn on a screen reader and navigate through form fields using the Tab key. Verify that the screen reader announces each form element and that all elements are accessible and operable via the keyboard. Press Enter to submit the form.
Use Case 3: Interactive Elements
All buttons, links, and other interactive elements should be accessible via the keyboard.
How to Test (Without Assistive Technology): Use the Tab key to navigate through all interactive elements on the page. Ensure each element can be activated using the Enter or Space key.
How to Test (With Assistive Technology): Turn on a screen reader and use the Tab key to navigate through all interactive elements. Verify that the screen reader announces each element and that all elements can be activated using the Enter or Space key.
Use Case 4: Modal Dialogs
Modal dialogs should be accessible and operable using only the keyboard.
How to Test (Without Assistive Technology): Open a modal dialog and use the Tab key to navigate through its content. Ensure that focus is trapped within the dialog until it is closed and that it can be closed using the Esc key.
How to Test (With Assistive Technology): Turn on a screen reader and open a modal dialog. Use the Tab key to navigate through the dialog content. Verify that the screen reader announces each element and that focus is trapped within the dialog until it is closed. Ensure it can be closed using the Esc key.
Use Case 5: Sliders and Carousels
Sliders and carousels should be navigable and controllable using the keyboard.
How to Test (Without Assistive Technology): Use the Tab key to navigate to the slider or carousel. Use the arrow keys to move between slides and ensure controls like play/pause buttons are operable via the keyboard using the Enter or Space key.
How to Test (With Assistive Technology): Turn on a screen reader and navigate to the slider or carousel using the Tab key. Use the arrow keys to move between slides and verify that the screen reader announces each slide. Ensure controls like play/pause buttons are operable via the keyboard using the Enter or Space key and announced correctly.
Use Case 6: Drop-down Menus
Drop-down menus should be accessible and navigable using the keyboard.
How to Test (Without Assistive Technology): Use the Tab key to focus on the drop-down menu. Use the arrow keys to navigate through the options and the Enter key to select an option.
How to Test (With Assistive Technology): Turn on a screen reader and use the Tab key to focus on the drop-down menu. Use the arrow keys to navigate through the options and verify that the screen reader announces each option. Use the Enter key to select an option.
Use Case 7: Media Players
Media players should provide keyboard-accessible controls for play, pause, volume, and other settings.
How to Test (Without Assistive Technology): Use the Tab key to navigate through media player controls. Ensure all controls are accessible and operable using the Enter or Space key.
How to Test (With Assistive Technology): Turn on a screen reader and use the Tab key to navigate through media player controls. Verify that the screen reader announces each control and that all controls are operable using the Enter or Space key.