# The Website Specification — checklist (26 items)

## Accessibility
- [ ] **Colour contrast** _(required)_ — Text and meaningful non-text elements must have enough contrast against their background so people with low vision and people in harsh light can read them.
      https://specification.website/spec/accessibility/color-contrast/
- [ ] **Automatic contrasting colour** _(optional)_ — Let the browser pick a legible black or white foreground for a dynamic background with the CSS contrast-color() function, instead of hard-coding colour pairs or computing luminance in JavaScript.
      https://specification.website/spec/accessibility/contrast-color/
- [ ] **Forced colours mode** _(recommended)_ — Respect forced colours mode (Windows High Contrast and similar). The `forced-colors` media feature lets you repair UI the user's palette would otherwise flatten — without overriding their choice.
      https://specification.website/spec/accessibility/forced-colors/
- [ ] **Image alt text** _(required)_ — Every <img> element must have an alt attribute. The value describes the image's purpose to screen readers, search engines, and anyone whose image fails to load.
      https://specification.website/spec/accessibility/image-alt-text/
- [ ] **Form labels** _(required)_ — Every form control needs a programmatically associated label. A placeholder is not a label, and an unlabelled input is unusable for screen-reader and voice-control users.
      https://specification.website/spec/accessibility/form-labels/
- [ ] **Keyboard navigation** _(required)_ — Every interactive element on the page must be reachable and operable with a keyboard alone, in a logical order, with no traps that hold focus.
      https://specification.website/spec/accessibility/keyboard-navigation/
- [ ] **Visible focus indicators** _(required)_ — Whenever a control receives keyboard focus, the page must show a clear, high-contrast indicator. Removing focus outlines without a replacement is a top accessibility failure.
      https://specification.website/spec/accessibility/focus-indicators/
- [ ] **Skip links** _(required)_ — A 'skip to main content' link as the first focusable element lets keyboard and screen-reader users jump past repeated navigation on every page.
      https://specification.website/spec/accessibility/skip-links/
- [ ] **The inert attribute** _(recommended)_ — When an overlay is open, the content behind it should be unreachable — not just dimmed. The inert attribute removes a subtree from tab order and the accessibility tree at once, replacing fragile focus-trap JavaScript.
      https://specification.website/spec/accessibility/inert-attribute/
- [ ] **Semantic HTML and landmarks** _(required)_ — Use the right HTML element for the job. Landmarks like <header>, <nav>, <main>, and <footer> let assistive technologies announce structure and skip between regions.
      https://specification.website/spec/accessibility/semantic-html/
- [ ] **ARIA — first rule of ARIA** _(recommended)_ — ARIA can make custom widgets accessible, but the first rule of ARIA is don't use ARIA. Reach for a native HTML element first; add ARIA only when nothing native fits.
      https://specification.website/spec/accessibility/aria-usage/
- [ ] **Descriptive link text** _(required)_ — Every link's text must describe where it goes. 'Click here' and 'read more' fail screen-reader users who scan a page by jumping from link to link.
      https://specification.website/spec/accessibility/link-text/
- [ ] **Empty links and buttons** _(avoid)_ — A link or button with no accessible name is invisible to screen readers and unreachable for voice control. Icon-only controls without a label are the usual culprit.
      https://specification.website/spec/accessibility/empty-links-buttons/
- [ ] **Accessible form errors** _(required)_ — When a form submission fails, errors must be identified in text, associated with the input that caused them, and announced to assistive technology.
      https://specification.website/spec/accessibility/form-errors/
- [ ] **Accessible authentication** _(recommended)_ — Let people log in without solving a puzzle, transcribing a code, or memorising anything. Don't block password managers, allow paste, and offer a method that needs no cognitive function test.
      https://specification.website/spec/accessibility/accessible-authentication/
- [ ] **Redundant entry** _(recommended)_ — Don't make people re-type information they already gave you in the same process. Auto-populate it, or let them pick it from what they entered a step ago.
      https://specification.website/spec/accessibility/redundant-entry/
- [ ] **Document and parts language** _(required)_ — Set the page's primary language on <html lang> and mark any inline content in a different language with its own lang attribute, so screen readers pronounce it correctly.
      https://specification.website/spec/accessibility/document-language/
- [ ] **Reduced motion** _(required)_ — Respect the user's `prefers-reduced-motion` setting. Decorative animation, parallax, and autoplay can trigger vestibular distress, migraines, and seizures.
      https://specification.website/spec/accessibility/reduced-motion/
- [ ] **Accessibility overlays** _(avoid)_ — Third-party JavaScript widgets that claim to make a site WCAG-compliant at runtime. They do not work, often harm screen-reader users, and attract lawsuits.
      https://specification.website/spec/accessibility/accessibility-overlays/
- [ ] **Captions and transcripts** _(required)_ — Video needs synchronised captions, audio-only content needs a transcript, and visuals that carry meaning need audio description. Auto-captions alone are not enough.
      https://specification.website/spec/accessibility/captions-and-transcripts/
- [ ] **Accessible data tables** _(required)_ — Tabular data must use real <table> markup with a caption, header cells, and scope attributes so screen readers can announce row and column relationships.
      https://specification.website/spec/accessibility/data-tables/
- [ ] **Touch target size** _(required)_ — Interactive controls must be large enough to tap or click reliably. WCAG 2.2 sets a 24×24 CSS px minimum, with 44×44 CSS px as the enhanced target.
      https://specification.website/spec/accessibility/touch-target-size/
- [ ] **Hidden until found** _(recommended)_ — Use hidden="until-found" for collapsible content so that browser find-in-page, assistive tech, and search engines can still reach the text and auto-expand it.
      https://specification.website/spec/accessibility/hidden-until-found/
- [ ] **Mobile-friendly form inputs** _(recommended)_ — On a phone, the right input type, inputmode, and enterkeyhint summon the correct on-screen keyboard and a useful Enter key. Keep input text at 16px or larger so iOS Safari doesn't zoom on focus.
      https://specification.website/spec/accessibility/mobile-form-inputs/
- [ ] **Native interactive elements** _(recommended)_ — Prefer native HTML interactive elements — <button>, <a>, <details>/<summary>, <dialog> — over divs with click handlers. You get keyboard support, focus management, and assistive-tech semantics for free.
      https://specification.website/spec/accessibility/native-interactive-elements/
- [ ] **CSS state and relational selectors** _(recommended)_ — Use `:has()` together with `:user-invalid`, `:user-valid`, `:placeholder-shown` and `:focus-within` to express form and component state in CSS, removing the JavaScript class-toggling pattern and the race conditions it brings.
      https://specification.website/spec/accessibility/css-state-selectors/