Techniques for WCAG 2.0

Skip to Content (Press Enter)


SCR31: Using script to change the background color or border of the element with focus

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.


HTML and XHTML, CSS, Script

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SCR31.


This purpose of this technique is to allow the author to use JavaScript to apply CSS, in order to make the focus indicator more visible than it would ordinarily be. When an element receives focus, the background color or border is changed to make it visually distinct. When the element loses focus, it returns to its normal styling. This technique can be used on any HTML user agent that supports Script and CSS, regardless of whether it supports the :focus pseudoclass.


Example 1

In this example, when the link receives focus, its background turns yellow. When it loses focus, the yellow is removed. Note that if the link had a background color to begin with, you would use that color rather than "" in the script.

Example Code:

 function toggleFocus(el)
 { ="yellow" ? "inherit" : "yellow";


<a href="example.html" onfocus="toggleFocus(this)" onblur="toggleFocus(this)">focus me</a>



  1. Tab to each element in the page

  2. Check that the focus indicator is visible

Expected Results

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.