100 lines
2.2 KiB
Markdown
100 lines
2.2 KiB
Markdown
# 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
|
|
|
|
### Keyboard Navigation
|
|
- [ ] 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
|
|
|
|
```css
|
|
/* 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;
|
|
}
|
|
}
|
|
```
|
|
|
|
```blade
|
|
<!-- 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
|