- Massachusetts Office on Disability
At its most basic, website accessibility requires that all functions be usable with only a keyboard. For many people with disabilities, a computer mouse may be inaccessible. They may need to navigate the web and other computer applications with only a keyboard or other assistive technologies (AT).
AT such as specialty hardware and software provide people with disabilities access to the digital world. Low-tech solutions, such as mouth sticks and head wands, and more complex solutions, such as eye tracking devices, screen readers, and voice recognition software, allow people with disabilities to interact with the web. Regardless of what AT their visitors are using, websites should support keyboard-only interaction to make the content accessible to people with disabilities.
The World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG) provide recommendations for making web content more accessible to people with a wide variety of disabilities. WCAG is an internationally recognized standard.
WCAG 2.1, the latest published version, consists of 4 core principles: Perceivable, Operable, Understandable, and Robust (POUR); 13 guidelines; and 78 testable success criteria (with 3 conformance levels A, AA, AAA). WCAG 2.1 AA is the standard developers should target for conformance, with “Operable” being the guiding principle for keyboard-only accessibility.
Determining if a website is keyboard compatible does not require a specialty set of skills, software, or tools. In fact, testing for keyboard usability is one of the most basic tests anyone can perform with limited knowledge. This basic review should happen early and often during website development when issues are tracked and mitigated.
Making sure your web content is accessible using only a keyboard
Test keyboard interaction
Use your mouse to click in the address bar and then put away the mouse. When you tap the following keys, this is what should happen:
- Tab key: Each time you hit Tab, the focus should move to the next actionable item (links, buttons, menus, and form fields). Tapping Shift+Tab should bring you back to the previous item.
- Enter key: Activates links and buttons. When you tap Tab and then Enter, the action should occur. For example, a new page would open if you tap Enter when a link is selected.
- Enter key or Space bar: Activates buttons, selects and deselects checkboxes, and scrolls the page down.
- Arrow keys: Navigates grouped items (such as menus, radio buttons, and drop down lists) and scrolls the page.
Keyboard accessibility checklist
Can you answer “yes” to the following questions?
- Are all controls, links, and menus accessible using only the keyboard?
- Keyboard focus:
- When hitting the Tab key, does a visual indicator (like a border or color contrast) highlight the item on the page that currently has focus? At no time should this focus get lost or be difficult to see.
- When hitting the Tab key, does the visual focus move in the intended order? The focus should not jump randomly in an order that does not make sense to the user.
- Does the keyboard focus advance and reverse without getting “trapped on an element"?
- If there is a popup (modal), does the focus stay within the popup (modal) until you get out of it? If there is a popup (modal) appearing visually on the screen, the focus should be on the popup (modal), not on any grayed-out content behind it.
- Is there a way to dismiss the popup (the Escape key, or some other method)? Once dismissed, does your keyboard focus return to the last item selected?
- If you have autocomplete edit fields, can you bring the keyboard focus to them? Can you use the up and down arrows to navigate to an autofill option? Can you tap Enter to select a specific autofill option?
- Is there a way to skip over repetitive navigation links? For example, this may be a “skip to main content” link.
- Are mouse-over elements (“hover” and “flyout” menus) present and are they available when the item receives keyboard focus?
Resources
The Web Accessibility Initiative has more information on easy checks you can do to review accessibility of your website.
MOD offers accessibility consulting for Executive Branch agencies free of charge. Services include guidance on understanding obligations under the Enterprise Information Technology Accessibility Policy, access to a subject matter expert when planning for procurement, and small-scale AT/IT assistance to test the accessibility of electronic documents, trainings, websites, software, and more.
