designengineering
Accessibility Audit Report
Write structured accessibility audit reports with findings mapped to WCAG criteria, severity levels, affected components, remediation steps, and a prioritized fix timeline.
accessibilitya11yWCAGaudit-reportremediationcompliance
Works well with agents
Works well with skills
$ npx skills add The-AI-Directory-Company/(…) --skill accessibility-audit-reportaccessibility-audit-report/
signup-flow-audit.md
Markdown
| 1 | # Accessibility Audit Report: Signup Flow |
| 2 | |
| 3 | ## 1. Executive Summary |
| 4 | |
| 5 | This audit evaluated 5 screens across the signup flow (`/signup`, `/verify-email`, `/create-org`, `/invite-team`, `/onboarding-complete`) against WCAG 2.1 AA. We identified 11 issues: 2 critical, 4 major, 3 minor, and 2 best-practice recommendations. The most critical finding is that the email verification code input is built with non-semantic `<div>` elements, making it completely inaccessible to screen reader and keyboard-only users. |
| 6 | |
| 7 | ## 2. Scope & Methodology |
| 8 | |
| 9 | ``` |
| 10 | Tested: /signup, /verify-email, /create-org, /invite-team, /onboarding-complete |
| 11 | Not tested: Login, password reset, account settings |
| 12 | Methods: axe-core 4.10, NVDA 2025.1 + Chrome 124, VoiceOver + Safari 17.4, |
| 13 | manual keyboard navigation, colour contrast analyzer (CCA) |
| 14 | Date: March 2026 |
| 15 | ``` |
| 16 | |
| 17 | ## 3. Summary of Findings |
| 18 | |
| 19 | | # | Issue | WCAG Criterion | Severity | Page | |
| 20 | |---|-------|---------------|----------|------| |
| 21 | | 1 | Verification code input not keyboard accessible | 2.1.1 Keyboard | Critical | /verify-email | |
| 22 | | 2 | Form errors not announced to screen readers | 4.1.3 Status Messages | Critical | /signup | |
| 23 | | 3 | Password requirements not programmatically associated | 1.3.1 Info and Relationships | Major | /signup | |
| 24 | | 4 | "Create organization" button has no accessible name | 4.1.2 Name, Role, Value | Major | /create-org | |
| 25 | | 5 | Stepper component not conveyed to assistive tech | 1.3.1 Info and Relationships | Major | All | |
| 26 | | 6 | Low contrast on placeholder text | 1.4.3 Contrast (Minimum) | Major | /signup, /create-org | |
| 27 | | 7 | Focus not moved to error summary on submission | 3.3.1 Error Identification | Minor | /signup | |
| 28 | | 8 | Decorative icons missing `aria-hidden` | 1.1.1 Non-text Content | Minor | /invite-team | |
| 29 | | 9 | Link text "Click here" is ambiguous | 2.4.4 Link Purpose | Minor | /verify-email | |
| 30 | | 10 | No skip-to-content link | 2.4.1 Bypass Blocks | Best Practice | All | |
| 31 | | 11 | Success animation ignores `prefers-reduced-motion` | 2.3.3 Animation from Interactions | Best Practice | /onboarding-complete | |
| 32 | |
| 33 | ## 4. Detailed Findings |
| 34 | |
| 35 | ### Finding #1: Verification code input not keyboard accessible |
| 36 | |
| 37 | - **WCAG Criterion**: 2.1.1 Keyboard |
| 38 | - **Severity**: Critical |
| 39 | - **Affected Element**: `.verify-code-input` on `/verify-email` |
| 40 | - **Description**: The 6-digit verification code input is built with styled `<div>` elements that capture click events via JavaScript. Keyboard users cannot tab into the fields or type a code. Screen readers announce nothing. This blocks all keyboard and screen reader users from completing signup. |
| 41 | - **Remediation**: Replace the `<div>` elements with six `<input type="text" inputmode="numeric" maxlength="1">` elements, grouped within a `<fieldset>` with a `<legend>`. Manage focus to auto-advance on input. |
| 42 | - **Code Example**: |
| 43 | ```html |
| 44 | <!-- Before --> |
| 45 | <div class="verify-code-input"> |
| 46 | <div class="code-digit" onclick="focusDigit(0)"></div> |
| 47 | <div class="code-digit" onclick="focusDigit(1)"></div> |
| 48 | </div> |
| 49 | |
| 50 | <!-- After --> |
| 51 | <fieldset> |
| 52 | <legend>Enter your 6-digit verification code</legend> |
| 53 | <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 1 of 6"> |
| 54 | <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2 of 6"> |
| 55 | </fieldset> |
| 56 | ``` |
| 57 | |
| 58 | ### Finding #2: Form errors not announced to screen readers |
| 59 | |
| 60 | - **WCAG Criterion**: 4.1.3 Status Messages |
| 61 | - **Severity**: Critical |
| 62 | - **Affected Element**: `.form-error-message` on `/signup` |
| 63 | - **Description**: When the signup form is submitted with invalid data, error messages appear visually below each field but are not announced by screen readers. Users relying on NVDA or VoiceOver do not know their submission failed or why. |
| 64 | - **Remediation**: Add `role="alert"` to the error container, or use `aria-live="assertive"` so messages are announced on appearance. Associate each error with its field using `aria-describedby`. |
| 65 | |
| 66 | ### Finding #6: Low contrast on placeholder text |
| 67 | |
| 68 | - **WCAG Criterion**: 1.4.3 Contrast (Minimum) |
| 69 | - **Severity**: Major |
| 70 | - **Affected Element**: `input::placeholder` on `/signup` and `/create-org` |
| 71 | - **Description**: Placeholder text uses `#C4C4C4` on `#FFFFFF`, yielding a contrast ratio of 1.6:1 (requires 4.5:1). Users with low vision cannot read the placeholder examples. |
| 72 | - **Remediation**: Change placeholder color to `#717171` or darker to achieve at least 4.5:1 contrast. |
| 73 | |
| 74 | ## 5. Remediation Priority Matrix |
| 75 | |
| 76 | | | Low Effort | High Effort | |
| 77 | |---|-----------|-------------| |
| 78 | | **High Impact** | #2 (add `role="alert"`), #4 (add `aria-label`), #6 (fix color), #8 (`aria-hidden`) | #1 (rebuild verification input), #5 (rebuild stepper with ARIA) | |
| 79 | | **Low Impact** | #9 (rewrite link text), #10 (add skip link) | #3 (restructure password hints), #7 (focus management), #11 (motion query) | |
| 80 | |
| 81 | ## 6. Recommended Timeline |
| 82 | |
| 83 | ``` |
| 84 | Week 1: Critical findings #1, #2 |
| 85 | Week 2-3: Major findings #3, #4, #5, #6 |
| 86 | Week 4: Minor findings #7, #8, #9 |
| 87 | Ongoing: Best-practice items #10, #11 integrated into design system |
| 88 | ``` |
| 89 | |
| 90 | **Regression prevention**: Add `axe-core` to the CI pipeline. Require all new form components to pass keyboard navigation and screen reader smoke tests before merge. |
| 91 |