search

w3c / wcag2ict

WCAG2ICT deliverable of Accessibility Guidelines WG
https://wcag2ict.netlify.app/
Other
24 stars 4 forks source link

2.4.13 Focus Appearance (Level AAA) #554

Open maryjom opened 1 month ago

maryjom commented 1 month ago

2.4.13 Focus Appearance

(Level AAA)

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 enclosure or size) 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.

Applying SC 2.4.13 Focus Appearance to Non-Web Documents and Software

This applies directly as written, and as described in Intent from Understanding Success Criterion 2.4.13, replacing “user agent” with “user agent or platform software”.

With these substitutions, it would read:

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 or platform software] 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 enclosure or size) 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 or platform software] resolution enhancements and anti-aliasing can be ignored.

NOTE 4 (Added) @@ TBD - Will need a note regarding CSS pixel interpretation. @@

Glossary term used only by this SC

perimeter
continuous line forming the boundary of a shape not including shared pixels, or the [minimum bounding box](https://www.w3.org/TR/WCAG22/#dfn-bounding-boxes), whichever is shortest. EXAMPLE The perimeter calculation for a 2 CSS pixel perimeter around a rectangle is 4h+4w, where h is the height and w is the width. For a 2 CSS pixel perimeter around a circle it is 4𝜋r.

For WCAG2ICT consideration: We'll need to work on the notes: