Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

C15: Using CSS to change the presentation of a user interface component when it receives focus

Applicability

All technologies that support CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

Internet Explorer 6.0 and earlier versions for Windows do not support dynamic pseudo-classes for any elements except hyperlinks. Internet Explorer 7 does not support :focus styles for elements other than hyperlinks.

Firefox 1.5, Firefox 2.0 and SeaMonkey 1.1 for Windows support dynamic pseudo-classes for text input fields, text areas, radio buttons, check boxes, select elements, submit/reset buttons, and button elements. However, setting different colors or borders when a radio button or a check box receives focus is not supported.

Opera 9.02 for Windows supports dynamic pseudo-classes for text input fields, text areas, radio buttons, check boxes, select elements, submit/reset buttons, but not for button elements.

Firefox 2.0, Opera 9.02 and SeaMonkey 1.1 for Windows also support adjacent sibling selectors for form labels. Firefox 1.5, Internet Explorer 6.0 and earlier versions for Windows do not support adjacent sibling selectors for form labels.

Description

The objective of this technique is to demonstrate how the current focus can be made visually evident by changing the appearance of the focused element with CSS styling.

Examples

Example 1: Highlighting elements that receive focus

In this example, the :focus pseudo-class is used to change the style applied to input fields when they receive focus by changing the background color.

<html>
  <head>
    <style type="text/css">
      input.text:focus {
        background-color: #7FFF00; color: #000;
      }
      input[type=checkbox]:focus + label, input[type=radio]:focus + label {
        background-color: #FF6: color: #000; 
      }
    </style>
  </head>
  <body>
    <form method="post" action="form.php">
      <p><label for="fname">Name: </label>
        <input class="text" type="text" name="fname" id="fname" />
      </p>
      <p>
        <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
        <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
      <p>
    </form>
  </body>
</html>

Example 2: Displaying an outline around the element that receives focus

In this example, the :focus pseudo-class is used to apply a highly visible yellow border around links that receive focus. Use of the "outline" property instead of the "border" property ensures that the border will not perturb the page layout, since outlines are drawn on a separate layer.

<html>
  <head>
    <style type="text/css">
      a:focus {
        outline: medium solid yellow;
      }
    </style>
  </head>
  <body>
    <p>The <a href="#">link in this paragraph</a> will have a yellow
    border when it receives the focus.</p>
  </body>
</html>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each control or form label that is styled using the CSS :focus pseudo-class:

  1. Check whether the styling indicates that the control has focus when it receives focus

Expected Results