A11y is how Dew includes.
Every Dew component meets WCAG 2.2 AA from day one.
Four principles for inclusive interfaces.
POUR — perceivable, operable, understandable, robust — is the foundation of WCAG. Every component in Dew is designed and tested against these four lenses.
Perceivable
Information and UI must be presentable in ways every user can perceive — text alternatives, captions, and content that adapts.
Operable
All functionality is available from a keyboard. Users get enough time, navigation is predictable, no seizures.
Understandable
Content is readable. Interfaces behave predictably. Errors are surfaced clearly and recoverable.
Robust
Semantic HTML and correct ARIA so screen readers, voice control, and future tools all interpret content reliably.
Contrast that holds up.
Text needs enough contrast against its background to be legible at any size, in any light. Dew tokens are tuned for AA by default — AAA where it fits.
Minimum for body text (under 18 px)
Large text (18 px+ or bold 14 px+) and UI components
Enhanced contrast for body text
Insufficient — fails AA across the board
Hit these numbers.
Concrete thresholds that turn the principles into checkable values.
Make it accessible by default.
Labels
Associate labels with inputs
<label htmlFor="email">Email</label> <input id="email" type="email" />
Use placeholder as the only label
<input type="email" placeholder="Email" />
Interactive elements
Use native focusable elements
<button onClick={...}>Save</button>Attach handlers to non-semantic tags
<div onClick={...}>Save</div>Color meaning
Combine color with icon or text
<Check /> Saved · success
Rely on color alone
<span className="text-green">Saved</span>
Alt text
Describe purpose, not the image
<img alt="Team celebrating launch" />
Be redundant or empty for meaningful images
<img alt="image" />