Focus indicator does not meet visual requirements

Rule

When a User Interface Component displays a visible keyboard focus indicator, the indicator MUST meet minimum criteria for: size, contrast with the unfocused state, and contrast with the adjacent colors.

Background

When a visible keyboard focus indicator is not provided, sighted keyboard users will have no idea which link or control has focus making it extremely difficult, if not impossible, to interact with the content. Browsers provide default focus indicators for natively focusable elements, but these may be very difficult to see depending on the color of the control and the page background. In addition, custom elements often have no visible focus indicator at all. Ideal focus indicators are designed to provide good contrast with links and controls and their backgrounds. Focus indicators with good contrast make it much easier to track focus as a keyboard user navigates through the page.

How to Fix

Fix this issue by ensuring that ALL of the following requirements are met for EITHER Scenario 1 OR Scenario 2:

Scenario 1 (the focus indicator fully encloses the component):

Ensure that ALL of the following requirements are met:

1. The focus indicator fully encloses the component or subcomponent.

2.The pixels that make up the focus indicator have a contrast ratio of at least 3:1 between the pixels in their focused state and their unfocused state. 3.The pixels of the focus indicator have a contrast ratio of at least 3:1 against their adjacent non-focus-indicator colors.

Scenario 2 (the focus indicator does not fully enclose the component):

Ensure that ALL of the following requirements are met:

1. The area of the focus indicator is at least as large as EITHER:

a.The area of a 1 CSS pixel thick perimeter of the unfocused component or sub-component OR b. The area of a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component or sub-component. 2. The pixels that make up the focus indicator have a contrast ratio of at least 3:1 between the pixels in their focused state and their unfocused state. 3. The contrast of the focus indicator against its adjacent non-focus-indicator colors meets at least ONE of the following: a. The pixels of the focus indicator have a contrast ratio of at least 3:1 against their adjacent non-focus-indicator colors, OR b. The focus indicator is no thinner than 2 CSS pixels.