This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

Using CSS to highlight the focused element

From WCAG WG
Jump to: navigation, search


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

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.
  1. step 1
  2. step 2
  3. 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.