Step 1: Understand your goals
Keyboard accessible - Users can interact with your website using a keyboard instead of a mouse. This includes keyboard-friendly calculators, calendar date-pickers, and time pickers. You also have a keyboard-accessible alternative for those components, such as allowing users to type in a date and time.
Visible focus indicator - Users can see which element they are on thanks to some indicator such as an outline, underline, or significant change in font size. They don’t rely on changing text color.
Keyboard accessibility resources
Understanding Guideline 2.1: Keyboard Accessible on w3.org
Step 2: Watch the video
Many people with motor disabilities can’t use a mouse. They rely on their keyboard’s Tab, Enter, spacebar, and arrow keys. Try navigating your website using only the keyboard. If you can’t reach all the content, buttons, links, and forms, then your site needs improvement.
Step 3: Practice your new skill
Basic tests
- Navigate to your web page or document.
- Using your keyboard, press the Tab key to move from one interactive element to the next. Press Shift and Tab at the same time to move backward. (An interactive element is something that can be clicked on with a mouse.)
- Verify that you can tell where you are on the page at all times (visible focus indicator). This can be an outline, underline, or font size change, for example. It cannot be only a change in the color.
- Use the spacebar or Enter key to “click” on each button or link and verify they work just as a mouse click would work.
Advanced test
If the page has pop-up windows (modals), use the keyboard to open them and tab through them. Verify that you stay in the pop-up window until you close it.