Accessibility starts in the design. These are the decisions the design system makes so every mockup starts accessible. Devs take care of the implementation (ARIA, keyboard handling) when they build the real pages. They can only build what the design decided, so the mockup decides it.
This guidance adapts Material Design 3's accessibility foundations to Wikicasa.
Principles
- Leave room for the person. People's needs change with the day, the device and the situation (a broken arm, bright sunlight). Respect their settings: zoom, larger text, reduced motion. Don't design them away.
- Learn before, not after. Think about keyboard, screen reader and low-vision use while the design is still cheap to change, not after devs have built it.
- Requirements are the floor. WCAG AA is the minimum. Solutions that start from an access need often end up better for everyone.
The basics
- Contrast: text and UI colors only in approved pairs (see Color).
- Focus: one visible focus ring everywhere, for keyboard users.
- Targets: anything interactive is at least 24px, and 44px on touch.
- Meaning: never by color alone.
- Motion: respects reduced motion.
- Zoom: layouts survive 200% zoom and 320px-wide screens.