Accessibility
The rule above all the others: nobody is left out. Every tie-breaker in the Concept ends here.
On this page
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.
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.
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?