Checkpoint 3.14 - Core

Visual focus feedback provides important cues for some user groups, particularly those who can see the screen but cannot use a mouse and tab through the interactive elements on a page. In some ways it is more important to provide this feedback for keyboard users rather than for mouse users since mouse-hover generally results in a change of pointer by default (from arrow to pointing finger) which is more visible than some of the default keyboard effects such as a faint dotted line.

In addition, mouse users generally know where the mouse pointer is situated, as the movement of the pointer is controlled by the user. In contrast to this, the order of focus when a keyboard user tabs from element to element is controlled by the (X)HTML code.

The default visual focus indication that an interactive elements displays is controlled by the browser, but can be changed through CSS.

Requirement

Tabbing a hyperlink must give the same visual cues as when using the mouse to hover over the link.

Recommendation

As per the example below, implement the CSS pseudo-classes :active and :focus for interactive elements as per the :hover pseudo-class. This ensures the visual keyboard focus is equivalent for mouse and keyboard users.

Example

Suggested CSS code:

   a:hover, a:focus, a:active {
      color: red;
      text-decoration: underline;
   }

Checking Tool

• Browse through the web page to ensure that redundant text links are provided for each active region of a client-side image map.

Information Source

The original source of this information is located on the W3C web site  (http://www.w3.org/TR/WCAG10-TECHS/#gl-own-interface)