Skip to content

ACCESSIBILITY.md

Latest commit

 

History

History
85 lines (69 loc) · 4.33 KB

ACCESSIBILITY.md

File metadata and controls

85 lines (69 loc) · 4.33 KB
Raw

BettaPay Accessibility (a11y) Audit Report

WCAG 2.1 AA Compliance Status

Implemented Features

Skip Navigation

  • Skip-to-main-content link present in app/layout.tsx:24-29
  • Hidden by default, visible on focus for keyboard users
  • Links to #main-content anchor present on all page layouts

Keyboard Navigation

  • All interactive elements are focusable
  • Focus-visible indicators added via globals.css with 2px outline + 4px ring
  • Mobile navigation drawer includes focus trap (Tab cycling)
  • Escape key closes mobile navigation drawer
  • Minimum touch target size of 44x44px on interactive elements

ARIA Labels & Roles

  • Navigation landmarks labeled: aria-label="Main navigation" on Header, Sidebar
  • Mobile navigation: role="dialog", aria-modal="true", aria-label="Mobile navigation"
  • Buttons with icon-only content include aria-label (Copy, QR Code, Theme toggle, etc.)
  • Search form includes role="search" and aria-label="Site search"
  • Form inputs include aria-label attributes
  • Decorative icons marked with aria-hidden="true"
  • Error display includes role="alert" for screen reader announcements
  • Live regions added for dynamic content (aria-live="polite")

Heading Hierarchy

  • Landing page: h1 (headline) → h2 (features section) → h3 (feature cards)
  • Status page: h1 (System Status) → h2 (Services, Incident History, Subscribe)
  • All pages use semantic heading levels without skipping

Form Accessibility

  • Auth layout Terms/Privacy links updated to use Next.js Link components
  • Form inputs have associated labels via aria-label
  • Required fields indicated with required attribute
  • Error states communicated via role="alert"

Color & Contrast

  • Text colors use CSS custom properties for theme-aware contrast
  • Primary text: --foreground: #0F172A on white background (contrast > 7:1)
  • Muted text: --muted-foreground: #64748B on white (contrast > 4.5:1)
  • Interactive elements have minimum 3:1 contrast ratio
  • Focus indicators use --ring color for consistent visibility

Images & Decorative Elements

  • Logo images have appropriate alt text or alt="" for decorative
  • Decorative icons use aria-hidden="true"
  • Background decorations marked as aria-hidden="true"

Dynamic Content

  • Toast notifications via Sonner library (accessible by default)
  • Loading states include role="status" with screen reader text
  • Status page auto-refresh announced via aria-live="polite"

Files Modified for Accessibility

  1. components/layout/Header.tsx — Added aria-label to nav, fixed broken anchor links
  2. components/layout/Footer.tsx — Added aria-label to icon links, made status indicator a link
  3. components/layout/MobileBottomNav.tsx — Added aria-current="page" for active states
  4. components/layout/MobileNavDrawer.tsx — Added focus trap, keyboard handling, aria-hidden on icons
  5. components/shared/EmptyState.tsx — Added role="status", aria-hidden on decorative icon
  6. components/shared/ErrorDisplay.tsx — Added role="alert", fixed color contrast to use destructive variant
  7. app/auth/layout.tsx — Added aria-hidden on decorative bg, fixed Terms/Privacy links
  8. app/auth/register/page.tsx — Added role="status", aria-live="polite", aria-hidden on spinner
  9. app/page.tsx — Added aria-hidden on decorative elements, role="list" on feature cards
  10. app/globals.css — Enhanced focus-visible styles for WCAG compliance
  11. app/status/page.tsx — Added aria-labelledby for section headings
  12. components/status/OverallBanner.tsx — Added role="status", aria-live="polite"
  13. components/status/SubscribeForm.tsx — Added aria-label on email input

Testing Recommendations

  1. Automated Testing: Run axe-core accessibility scanner
  2. Keyboard Testing: Tab through all pages, verify focus order and visibility
  3. Screen Reader Testing: Test with VoiceOver (macOS) or NVDA (Windows)
  4. Color Contrast: Verify with WebAIM Contrast Checker
  5. Mobile Testing: Verify touch targets and mobile navigation on iOS/Android

Known Limitations

  • Third-party components (Google OAuth, Stellar Wallet) may have their own accessibility characteristics
  • Charts (Recharts) provide limited built-in accessibility; consider adding data tables as alternatives
  • PDF invoice generation (jsPDF) may not produce accessible PDFs