Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

C16: Changing the background color or border of the element with hover and focus

Applicability

(X)HTML, CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

Internet Explorer does not support the :focus CSS pseudo class. Include the :active CSS pseudo class to achieve the same effect as :focus in Internet Explorer for (X)HTML links (a element).

Description

The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets to provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing device . Highlighting the element that has focus or is hovered over can provide information such as the fact that the element is interactive or the scope of the interactive element.

Providing visual feedback may be possible through more than one mode. Usually, it is attained through using a mouse to hover over the element or a keyboard to tab to the element.

Examples

Example 1: Link elements

In this example, mouse and keyboard focus indicators have been applied to the link elements. CSS has been used to apply a background color when the link elements receive focus.

Here is the content to be displayed:

<ul id="mainnav">
 <li class="page_item">Home</li>
 <li class="page_item"><a href="/services">Services</a></li>
 <li class="page_item"><a href="/projects">Projects</a></li>
 <li class="page_item"><a href="/demos">Demos</a></li>
 <li class="page_item"><a href="/about-us">About us</a></li>
 <li class="page_item"><a href="/contact-us">Contact us</a></li>
 <li class="page_item"><a href="/links">Links</a></li>
</ul>

Here is the CSS that changes the background color for the above elements when they receive mouse or keyboard focus:

#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
  background-color: #DCFFFF;
  color:#000066;
}

Example 2: Input elements

In this example, mouse and keyboard focus indicators have been applied to the form input element. CSS has been used to apply a background color and border when the input element receives focus.

Here is the content to be displayed:

<input type="text" size="20" id="search" name="searchtext"/>

Here is the CSS that changes the background color and border for the above input element when it receives mouse or keyboard focus:

input:hover, input:focus {
 background-color: #FEFF7F;
 border: 1px solid #FF0000;
 color:#000000;
}

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each element able to attain focus:

  1. Using a mouse, hover over the element

  2. Check that the background or border changes color

  3. Move the mouse away from the object before atempting keyboard focus.

  4. Using a keyboard, tab to the element

  5. Check that the background or border changes color

Expected Results