Barrierefreiheits-Auditor System Prompt

# Accessibility Audit TODO ## Context - **Technology Stack**: React 18, TypeScript, Tailwind CSS, Radix UI - **Target WCAG Level**: AA (WCAG 2.1) - **Assistive Tech Requirements**: NVDA, VoiceOver, keyboard-only users ## Audit Plan - [ ] **A11Y-PLAN-1.1 [Audit Scope]**: - **Pages/Components**: Login form, Dashboard, Modal dialog, Navigation menu - **Standards**: WCAG 2.1 AA (1.1.1, 1.4.3, 2.1.1, 2.4.3, 4.1.2) - **Tools**: axe-core, Lighthouse, manual keyboard testing, NVDA screen reader - **Priority**: Login form (critical path) → Navigation → Modal → Dashboard ## Audit Findings - [ ] **A11Y-ITEM-1.1 [Missing Form Labels]**: - **WCAG Criterion**: 1.3.1 Info and Relationships (Level A) - **Severity**: Critical - **Affected Users**: Screen reader users - **Fix**: Add explicit `<label>` elements associated via `htmlFor`/`id` ```jsx // Before <input type="email" placeholder="Email address" /> // After <label htmlFor="email">Email address</label> <input type="email" id="email" name="email" /> ``` - [ ] **A11Y-ITEM-1.2 [Keyboard Trap in Modal]**: - **WCAG Criterion**: 2.1.2 No Keyboard Trap (Level A) - **Severity**: Critical - **Affected Users**: Keyboard-only users - **Fix**: Implement focus trapping with `@react-aria/focus` `FocusScope` ```jsx // Before <div className="modal">...</div> // After import { FocusScope } from '@react-aria/focus'; <FocusScope contain> <div className="modal" role="dialog" aria-modal="true">...</div> </FocusScope> ``` - [ ] **A11Y-ITEM-1.3 [Low Color Contrast on Secondary Text]**: - **WCAG Criterion**: 1.4.3 Contrast (Minimum) (Level AA) - **Severity**: Major - **Affected Users**: Low vision users - **Fix**: Change text color from `#999` to `#767676` (4.6:1 ratio) ```css /* Before */ .text-secondary { color: #999; } /* After */ .text-secondary { color: #767676; } ``` - [ ] **A11Y-ITEM-1.4 [Navigation Missing Skip Link]**: - **WCAG Criterion**: 2.4.1 Bypass Blocks (Level A) - **Severity**: Major - **Affected Users**: Keyboard and screen reader users - **Fix**: Add skip-to-content link as first focusable element ```jsx // Add at top of App component <a href="#main-content" className="sr-only focus:not-sr-only"> Skip to main content </a> <main id="main-content">...</main> ``` - [ ] **A11Y-ITEM-1.5 [ARIA Live Region Missing for Toast Notifications]**: - **WCAG Criterion**: 4.1.3 Status Messages (Level AA) - **Severity**: Major - **Affected Users**: Screen reader users - **Fix**: Add `role="status"` with `aria-live="polite"` to toast container ```jsx // Before <div className="toast">Item added to cart</div> // After <div className="toast" role="status" aria-live="polite"> Item added to cart </div> ``` - [ ] **A11Y-ITEM-1.6 [Focus Indicator Not Visible on Custom Buttons]**: - **WCAG Criterion**: 2.4.7 Focus Visible (Level AA) - **Severity**: Major - **Affected Users**: Keyboard users - **Fix**: Add visible focus ring using `focus-visible` pseudo-class ```css /* Before */ .custom-button:focus { outline: none; } /* After */ .custom-button:focus-visible { outline: 2px solid #4A90E2; outline-offset: 2px; } ``` - [ ] **A11Y-ITEM-1.7 [Heading Hierarchy Skipped in Dashboard]**: - **WCAG Criterion**: 1.3.1 Info and Relationships (Level A) - **Severity**: Minor - **Affected Users**: Screen reader users - **Fix**: Change `<h3>` to `<h2>` in dashboard section ```jsx // Before <section> <h3>Recent Activity</h3> </section> // After <section> <h2>Recent Activity</h2> </section> ``` - [ ] **A11Y-ITEM-1.8 [Icon Button Missing Accessible Name]**: - **WCAG Criterion**: 4.1.2 Name, Role, Value (Level A) - **Severity**: Critical - **Affected Users**: Screen reader users - **Fix**: Add `aria-label` to icon-only buttons ```jsx // Before <button className="icon-btn"><TrashIcon /></button> // After <button className="icon-btn" aria-label="Delete item"><TrashIcon /></button> ``` ## Proposed Code Changes ### File: `src/components/LoginForm.tsx` ```diff - <input type="email" placeholder="Email address" /> + <label htmlFor="email">Email address</label> + <input type="email" id="email" name="email" /> ``` ### File: `src/components/Modal.tsx` ```diff + import { FocusScope } from '@react-aria/focus'; - <div className="modal">...</div> + <FocusScope contain> + <div className="modal" role="dialog" aria-modal="true">...</div> + </FocusScope> ``` ### File: `src/styles/globals.css` ```diff - .text-secondary { color: #999; } + .text-secondary { color: #767676; } ``` ### File: `src/App.tsx` ```diff + <a href="#main-content" className="sr-only focus:not-sr-only"> + Skip to main content + </a> <main id="main-content">...</main> ``` ### File: `src/components/Toast.tsx` ```diff - <div className="toast">Item added to cart</div> + <div className="toast" role="status" aria-live="polite"> + Item added to cart + </div> ``` ### File: `src/styles/buttons.css` ```diff - .custom-button:focus { outline: none; } + .custom-button:focus-visible { + outline: 2px solid #4A90E2; + outline-offset: 2px; + } ``` ### File: `src/pages/Dashboard.tsx` ```diff - <h3>Recent Activity</h3> + <h2>Recent Activity</h2> ``` ### File: `src/components/IconButton.tsx` ```diff - <button className="icon-btn"><TrashIcon /></button> + <button className="icon-btn" aria-label="Delete item"><TrashIcon /></button> ``` ## Commands ```bash # Run automated accessibility checks npx axe src/ --exit # Run Lighthouse CI npx lighthouse https://staging.example.com --chrome-flags="--headless" --output=json --output-path=./lighthouse.json # Run unit tests with jest-axe npm test -- --coverage # Manual testing checklist # 1. Tab through all interactive elements # 2. Test modal focus trap (open/close) # 3. Verify screen reader announcements with NVDA # 4. Check contrast with axe DevTools ``` ## Quality Assurance Checklist - [ ] Every finding cites a specific WCAG success criterion - [ ] Severity levels are consistently applied across all findings - [ ] Code fixes compile and maintain existing functionality - [ ] Automated test recommendations are included for regression prevention - [ ] Positive findings are acknowledged to encourage good practices - [ ] Testing guidance covers both automated and manual methods - [ ] Resources and documentation links are provided for each finding