Definition for WCAG 2.0 success criterion 2.4.7
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
The purpose of this success criterion is to help a (sighted) person know which element among multiple elements has the keyboard focus.
A keyboard focus indicator can take different forms. By default, most browsers show an outline around focusable elements, For instance, in Internet Explorer this takes the form of a dotted 1px outline, while in Chrome it's a thick blue solid outline. In the case of text entry fields, browsers generally show at least a caret within the text field to indicate that the text field has the keyboard focus.
Note: if there is only one keyboard actionable control on the screen, the success criterion would be met because the visual design presents only one keyboard actionable item. In that case, the criterion can be marked immediately as a pass.
Note: if there are no user interface components, or if there are user interface components, but these are not currently keyboard operable (a failure of 2.1.1 Keyboard (level A)), this criterion is marked as not applicable.
Note: for success criteria involving keyboard testing, ensure that your browser/OS is set to allow for full keyboard navigation. In macOS in particular, go to System Preferences > Keyboard > Shortcuts and ensure that the "Full Keyboard Access" option is set to "All controls".
Note: the wording used in WCAG 2.0 here is rather vague and arguably subjective. What constitutes "visible" is not unambiguously defined. This can lead to varying test results, depending on individual testers. Going purely by a literal reading of the specification, any focus indication (i.e. any change, no matter how subtle, that causes a change of even a single pixel on the screen) provided a component receives focus would count as a pass, even though it would not be of any real-world benefit to users. While testers should only base their pass/fail determination based on this literal interpretation, they should also strive to provide best practice suggestions (even in the case of a nominal pass) to authors on how the focus indication should be improved (for instance, suggesting that if a only a change of color is used as focus indication, that this color difference should have an appropriate contrast compared to the non-focused color; that any outline/border should be thick enough and visible enough against the background; etc.)
Testing success criterion 2.4.7
Input into spreadsheet
- Fail
- No visible indication of focus. Record the nature of the failure:
- Not all focusable components have a visible focus indication when focused.
- Visually hidden elements fall into the keyboard tab order.
- Pass
- All focusable components have a visible focus indication when focused.
How to test
- Use keyboard navigation (TAB and SHIFT+TAB) to move focus through all focusable components of the page.
- For widgets/components with specific keyboard interactions (e.g. use of cursor keys to move focus between tabs in a tabbed navigation), use those specific keyboard interactions to move focus through those components.
- Visually verify that focusable components have a visible focus indication when focused.