Accessibility Showcase
Interactive demos of WCAG compliance, keyboard navigation, focus management, and screen reader support.
Critical Rules Demonstrated
-
A11Y-001View Rule Details →
Color Contrast Comparison
White on Marine
11.3:1 AAA Pass
Navy on Citrus
8.2:1 AAA Pass
White on Citrus
2.3:1 Fail
Pale Blue on Navy
10.8:1 AAA Pass
Focus States
Tab through the elements below to see visible focus indicators:
Skip Navigation Link
Press Tab at the top of any page to reveal the skip link:
Skip to main content
Main content starts here. The skip link allows keyboard users to bypass repetitive navigation.
ARIA Labels
Icon-only Button
aria-label="Close dialog" Status Message
File uploaded successfully
role="status" aria-live="polite" Required Field
aria-required="true" Text Sizing
36px+ (Display) Chronicle Display
16px (Body) Montserrat body text at recommended size
14px (Minimum) Montserrat at minimum readable size
12px (Too small) Text below minimum - avoid this size for body content
Brand Rules Applied
- A11Y-001: Minimum 4.5:1 contrast ratio for all text, visible focus states, proper ARIA usage, and minimum 14px body text