WCAG 3.0
Focus Appearance

Methods for Focus Appearance

Decision tree

For each focusable item:

  1. Is there a focus indicator?

    1. Yes, continue
    2. No, fail
  2. Does the organization have a style guide which includes guidance on all types of text-alternatives, and a policy that editors are required to follow the style guide?

    1. Yes, See Text Alternative Style Guide Assertion (Enhanced), continue
    2. No, continue
  3. Is the user-agent default focus indicator used? (Prerequisite)

    1. Yes, see using the default indicators (continue)
    2. No, continue
  4. Is the user-agent default focus indicator used, and meets contrast across backgrounds? (Baseline)

    1. Yes, see using the default focus indicator and checking contrast (stop)
    2. No, continue
  5. Is the indicator using lines or a bounding box? (Baseline)

    1. Yes, see line / bounding box indiators (stop)
    2. No, continue
  6. Does the indicator use a change of color of the element? (Baseline)

    1. Yes, [change of color](see change-of-color/) (stop)
    2. No, continue
  7. Does the indicator use an icon or shape as the indicator? (Baseline)

    1. Yes, see icon/shape (stop)
    2. No, continue
  8. Does the indicator use a tooltip or additional content as the indicator? (Baseline)

    1. Yes, see tooltip/additional content.
      Is there a supplementary indicator? (Enhanced)
      1. Yes, see supplementary indicators (stop)
      2. No, continue
    2. No, continue
  9. Does the indicator use a change of size of the focusable element as the indicator? (Baseline)

    1. Yes, see size change (stop)
    2. No, continue
  10. Does the indicator use a combination of the above indicators?

    1. Pick one of the methods above to meet conformance (stop)
    2. No, continue
  11. Does the indicator use another method? (Baseline)

    1. Yes, see other indicators (stop)

Methods

Change of color

The authored focus indicator uses a change of color within the control.

See More

Using the default focus indicator

The platform's default indicator is used.

See More

Using the default focus indicator and checking contrast

The platform’s default indicator is used, and where the backgrounds are changed, the indicator contrast is checked.

See More

Icon/shape

The authored focus indicator uses the addition/removal of an icon or shape.

See More

Line / bounding box indicators

The authored focus indicator uses a line or bounding box.

See More

Other focus indicators

Using a custom indicator that does not fit into any other method.

See More

Size change

The authored focus indicator uses a change of size of the focusable element.

See More

Supplementary indicators

In addition to the focus indicator, there is another change to the focusable element.

See More

Tooltip/additional content

The authored focus indicator uses additional content.

See More