{
  "title": "Accessibility",
  "path": "/foundations/accessibility",
  "url": "https://design.werklist.com/foundations/accessibility",
  "text": "https://design.werklist.com/agent/foundations/accessibility",
  "summary": "The rules a screen meets before it ships: contrast, focus, keyboard, target size, zoom, names and motion.",
  "version": "2.1.2",
  "kind": "foundation",
  "name": "Accessibility",
  "purpose": "The minimum a Werklist screen meets for contrast, focus, keyboard, target size, zoom, names, structure and motion, in both themes.",
  "anatomy": [
    {
      "part": "Focus ring color",
      "token": "--focus-ring",
      "measure": "light #1863dc, dark #7fb3ff"
    },
    {
      "part": "Focus ring width",
      "token": "--focus-ring-width",
      "measure": "2px in both themes"
    },
    {
      "part": "Focus ring gap",
      "token": "--focus-ring-offset",
      "measure": "2px in both themes"
    },
    {
      "part": "Touch target",
      "measure": "44 by 44 px under @media (pointer: coarse)"
    },
    {
      "part": "Mouse and trackpad target",
      "measure": "24 by 24 px under @media (pointer: fine)"
    },
    {
      "part": "Body text",
      "measure": "16 px"
    },
    {
      "part": "Caption, the smallest text",
      "measure": "13 px"
    },
    {
      "part": "Editable text on a touch screen",
      "measure": "16 px minimum"
    }
  ],
  "keys": [
    {
      "key": "Tab, Shift+Tab",
      "action": "Next or previous control"
    },
    {
      "key": "Enter",
      "action": "Follow a link, press a button, submit a form"
    },
    {
      "key": "Space",
      "action": "Press a button, check a checkbox, turn a switch on or off"
    },
    {
      "key": "Arrow keys",
      "action": "Move inside a group, such as tabs or a menu"
    },
    {
      "key": "Home, End",
      "action": "First or last item of a menu or a list"
    },
    {
      "key": "Escape",
      "action": "Close the front menu, popover or dialog and return focus"
    }
  ],
  "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."
  ]
}