Using CSS to highlight the focused element
Status
- New technique.
- @@ Link to WBS when surveyed by group
- @@ Notes on work still needed before the technique is ready to publish, such as user agent support notes, etc.
Applicability
It is appropriate to use this technique when you wish to highlight the focused element to make it stand out or create sufficient contrast.
This is a CSS technique.
WCAG references
- navigation-mechanism: SC 2.4.7 Focus Visible (advisory?)
- navigation-mechanism: SC 2.4.7 Focus Visible (advisory?)
- visual-audio-contrast SC 1.4.3 Contrast Minimum (advisory?)
User Agent and Assistive Technology Support Notes
Supported by all major browsers.
Description
The objective of this technique is to highlight the focused element to increase the distinguishability of the interactive element and to aid in navigation.
Examples
CSS is used to change the background of a link. CSS is used to change the background of an input field.
Code sample. Be sure to put a space at the beginning of each line, and manually wrap lines so they don't push out to the right.
This technique is shown in operation in the working example of {technique or example title}. The source code of {technique or example title} is also available.
Resources
Provide a list of links to external resources, if any.
Related Techniques
C15: Using CSS to change the presentation of a user interface component when it receives focus
Tests
Describe how to test reliably that the technique has been applied, or that it has not been applied. If there is more than one type of test procedure, copy the entire section including the "Tests" header, and provide information about the type of test in this space before the "Procedure" header.
Procedure
If there are any prerequisite tests, list passing them as a required first step in the procedure. Provide an ordered list of steps, with at least one step to check for a particular condition.
- step 1
- step 2
- check that xyz
Expected Results
Indicate which step(s) from the test procedure must evaluate to true. For failure techniques, use wording like "If check #2 is false, then this failure condition applies and the content fails this success criterion."
- #3 is true
Test Files
Provide test files here. Currently, techniques do not reference test files, but we may do something with them in the future. Note that working examples (including source code) do not go here, they should be referenced in the examples section.