diff --git a/techniques/general/G195.html b/techniques/general/G195.html index e2746fd30e..e5559a5d8f 100644 --- a/techniques/general/G195.html +++ b/techniques/general/G195.html @@ -2,7 +2,7 @@

Generally applicable.

Description

The objective of this technique is enhance the focus indicator in the browser, by creating a visible one in the content. The default focus indicator in some browsers is a thin, dotted, black line. It can be difficult to see the line when it is around a form element which already has an outline, when the focused element is inside a table cell, when the focused element is very small, or when the background of the page is a dark color. Some browsers use a pale blue outline, which can be difficult to see on some backgrounds.

-

In this technique, when the user places focus on an element using the keyboard, the application makes that focus more visible, using a combination of a highly contrasting color, a thick line, and other visual indicators such as a glow.

+

In this technique, when the user places focus on an element using the keyboard, the application makes that focus more visible, using a combination of a highly contrasting color, a thick line, and optionally other visual indicators such as a glow.

Examples

@@ -19,23 +19,24 @@

Form Elements

Menus

-

A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 3:1 contrast ratio with the surrounding items and a 4.5:1 contrast ratio with its own text.

+

A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 3:1 contrast ratio with the surrounding menu items and a 4.5:1 contrast ratio with its own text.

Tests

Procedure

-

For each user interface component on the page that should receive keyboard focus:

+

For each user interface component on the page whose focus indicator or background color has been modified by the author:

    -
  1. Navigate to the component and check that it has a visible focus indicator.
    2. -
  2. Check that the focus indicator area is at least the size of a 1 CSS px border around the component.
    3. -
  3. If the focus indicator area is not at least equal to the area of a 1 CSS pixel border, check that it has an area of at least 4 CSS pixels along the shortest side of the component.
    4. -
  4. Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 3:1 or more for the minimum focus indicator area.
    5. -
  5. If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.
    6. +
  6. Navigate to the component and check that it has a visible focus indicator that contrasts at least 3:1 against adjacent colors.
    7. +
  7. Check that the focus indicator includes an area that meets all the following:
    8. +
      +
    1. is at least as large as a 2 CSS pixel thick perimeter of the unfocused component or sub-component.
      2. +
    2. has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
      3. +

Expected Results