Wcag 2.2 focus appearance

1. What is focus visible in SC 2.4 7?
2. What is required for a focus indicator?
3. What is the difference between focus and focus visible?
4. What is color contrast in WCAG focus ring?

What is focus visible in SC 2.4 7?

7 Focus Visible. Focus visible is very important for low vision users, people with motor disability & attention disorders. If there is no visible focus on any active element or the element that receives keyboard focus users might not be able to determine where their current focus is & will be lost.

What is required for a focus indicator?

For a focus indicator to be accessible, it is required to have an area of the focus indication area (a subset of the focus indication area) that has a minimum contrast ratio of 3:1 between the colors in the focused and unfocused states. That area is called the contrasting area.

What is the difference between focus and focus visible?

In other words, focus styles in browsers only show sometimes, in specific cases. The :focus-visible pseudo class is meant to match those cases. This makes :focus-visible very different from :focus , which matches whatever the currently focused element is, regardless of whether it makes sense to highlight it or not.

What is color contrast in WCAG focus ring?

Color contrast measurements in WCAG are based on luminance (brightness) regardless of the hue. If a control receiving focus changes its background (fill color) to a color that contrasts less than 3:1 with the original background, that would not pass the change of contrast.