` heading. - [ ] Headings (`


# A11Y checklist

> This checklist uses the WCAG 2.2 guidelines as a reference point. It’s used to improve the experience for everyone and ensure our high standards for accessibility are met.

## Content 0 / 9

- [ ] Content uses consistent and clear language.
- [ ] `<button>`, `<a>`, and `<label>` text is unique and descriptive.
- [ ] List content uses `<ol>`, `<ul>`, or `<dl>`.
- [ ] A keyboard-focusable skip link jumps to the main content.
- [ ] Body text has a line height of at least 1.5× the font size.
- [ ] Page is usable when text is scaled to 200%.
- [ ] Content reflows correctly when zoomed to 400%.
- [ ] Auto-updating or moving content can be paused, stopped, or hidden.
- [ ] Time limits can be extended, adjusted, or removed.

## Headings 0 / 4

- [ ] Heading elements are used to introduce new content.
- [ ] Each page has exactly one `<h1>` heading.
- [ ] Headings (`<h1>`-`<h6>`) follow a logical order based on content depth.
- [ ] No heading levels are skipped.

## Markup 0 / 13

- [ ] `<html>` has the correct `lang` attribute.
- [ ] Each page has a unique, descriptive `<title>`.
- [ ] Landmark elements (`<nav>`, `<main>`) indicate content regions.
- [ ] No `tabindex` value other than `0` or `-1`.
- [ ] No `autofocus` attributes.
- [ ] No `title` attribute tooltips.
- [ ] All links use `<a>` with an `href` attribute.
- [ ] All buttons use `<button>`.
- [ ] Tabular data uses `<table>`.
- [ ] Table headers use `<th>` with a `scope` attribute.
- [ ] Tables have a `<caption>`.
- [ ] Status messages and live updates are announced via `role="status"`, `role="alert"`, or `aria-live`.
- [ ] `<k-visually-hidden>` is preferred over `aria-label` for hidden accessible text.

## Keyboard 0 / 7

- [ ] Interface is tested for keyboard accessibility.
- [ ] Interactive elements have visible focus styles.
- [ ] Focus order matches the visual layout.
- [ ] No off-screen elements remain focusable.
- [ ] Buttons activate with both `Space` and `Enter`.
- [ ] Dialogs and overlays close with the `Esc` key.
- [ ] Tooltips and popovers are dismissible, hoverable, and persistent.

## Images 0 / 6

- [ ] All meaningful `<img>` elements have an `alt` attribute.
- [ ] Decorative images use `alt=""`.
- [ ] Complex charts and graphs have text alternatives.
- [ ] Decorative `<svg>` uses `aria-hidden="true"`.
- [ ] Informative `<svg>` uses `role="img"` with an accessible name.
- [ ] Real text is used instead of text in images.

## Forms 0 / 4

- [ ] Every input has an associated `<label>`.
- [ ] Related inputs are grouped with `<fieldset>` and `<legend>`.
- [ ] Inputs support `autocomplete` where relevant.
- [ ] Error messages are linked to their input via `aria-describedby`.

## Color 0 / 4

- [ ] Color is not the only way meaning is conveyed.
- [ ] Text color contrast is at least `4.5:1`.
- [ ] UI component color contrast is at least `3:1`.
- [ ] Interface is tested with a color-blindness simulator.

## Mobile 0 / 5

- [ ] Page works in both portrait and landscape orientation.
- [ ] Page works at 320 CSS pixels wide.
- [ ] The whole page does not scroll horizontally.
- [ ] Touch targets are at least 24 × 24 px (inline exceptions allowed).
- [ ] Viewport zoom is not disabled in the meta tag.

## Tooling 0 / 6

- [ ] Interface has automated accessibility tests.
- [ ] Passes a scan with the AXE tool.
- [ ] Works with NVDA on Windows.
- [ ] Works with JAWS on Windows.
- [ ] Works with VoiceOver on macOS and iOS.
- [ ] Works with TalkBack on Android.
- [ ] Works in Windows high-contrast mode.

## Attribution

This checklist was inspired by [The A11Y Project](https://www.a11yproject.com/), licensed under the [Apache License 2.0](https://github.com/a11yproject/a11yproject.com/blob/main/LICENSE.md).