# Accessibility

The rule above all the others: nobody is left out. Every tie-breaker in the Concept ends here.

## The floor

Accessible is not optional. If a beautiful idea leaves someone out, the idea changes. The floor is WCAG 2.2 level AA, checked by tests whenever possible, and the rest by a list someone goes through by hand.

## Rules

### The keyboard reaches everything

Everything clickable is reachable with Tab and used with Enter or Space, in reading order. Focus always shows, with Feitio’s orange outline.

[a link](#teclado)Press Tab to watch the focus move.

### Tested contrast

Every color pair that carries text or meaning passes 4.5 (text) or 3 (shapes), by day and at night; the build fails if one drops. See [Color](/en/design/cor/#contraste).

### Color never speaks alone

Status always with icon and word; links always underlined.

### Touch targets

44px in comfortable, 40 in compact. The small button draws 32, but the touch area is 40. Never below WCAG’s 24.

### Real structure

One heading 1 per page and headings in order; marked regions (header, navigation, content); fields with labels; errors tied to the field and summarized at the top.

### The browser first

Browser elements (button, link, `details`, `dialog`, `popover`) arrive accessible. Scripts add on top, and never take away the keyboard or the screen reader.

### Less motion when asked

The system asks, Feitio stops everything.

## How it is checked

-   **Automatic:** a contrast test for every theme; axe-core on every page, by day, at night and in compact density; no sideways scrolling on mobile.
-   **By hand, for every new component:** go through everything with the keyboard only; listen to the page in a screen reader; zoom text to 200%; turn on reduced motion.
-   **What tests cannot see** (about half of the problems, according to axe-core itself): does the text make sense? Does focus follow reading order? Does the notice reach people who cannot see?