---
title: "Accessibility · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility
updated: 2026-10-20
licence: "All rights reserved"
---

# Accessibility

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

> Make the site work for everyone with readable contrast, full keyboard use, visible focus, clear structure, calm motion, big touch targets and plain HTML first.

Check the whole chapter at once with axe-core on every page type. Test the WCAG 2.0, 2.1 and 2.2 A and AA rules plus best practices. Run it at phone and desktop width, in light and dark mode. Automated tools find only part of the problems. Finish with a keyboard and a screen reader.

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility`.

## Required

- [Make text easy to read](https://agentwranglers.se/playbook/website/accessibility/color-contrast): Give text at least 4.5:1 contrast against its background, and 3:1 for large text and controls, in light and dark mode.
- [Describe images in words](https://agentwranglers.se/playbook/website/accessibility/image-alt-text): Give every `<img>` an `alt` attribute. Say what it shows if it carries meaning, or leave it empty if it is decoration.
- [Label every form field](https://agentwranglers.se/playbook/website/accessibility/form-labels): Give every form field a visible label tied to it with `<label for>`. A placeholder is not a label.
- [Make everything work by keyboard](https://agentwranglers.se/playbook/website/accessibility/keyboard-navigation): Every link, button and control must work with just a keyboard. Tab moves in reading order, and focus never gets stuck.
- [Always show where focus is](https://agentwranglers.se/playbook/website/accessibility/focus-indicators): Show a clear, high-contrast focus ring on every control when someone reaches it with the keyboard.
- [Never hide the focused element](https://agentwranglers.se/playbook/website/accessibility/focus-not-obscured): Make sure a sticky header, banner or chat widget never hides the element that has keyboard focus. This is WCAG 2.2 criterion 2.4.11 (AA).
- [Let people skip to the content](https://agentwranglers.se/playbook/website/accessibility/skip-links): Make a "Skip to main content" link the first thing that takes focus on every page.
- [Use the right element for the job](https://agentwranglers.se/playbook/website/accessibility/semantic-html): Use landmark elements (`header`, `nav`, `main`, `footer`) and the right element for each job, with one `main` per page.
- [Say where each link goes](https://agentwranglers.se/playbook/website/accessibility/link-text): Write link text that says where the link goes. Never write "click here" or "read more".
- [Never use colour as the only signal](https://agentwranglers.se/playbook/website/accessibility/not-color-alone): Never show meaning by colour alone, such as red for an error or a coloured line in a chart. Add text, an icon, a pattern or an underline. This is WCAG criterion 1.4.1 (A).
- [Name every link and button](https://agentwranglers.se/playbook/website/accessibility/empty-links-buttons): Never ship a link or button without a name a screen reader can read. Give icon-only controls an `aria-label`.
- [Explain form errors next to the field](https://agentwranglers.se/playbook/website/accessibility/form-errors): Show form errors as text next to the field, tie them to it with `aria-describedby`, and say how to fix them.
- [Make signing in easy for everyone](https://agentwranglers.se/playbook/website/accessibility/accessible-authentication): Never make signing in depend only on remembering, copying out or solving puzzles. Allow paste and password managers. This is WCAG 2.2 criterion 3.3.8 (AA).
- [Never ask for the same thing twice](https://agentwranglers.se/playbook/website/accessibility/redundant-entry): Never ask people for the same information twice in one process. Fill it in for them or let them pick it. This is WCAG 2.2 criterion 3.3.7 (A).
- [Keep help in the same place](https://agentwranglers.se/playbook/website/accessibility/consistent-help): Put help and contact links in the same place on every page. This is WCAG 2.2 criterion 3.2.6 (A).
- [Respect people who turn motion off](https://agentwranglers.se/playbook/website/accessibility/reduced-motion): Honour `prefers-reduced-motion` and stop or reduce animation, parallax and smooth scrolling. Never start motion by itself.
- [Give people enough time](https://agentwranglers.se/playbook/website/accessibility/time-limits): Warn people before a time limit runs out, and let them extend it with one simple action. Never move or update content by itself for more than five seconds without a way to pause it. These are WCAG criteria 2.2.1 and 2.2.2 (A).
- [Caption video, transcribe audio](https://agentwranglers.se/playbook/website/accessibility/captions-and-transcripts): Caption every video and give a transcript for audio.
- [Give tables headers](https://agentwranglers.se/playbook/website/accessibility/data-tables): Mark up data tables with `th`, `scope` and a caption or label. Use tables only for data, never for layout.
- [Never make people scroll sideways](https://agentwranglers.se/playbook/website/accessibility/no-sideways-scrolling): Never let a page or a component scroll sideways with a visible scrollbar, at any width from 320 px up.
- [Let text grow without breaking the page](https://agentwranglers.se/playbook/website/accessibility/text-resize): Keep all content readable at 200% text zoom and with wider letter, word and line spacing. Never block pinch zoom. These are WCAG criteria 1.4.4 and 1.4.12 (AA).
- [Make tap targets big enough](https://agentwranglers.se/playbook/website/accessibility/touch-target-size): Make every touch target at least 24 by 24 CSS pixels (WCAG AA), and 44 by 44 for main controls (WCAG AAA).
- [Offer a way that needs no dragging](https://agentwranglers.se/playbook/website/accessibility/dragging-movements): Give every drag a single-pointer alternative, such as buttons. This is WCAG 2.2 criterion 2.5.7 (AA).

## Recommended

- [Work in high-contrast mode](https://agentwranglers.se/playbook/website/accessibility/forced-colors): Test the site in forced-colours mode, a high-contrast setting in Windows. Repair what it flattens under `forced-colors: active`.
- [Lock the page behind open menus](https://agentwranglers.se/playbook/website/accessibility/inert-attribute): Make everything behind an open menu or dialog unreachable with the `inert` attribute.
- [Reach for HTML before ARIA](https://agentwranglers.se/playbook/website/accessibility/aria-usage): Use native HTML elements first. Add ARIA, extra attributes for screen readers, only for what no native element can say.
- [Make links look like links](https://agentwranglers.se/playbook/website/accessibility/links-look-like-links): Underline every text link in content with one subtle, consistent style. Leave it off only in navigation bars and on links styled as buttons, where the shape already says "link".
- [Announce changes without moving focus](https://agentwranglers.se/playbook/website/accessibility/status-messages): Announce changes such as "Copied" through a live region (`role="status"`) that is already in the page, without moving focus.
- [Know which accessibility law applies](https://agentwranglers.se/playbook/website/accessibility/accessibility-law): Find out which accessibility laws cover the site. Meet WCAG 2.2 AA, which includes the WCAG 2.1 AA level most laws point to.
- [Let find-in-page open hidden text](https://agentwranglers.se/playbook/website/accessibility/hidden-until-found): Hide folded content in a way find-in-page can still reach, such as `<details>` or `hidden="until-found"`.
- [Show the right keyboard on phones](https://agentwranglers.se/playbook/website/accessibility/mobile-form-inputs): Give inputs the right `type`, `inputmode` and `autocomplete`, and never block zoom on phones.
- [Build with native controls](https://agentwranglers.se/playbook/website/accessibility/native-interactive-elements): Build controls from native elements (`button`, `a`, `details`, `dialog`, `popover`) instead of scripted `div`s.
- [Style from the state](https://agentwranglers.se/playbook/website/accessibility/css-state-selectors): Style interface state from the state itself with selectors like `:has()`, `:popover-open` and `[aria-expanded]`, not from toggled classes.

## Optional

- [Let the browser pick readable text colour](https://agentwranglers.se/playbook/website/accessibility/contrast-color): Let the browser pick readable black or white text on brand colours with `contrast-color()`, after a fallback you have checked.

## Avoid

- [Fix the site instead of adding overlays](https://agentwranglers.se/playbook/website/accessibility/accessibility-overlays): Never install an accessibility overlay widget. Fix the site itself.

- Previous: [Redirects and canonicals](https://agentwranglers.se/playbook/website/redirects-and-canonicals)
- Next: [Security](https://agentwranglers.se/playbook/website/security)
- [All chapters](https://agentwranglers.se/playbook/website)