Keyboard testing a preferences form
Investigate a communication-preferences form and find four problems that affect keyboard access, operation, focus order, or focus visibility.
- Difficulty:
- beginner
- Estimated time:
- 15 minutes
Objectives
- Navigate a form systematically in both directions without using a pointer.
- Test whether visible controls can be reached and operated with expected keys.
- Assess focus order and visible focus throughout a task.
- Record keyboard findings with reproducible key sequences.
Instructions
Use the Testing keyboard accessibility method to review the communication-preferences form. Start the exercise from the Exercise workspace.
- Begin before the first control and use only your keyboard.
- Navigate forward and backward through every visible control.
- Try to operate each control with the keys you expect it to support.
- Observe the order in which focus moves and whether focus remains visually identifiable.
- Find four keyboard accessibility problems.
- For each finding, record the affected control, the keys you pressed, what you expected, and what happened instead.
Avoid inspecting the source until you have completed the keyboard test. Return to this page whenever you need a hint or are ready to review the solution.
Exercise workspace
Communication preferences form exercise
The exercise opens on a separate page. Return to this page whenever you need a hint, or when you are ready to continue and review the solution.
You can open the exercise in a new tab if you want to keep these instructions and hints available.
Hints
- Compare the visible control sequence with the sequence that receives focus.
- Try both Enter and Space on anything that looks or announces itself as a button.
- Watch the page rather than only counting Tab presses; one control loses its visible focus treatment.
Solution
The form contains four deliberately created keyboard accessibility problems.
Preview preferences is skipped
The visible Preview preferences control responds to pointer clicks but is not in the sequential focus order. A keyboard user cannot reach or operate it. Use a native button, or provide equivalent semantics, focusability, and keyboard activation when a native element cannot be used.
Delivery frequency cannot be activated with a keyboard
The custom Delivery frequency control receives focus and identifies itself as a button, but Enter and Space do nothing. Its click behavior needs equivalent keyboard activation; using a native button would provide that behavior automatically.
Delivery help loses its focus indicator
The Show delivery help button works with the keyboard, but its focus outline and replacement focus styles are removed. Keep the browser focus indicator or provide a clearly visible custom indicator against every background where the control appears.
Positive tabindex values change the focus order
Save preferences and Email address receive focus before controls that appear earlier in the page. Remove positive tabindex values and arrange the document order so the natural keyboard sequence follows the visible and logical form sequence.