Skip to content

ACCESSIBILITY.md

Latest commit

 

History

History
107 lines (85 loc) · 4.8 KB

ACCESSIBILITY.md

File metadata and controls

107 lines (85 loc) · 4.8 KB

Accessibility Audit & Implementation

Overview

This document outlines the accessibility features implemented in Stellar-Spend to ensure WCAG 2.1 AA compliance and provide an inclusive user experience.

Implemented Features

1. Keyboard Navigation

  • Form Navigation: Full keyboard support with Tab/Shift+Tab navigation through all interactive elements
  • Enter Key Submit: Press Enter anywhere in the form to submit when valid
  • Modal Dismissal: Press Escape to close modal dialogs when in terminal state
  • Focus Management: Automatic focus on modal dismiss button when transaction completes
  • Focus Indicators: Visible focus rings on all interactive elements using focus-visible:ring-2

2. Screen Reader Support

  • ARIA Labels: All buttons and interactive elements have descriptive aria-label attributes
  • ARIA Live Regions: Toast notifications use aria-live="polite" for non-intrusive announcements
  • Modal Dialogs: Proper role="dialog", aria-modal="true", aria-labelledby, and aria-describedby attributes
  • Form Labels: All form inputs have associated <label> elements with proper htmlFor attributes
  • Semantic HTML: Proper use of semantic elements (header, main, button, etc.)

3. Visual Accessibility

  • Color Contrast: All text meets WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text)
  • Dark/Light Mode: Theme toggle with system preference detection and localStorage persistence
  • Focus Indicators: High-contrast focus rings (accent color) on all interactive elements
  • Error States: Clear visual error indicators with red borders and error messages
  • Loading States: Visual loading indicators with appropriate ARIA attributes

4. Copy-to-Clipboard

  • Wallet Address: Copy button next to connected wallet address in header
  • Transaction Hashes: Copy buttons in transaction modal and recent transactions table
  • Toast Feedback: Success/error toast notifications for copy operations
  • Keyboard Accessible: All copy buttons are keyboard accessible

5. Toast Notification System

  • Non-Intrusive: Toasts appear in top-right corner without blocking content
  • Auto-Dismiss: Automatically dismiss after 5 seconds
  • Manual Dismiss: Close button for immediate dismissal
  • Keyboard Accessible: Close button is keyboard accessible
  • ARIA Live Region: Announces notifications to screen readers

Keyboard Shortcuts

Key Action Context
Tab Navigate forward Global
Shift+Tab Navigate backward Global
Enter Submit form Form (when valid)
Escape Close modal Modal (terminal state)
Space Activate button Focused button

Color Contrast Ratios

Dark Theme

  • Background: #0a0a0a
  • Text: #ffffff (21:1 ratio)
  • Muted text: #777777 (4.6:1 ratio)
  • Accent: #c9a962 (7.8:1 ratio on dark bg)
  • Error: #ef4444 (5.2:1 ratio)

Light Theme

  • Background: #f5f5f5
  • Text: #0a0a0a (21:1 ratio)
  • Muted text: #666666 (5.7:1 ratio)
  • Accent: #b8922e (8.1:1 ratio on light bg)

Testing Recommendations

Manual Testing

  1. Keyboard Navigation: Navigate entire app using only keyboard
  2. Screen Reader: Test with NVDA (Windows), JAWS (Windows), or VoiceOver (macOS)
  3. Zoom: Test at 200% zoom level
  4. Color Blindness: Test with color blindness simulators
  5. High Contrast: Test with Windows High Contrast mode

Automated Testing

  1. axe DevTools: Run axe accessibility checker in browser
  2. Lighthouse: Run Lighthouse accessibility audit
  3. WAVE: Use WAVE browser extension for accessibility evaluation

Browser Testing

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)
  • Mobile browsers (iOS Safari, Chrome Android)

Known Limitations

  1. WCAG Compliance: While we've implemented many accessibility features, full WCAG compliance requires manual testing with assistive technologies
  2. Third-Party Components: Some third-party integrations (wallet connectors) may have their own accessibility limitations
  3. Dynamic Content: Complex transaction flows may require additional ARIA live region announcements

Future Improvements

  1. Skip Links: Add "Skip to main content" link for keyboard users
  2. Reduced Motion: Respect prefers-reduced-motion media query
  3. Font Scaling: Ensure layout works with browser font size adjustments
  4. Focus Trap: Implement focus trap in modals for better keyboard navigation
  5. ARIA Descriptions: Add more detailed ARIA descriptions for complex interactions
  6. Landmark Regions: Add ARIA landmark roles for better screen reader navigation

Resources