Accessibility
Accessibility Standards
Detailed WCAG requirements and implementation guidelines
Draft
Detailed requirements for WCAG compliance with Tailwind CSS implementation patterns.
Focus Indicators
| Requirement | WCAG | Tailwind |
|---|---|---|
| Visible focus ring | 2.4.7 | focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 |
| Focus visible only | 2.4.7 | focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 |
| Focus within | - | focus-within:ring-2 |
| Skip to content | 2.4.1 | sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 |
<!-- Recommended focus pattern -->
<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500">
Action
</button>
<!-- Skip to content link -->
<a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-white focus:text-primary-500">
Skip to content
</a>
Color Contrast
| Requirement | Minimum Ratio | WCAG Level |
|---|---|---|
| Normal text (<18px) | 4.5:1 | AA |
| Large text (>=18px or 14px bold) | 3.0:1 | AA |
| UI components | 3.0:1 | AA |
| Enhanced (critical content) | 7.0:1 | AAA |
Touch Targets
| Size | Value | Tailwind |
|---|---|---|
| Minimum | 44px | min-h-11 min-w-11 |
| Recommended | 48px | min-h-12 min-w-12 |
<!-- Touch-friendly button -->
<button class="min-h-11 min-w-11 px-4 py-2">Tap me</button>
<!-- Comfortable touch target -->
<button class="min-h-12 min-w-12 px-4 py-2">Tap me</button>
Screen Reader Support
| Pattern | Tailwind | Use Case |
|---|---|---|
| Visually hidden | sr-only | Hide text visually, keep for screen readers |
| Show on focus | not-sr-only | Reveal hidden content on focus |
| Skip link | sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 | Skip navigation pattern |
<!-- Screen reader only text -->
<span class="sr-only">Close dialog</span>
<!-- Icon button with accessible label -->
<button aria-label="Close">
<svg class="w-5 h-5">...</svg>
</button>
Keyboard Accessibility
- No keyboard traps
- Shortcut keys can be disabled
- Focus order is logical
Motion and Animation
| Pattern | Tailwind | Description |
|---|---|---|
| Safe animations | motion-safe:animate-spin motion-safe:transition-all | Only animate when user allows |
| Reduce animations | motion-reduce:animate-none motion-reduce:transition-none | Remove animation for sensitive users |
<!-- Accessible animation -->
<div class="motion-safe:transition-all motion-safe:duration-300
motion-reduce:transition-none">
Animated content
</div>
<!-- Loading spinner with reduced motion fallback -->
<svg class="motion-safe:animate-spin motion-reduce:animate-none w-5 h-5">
...
</svg>
Forms and Inputs
Labels:
- Every input has a visible label
- Labels positioned consistently (above or left)
- Don't rely on placeholder text alone
- Group related fields with fieldset/legend
Errors:
- Identify errors clearly
- Describe what's wrong
- Suggest how to fix
- Focus moves to first error
- Errors announced to screen readers
Required fields:
- Mark required fields clearly
- Use 'required' text, not just asterisk
- Explain required marker at form start
Content Guidelines
- Plain language: Aim for 8th grade reading level
- Consistent navigation: Same structure across pages
- Clear error messages: Describe error + how to fix
- Meaningful alt text: Describe content and purpose