generated sotries

2025-12-20 21:04:23 +02:00
parent d889b24f12
commit 8f95089814
65 changed files with 9501 additions and 0 deletions
@@ -0,0 +1,99 @@
+# 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