2.2 KiB

Raw Blame History

Story 9.10: Accessibility Compliance

Epic Reference

Epic 9: Design & Branding Implementation

User Story

As a user with disabilities, I want the platform to be accessible, So that I can use it regardless of my abilities.

Acceptance Criteria

Color Contrast

Body text: 4.5:1 minimum
Large text: 3:1 minimum
UI elements: 3:1 minimum

Focus Indicators

Visible focus outline (gold)
Not just color change

All interactive elements reachable
Logical tab order
Skip to main content link

Screen Readers

Proper heading hierarchy (h1 > h2 > h3)
Alt text for images
ARIA labels where needed
Form labels associated

Motion

Respect prefers-reduced-motion
No auto-playing animations

Technical Notes

/* Focus styles */
:focus-visible {
  @apply outline-2 outline-offset-2 outline-gold;
}

/* Skip link */
.skip-link {
  @apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4
         focus:bg-gold focus:text-navy focus:px-4 focus:py-2 focus:rounded focus:z-50;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

<!-- Skip link -->
<a href="#main-content" class="skip-link">
    {{ __('accessibility.skip_to_content') }}
</a>

<!-- Main content landmark -->
<main id="main-content" role="main">
    {{ $slot }}
</main>

<!-- Proper labeling -->
<label for="email">{{ __('form.email') }}</label>
<input id="email" type="email" aria-required="true" />

<!-- Image with alt text -->
<img src="{{ asset('images/logo.svg') }}" alt="{{ __('Libra Law Firm Logo') }}" />

Testing Tools

axe DevTools
WAVE
Lighthouse
Screen reader (VoiceOver/NVDA)

Definition of Done

Color contrast passes
Focus indicators visible
Keyboard navigation works
Screen reader friendly
Reduced motion respected
Skip link works
Lighthouse accessibility > 90
Tests pass

Estimation

Complexity: Medium | Effort: 4-5 hours

2.2 KiB Raw Blame History