Basics

This short guide will explain the ways in which you can apply accessibility best practices to your workflow at Cuatro! It does not matter if you are a dev, designer, or something else! There will be tools that anyone can use.

First, why accessibility or "a11y" as it is sometimes called? With Kitt, we have a chance to have a fresh start! Why not make a system that works for people of all sorts of abilities? This concept is called "Universal Design." For example IRL, think of doors that automatically open for anyone that comes by. They just work everyone.

P.O.U.R

The WCAG is an international set of web standards; it is developed by the World Wide Web Consortium (W3C). They devised guidelines and success criteria that prescribe how to make web content more accessible. The WCAG is defined into four principles: Perceivable, Operable, Understandable, and Robust (POUR).

1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive. [Ensure content is accessible to people who are blind and/or deaf.]
2. Operable: User interface components and navigation must be operable. [Make sure all features are accessible by keyboard; not just by mouse.]
3. Understandable: Information and the operation of user interface must be understandable.
4. Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

The WCAG has three levels: A, AA, and AAA. A being the lowest accessibility conformance and AAA being the highest. We are going to strive for a level AAA conformace for our design system.

Resources

• WCAG Color Contrast Checker
• Lighthouse