Accessibility

Add WCAG accessibility rules to your agents and audit your code.

Three-Prong Approach

Hypr's accessibility approach combines three strategies:

Generate Accessible Code
Add WCAG rules to your agents so they produce accessible code from the start.
Third-Party Tools
Integrate tools like axe-core in CI/CD for automated testing.
AI Review
Use the Accessibility Analyzer for comprehensive audits.

Enable accessibility rules on your existing agents:

/hypr:a11y

This adds WCAG 2.1 AA rules to your frontend and backend executors, so they generate accessible code by default.

Audit existing code against WCAG criteria:

/hypr:a11y-audit

The Accessibility Analyzer grades your code against all 78 WCAG 2.1 success criteria and reports the conformance level (A, AA, or AAA).

All 78 success criteria the Accessibility Analyzer checks, grouped by conformance level.

ID	Name	Requirement
1.1.1	Non-text Content	Images have alt text
1.2.1	Audio-only/Video-only	Provide transcripts
1.2.2	Captions (Prerecorded)	Videos have captions
1.2.3	Audio Description	Video has description or transcript
1.3.1	Info and Relationships	Use semantic HTML
1.3.2	Meaningful Sequence	DOM order = visual order
1.3.3	Sensory Characteristics	Don't rely only on shape/color
1.4.1	Use of Color	Color not sole indicator
1.4.2	Audio Control	Can pause auto-playing audio

ID	Name	Requirement
2.1.1	Keyboard	All features work with keyboard
2.1.2	No Keyboard Trap	Can tab away from everything
2.1.4	Character Key Shortcuts	Can disable single-key shortcuts
2.2.1	Timing Adjustable	Can extend time limits
2.2.2	Pause, Stop, Hide	Can pause moving content
2.3.1	Three Flashes	No fast flashing content
2.4.1	Bypass Blocks	Skip link or landmarks
2.4.2	Page Titled	Descriptive page title
2.4.3	Focus Order	Logical tab order
2.4.4	Link Purpose	Link text describes destination
2.5.1	Pointer Gestures	Single-point alternatives
2.5.2	Pointer Cancellation	Click on up-event
2.5.3	Label in Name	Accessible name = visible text
2.5.4	Motion Actuation	Alternatives to shake/tilt

ID	Name	Requirement
4.1.2	Name, Role, Value	Custom components have ARIA

ID	Name	Requirement
1.2.4	Captions (Live)	Live video has captions
1.2.5	Audio Description	Video has audio description
1.3.4	Orientation	Works portrait and landscape
1.3.5	Identify Input Purpose	Use autocomplete attributes
1.4.3	Contrast (Minimum)	4.5:1 text, 3:1 large text
1.4.4	Resize Text	Works at 200% zoom
1.4.5	Images of Text	Use real text, not images
1.4.10	Reflow	No horizontal scroll at 320px
1.4.11	Non-text Contrast	3:1 for UI components
1.4.12	Text Spacing	Works with increased spacing
1.4.13	Content on Hover/Focus	Dismissible and persistent

ID	Name	Requirement
3.2.3	Consistent Navigation	Same nav order on all pages
3.2.4	Consistent Identification	Same labels for same functions
3.3.3	Error Suggestion	Suggest how to fix errors
3.3.4	Error Prevention	Can review before submit

ID	Name	Requirement
4.1.3	Status Messages	Use `aria-live` for updates

ID	Name	Requirement
2.1.3	Keyboard (No Exception)	Everything keyboard accessible
2.2.3	No Timing	No time limits
2.2.4	Interruptions	Can postpone interruptions
2.2.5	Re-authenticating	Preserve data on timeout
2.3.2	Three Flashes	No flashing at all
2.3.3	Animation from Interactions	Can disable animations
2.4.8	Location	Breadcrumbs present
2.4.9	Link Purpose (Link Only)	Link text alone is clear
2.4.10	Section Headings	Content has section headings
2.5.5	Target Size	44x44px minimum
2.5.6	Concurrent Input	Multiple input methods work

ID	Name	Requirement
3.1.2	Language of Parts	`lang` on foreign text
3.1.3	Unusual Words	Define jargon/idioms
3.1.4	Abbreviations	Expand abbreviations
3.1.5	Reading Level	Simple language version
3.1.6	Pronunciation	Pronunciation for ambiguous words
3.2.5	Change on Request	User initiates all changes
3.3.5	Help	Context-sensitive help
3.3.6	Error Prevention (All)	Review before all submissions