Web checklist

Checkpoint AA2.4.7: *WCAG 2.0 AA* Focus Visible

Any keyboard operable user interface has a mode of operation in which the keyboard focus indicator is visible.


Rationale

This checkpoint ensures that the keyboard focus indicator can be visually located. A distinguishable visual focus indicator helps keyboard-only users locate the point of focus when navigating a Web page.

Required development and unit test techniques


To comply with this checkpoint, you must meet at least one of the following techniques. These techniques are defined in WCAG 2.0 Level AA Success Criterion 2.4.7 (link resides outside of ibm.com).

  1. User agent indicator: Use user interface components that are highlighted by the user agent when they receive focus.
  2. Using CSS to change the presentation of a user interface component when it receives focus such that the focus indicator is highly visible and perceivable.
  3. Platform default indicator: Use the default focus indicator for the platform so that high visibility default focus indicators will carry over.
  4. Author-supplied indicator: Use an author-supplied, highly visible and perceivable focus indicator.
  5. Use script to change the background color or border of the element with focus.

Note: The examples presented in the techniques are not exhaustive. The examples are meant to illustrate the spirit of this checkpoint. All focus indicators must be highly visible and distinguishable.

General examples

  1. User agent indicator: Implement user interface components that are highlighted by the user agent when they receive focus.

    To comply with technique 1, you must implement the following example.

    General example 1

    When a text-input field receives focus, the browser displays a blinking vertical bar in the field to indicate that the field has focus. When a link receives focus, a one-pixel dotted-black line appears around the link to indicate that the link has focus.

    Note for iOS platform: When VoiceOver is active, mobile Safari displays a solid black line around elements having focus (including text elements). When a text field receives focus, mobile Safari initially displays a solid black line around the field. When the text field is double tapped, mobile Safari displays a blinking vertical bar in the field to indicate that the field has focus.

    For additional information, refer to the WCAG 2.0 examples of implementing user interface components that are highlighted by the user agent when they receive focus (link resides outside of ibm.com).

    Required unit tests for general development technique 1

    See the required unit tests for general development techniques 1-4 below.

  2. Use CSS to change the presentation of a user interface component when it receives focus (CSS).

    There is no general example for this technique. See CSS example 1.

  3. Platform default indicator: Use the default focus indicator for the platform so that high visibility default focus indicators will carry over.

    To comply with this technique, you must implement the following example.

    General example 2

    The Microsoft® Windows® default focus indicator is a one-pixel, dotted, black line. When a Web page has a dark background, users may have difficulty viewing the default focus indicator. As a result, users may customize the default indicator in Windows to a brighter color.

    For additional information, refer to the WCAG 2.0 examples of using the default focus indicator for the platform so that high visibility default focus indicators will carry over (link resides outside of ibm.com).

    Required unit tests for general development technique 3

    See the required unit tests for general development techniques 1-4 below.

  4. Author-supplied indicator: Use an author-supplied, highly visible focus indicator.

    General example 3

    For detailed examples on how to implement this technique, refer to the WCAG 2.0 examples for using an author-supplied, highly visible focus indicator (link resides outside of ibm.com).

    To comply with this technique, you must implement at least one of the WCAG 2.0 examples or a similar example.

    Required unit tests for general development technique 4

    See the required unit tests for general development techniques 1-4 below.

  5. Use script to change the background color or border of the element with focus (Scripting).

    There is no general example for this technique. See scripting example 1.

    Required unit tests for general development techniques 1-4

    Note: No tools are available to test these techniques.

CSS examples

  1. User agent indicator: Implement user interface components that are highlighted by the user agent when they receive focus.

    There is no specific CSS example of this technique. See general example 1.

  2. Use CSS to change the presentation of a user interface component when it receives focus.

    CSS example 1

    For detailed examples on how to implement this technique, refer to the WCAG 2.0 examples for using CSS to change the presentation of a user interface component when it receives focus (link resides outside of ibm.com).

    To comply with this technique, you must implement at least one of the WCAG 2.0 examples or a similar example.

    Required unit tests for CSS development technique 2

    See the Required unit tests for general development techniques 1-4.

  3. Platform default indicator: Use the default focus indicator for the platform so that high visibility default focus indicators will carry over.

    There is no specific CSS example of this technique.

  4. Author-supplied indicator: Use an author-supplied, highly visible focus indicator.

    There is no specific CSS example of this technique.

  5. Use script to change the background color or border of the element with focus.

    There is no specific CSS example of this technique.

Scripting examples

  1. User agent indicator: Implement user interface components that are highlighted by the user agent when they receive focus.

    There is no scripting example of this technique.

  2. Use CSS to change the presentation of a user interface component when it receives focus.

    There is no scripting example of this technique.

  3. Platform default indicator: Use the default focus indicator for the platform so that high visibility default focus indicators will carry over.

    There is no scripting example of this technique.

  4. Author-supplied indicator: Use an author-supplied, highly visible focus indicator.

    There is no scripting example of this technique.

  5. Use script to change the background color or border of the element with focus.

    Scripting example 1

    For detailed examples on how to implement this technique, refer to the WCAG 2.0 examples for using script to change the background color or border of the element with focus (link resides outside of ibm.com).

    To comply with this technique, you must implement at least one of the WCAG 2.0 examples or a similar example.

    Required unit tests for scripting development technique 5

Recommended development techniques

Although you are not required to implement the recommended techniques in order to comply with this checkpoint, you should review these techniques because they can improve the accessibility and usability of the application. See WCAG 2.0 Additional Techniques (Advisory) for 2.4.7 (link resides outside of ibm.com) for a list of techniques and examples.


©2013 IBM Corporation

Last updated January 1, 2013.

W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.