# Accessibility

The minimum a Werklist screen meets for contrast, focus, keyboard, target size, zoom, names, structure and motion, in both themes.

* Kind: foundation
* Page: https://design.werklist.com/foundations/accessibility
* Version: 2.1.2

## Rules

* Text meets 4.5 to 1 against what is behind it in both themes. A large heading gets no lower floor.
* The one exception is the word on a status chip: 3.5 to 1 on its tint, so the ink can keep the hue of its chip.
* Icons that carry meaning, the focus ring and chart marks meet 3 to 1.
* Check every pair in both themes: white text on --brand-blue reads 5.44 to 1 in light and 3.67 to 1 in dark.
* Color is paired with a word, an icon or a shape: a status has its word, an error its message and icon, a chart series its label.
* Links in running text are underlined: --brand-ink against --text is 2.36 to 1 in light and 2.72 to 1 in dark.
* The focus ring appears on :focus-visible and is removed only when something as visible replaces it.
* A control that takes focus is never hidden under the sticky header.
* Focus is drawn as an outline, not a shadow: in forced colors the browser keeps outlines and drops shadows. The gap keeps a blue ring off a blue button.
* Everything a pointer can do, a keyboard can do, and a swipe always has a button that does the same.
* Focus moves in reading order. When a menu or a dialog closes, focus returns to the control that opened it.
* The first stop on a page is a link that skips to the main content.
* Zoom is never turned off with maximum-scale or user-scalable=no.
* At 320 px wide the page reflows into one column with no sideways scrolling. Text enlarged to 200 percent does not clip or overlap.
* A page has one h1, and its headings descend in order. The header, the navigation, the main content and the footer are landmarks.
* Each control has a name a screen reader announces. A count joins that name, as in "Notifications, 3 unread", and the number itself is hidden from the reader.
* A change announced while focus stays put uses a polite live region. An error that stops the task uses an alert.
* With reduced motion, slides and scales become instant and fades stay.
* Nothing a person has to read or act on disappears on a timer. A message with an action stays until it is dismissed.
* A field has visible text above it as its label, never only a placeholder.
* An action shown on hover is shown on focus too.

## Anatomy

* Focus ring color: light #1863dc, dark #7fb3ff (--focus-ring)
* Focus ring width: 2px in both themes (--focus-ring-width)
* Focus ring gap: 2px in both themes (--focus-ring-offset)
* Touch target: 44 by 44 px under @media (pointer: coarse)
* Mouse and trackpad target: 24 by 24 px under @media (pointer: fine)
* Body text: 16 px
* Caption, the smallest text: 13 px
* Editable text on a touch screen: 16 px minimum

## Keyboard

* Tab, Shift+Tab: Next or previous control
* Enter: Follow a link, press a button, submit a form
* Space: Press a button, check a checkbox, turn a switch on or off
* Arrow keys: Move inside a group, such as tabs or a menu
* Home, End: First or last item of a menu or a list
* Escape: Close the front menu, popover or dialog and return focus