Add WCAG 2.2 SC 2.4.13 - Focus Appearance (AAA)

[mgifford]

WCAG 2.2 SC 2.4.13:

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

• is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Exceptions:

• The focus indicator is determined by the user agent and cannot be adjusted by the author, or
• The focus indicator and the indicator's background color are not modified by the author.

Note 1

What is perceived as the user interface component or sub-component (to determine the perimeter) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.

Note 2

Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.

Note 3

Contrast calculations can be based on colors defined within the technology (such as HTML, CSS, and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.

List the tasks for the SC.

Child issue of #65

[mgifford]

Role mapping by ChatGPT and links mostly from me.

AI Generated Role Mapping (ARRM)

• Primary: Visual Designer – owns design of visible focus indicators (contrast, area, styling).
• Secondary: Front-End Developer – ensures focus styling is coded consistently and accurately.
• Contributor: UX Designer – ensures indicator design aligns with usable interaction patterns.

AI Generated Additional Context

• This SC strengthens 2.4.7 (Focus Visible) by specifying minimum visual contrast and size for focus indicators.
• Requirements include:
  • Focus indicator must have at least a 3:1 contrast ratio against adjacent non-focused states.
  • Indicator must be large enough (at least the area of a 1 CSS pixel border around the element).
• Failures include removing focus outlines, using insufficient contrast, or focus states that are only visible through subtle changes (e.g., faint shadows).

References:

• GetStark – Focus Appearance
• https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance
• BeAccessible WCAG 2.2 Checklist
• Parachute Design – WCAG 2.2 Overview
• Equally AI – WCAG 2.2 Checklist
• W3C ARRM – Accessibility Roles & Responsibilities Mapping

Possible Task List

• Audit UI components to confirm focus indicators meet size (≥2 px perimeter) and contrast (≥3:1) requirements
• Define visual focus patterns (outline thickness, color, offset) based on indicator size and contrast specs
• Create and document CSS or component patterns enforcing compliant focus appearance
• Integrate focus appearance standards into design system or component library
• Review and validate focus behavior across components and states (hover, focus, active) for consistency
• Address exceptions (e.g., user agent-controlled focus styles), document rationale where overrides aren’t feasible
• Provide developer guidance and code samples (e.g., using CSS outline-offset, contrast testing tools)
• Train team or document in style-guide that all interactive components must comply with SC 2.4.13

[mgifford]

@dboudreau had suggested these tasks:

• Ensure the keyboard focus indicator is clearly visible and has a minimum area equivalent to a 2 CSS pixel thick border around the focused element, except situations where no visible change is required.
• Ensure the focus indicator has a contrast ratio of at least 3:1 against adjacent colors, or is at least as visible as the default browser outline.

AI suggested this version (without Ensure):

• The visible focus indicator has an area at least equivalent to a 2 CSS-pixel outline around the focused component.
• The focus indicator meets at least 3:1 contrast against adjacent colors or is at least as visible as the user agent’s default outline.