UI Accessibility Library Demo

Interactive examples of accessibility features with WCAG 2.1 Level AA compliance.

This page demonstrates various accessibility features. Use keyboard shortcuts: Ctrl+Shift+A to make announcements, Ctrl+M to toggle modal.

Accessibility Preferences

High Contrast: {{ currentPreferences.prefersHighContrast ? 'Enabled' : 'Disabled' }}

Reduced Motion: {{ currentPreferences.prefersReducedMotion ? 'Enabled' : 'Disabled' }}

Color Scheme: {{ currentPreferences.colorScheme || 'Not detected' }}

Refresh Preferences

Live Announcements

Make Announcement Sequence Announcement
Success Message Error Message Loading Message Simulate Validation

Focus Management

Focus via Keyboard Focus via Mouse Focus via Program

Focus Trap

{{ trapEnabled ? 'Disable' : 'Enable' }} Focus Trap

Focus Trap Container {{ trapEnabled ? '(Active)' : '(Inactive)' }}

When enabled, Tab navigation will be trapped within this container.

Trapped Button 1 Trapped Button 2

Vertical Navigation (Use ↑↓ arrows):

    @for (item of navigationItems; track item.id) {
  • {{ item.label }}
    • }

Grid Navigation (Use ↑↓←→ arrows, 3 columns):

@for (item of gridItems; track item.id) { }
Open Modal @if (showModal) {
}

Screen Reader Components

Screen Reader Only Text:

This text is visible. This text is only for screen readers. This text is visible again.

Focusable Screen Reader Text:

This text becomes visible when focused (try tabbing through the page).

Dynamic Status Messages:

Form submitted successfully! Error: Please check your input.

Keyboard Shortcuts

Ctrl + Shift + A
Make announcement
Ctrl + M
Toggle modal
Tab / Shift + Tab
Navigate through interactive elements
Arrow Keys
Navigate within lists and grids (when focused)
Home / End
Jump to first/last item in navigable containers
Escape
Close modal or exit focus trap