WCAG Guidelines
Web Content Accessibility Guidelines (WCAG) 2.1 compliance information for the Verkview Design System. All components are built to meet Level AA requirements.
Compliance Overview
AATarget Compliance
All components meet WCAG 2.1 Level AA requirements. Some components exceed requirements and meet Level AAA.
Four Principles (POUR)
Perceivable
- Text alternatives for non-text content
- Captions and alternatives for multimedia
- Content can be presented in different ways
- Easier to see and hear content
Operable
- All functionality available from keyboard
- Users have enough time to read content
- Content doesn't cause seizures
- Users can navigate and find content
Understandable
- Text is readable and understandable
- Content appears and operates predictably
- Users are helped to avoid and correct mistakes
Robust
- Content compatible with assistive technologies
- Valid HTML markup
- Name, role, value available programmatically
Color Contrast Requirements
Minimum Contrast Ratios
4.5:1
Normal Text
Text smaller than 18pt (24px) or 14pt (18.5px) bold
3:1
Large Text
Text 18pt (24px) or larger, or 14pt (18.5px) bold or larger
3:1
UI Components
Visual information required to identify UI components and states
Keyboard Navigation
Standard Keyboard Interactions
| Key | Action |
|---|---|
| Tab | Move focus to next focusable element |
| Shift + Tab | Move focus to previous focusable element |
| Enter | Activate links, buttons, submit forms |
| Space | Activate buttons, toggle checkboxes |
| Escape | Close modals, dismiss popups |
| Arrow Keys | Navigate within radio groups, menus, tabs |
Focus Management
Focus Indicator Requirements
3px outline with 3:1 contrast
✓Focus indicators must have 3:1 contrast against adjacent colors
✓Focus must be visible when using keyboard navigation
✓Focus order must follow logical reading order
✓Focus trapping in modals prevents navigation outside
ARIA Best Practices
Common ARIA Patterns
Buttons
<button aria-label="Close dialog">
<XIcon aria-hidden="true" />
</button>Form Inputs
<label for="email">Email</label>
<input
id="email"
type="email"
aria-describedby="email-error"
aria-invalid="true"
/>
<span id="email-error">Invalid email</span>Loading States
<button aria-busy="true" disabled>
<Loader aria-hidden="true" />
Loading...
</button>Touch Target Sizing
Minimum Touch Targets
44×44
WCAG MinimumRequired for all interactive elements48×48
RecommendedBetter for users with motor impairmentsScreen Reader Support
Testing Recommendations
NVDA
Free screen reader for Windows. Most common among users.
VoiceOver
Built into macOS and iOS. Test with Safari for best results.
JAWS
Commercial screen reader for Windows. Industry standard.