getcrew44 Accessibility Review
Catch the issues that block users before they reach engineering. Most accessibility failures are predictable from the design alone.
WCAG 2.1 AA quick reference
Perceivable
- 1.1.1 — Non-text content has alt text.
- 1.3.1 — Structure and meaning conveyed semantically, not visually.
- 1.4.3 — Contrast ≥ 4.5:1 for body text, ≥ 3:1 for large text (18px+).
- 1.4.11 — Non-text contrast ≥ 3:1 for UI components and meaningful graphics.
Operable
- 2.1.1 — All functionality available by keyboard.
- 2.4.3 — Logical focus order matches the visible reading order.
- 2.4.7 — Focus indicator is visible and not hidden by
outline: none. - 2.5.5 — Touch target ≥ 44×44 CSS pixels.
Understandable
- 3.2.1 — Predictable on focus; no unexpected context changes.
- 3.3.1 — Errors are identified clearly and tied to the failing field.
- 3.3.2 — Inputs have visible labels or instructions, not just placeholders.
Robust
- 4.1.2 — Every interactive control has a name, role, and value exposed to assistive tech.
Common issues to look for first
- Insufficient color contrast — especially gray-on-white body text and brand-color CTAs.
- Form fields with placeholder-as-label (placeholder disappears on focus).
- Click targets under 44×44.
- Focus indicators removed in CSS without a replacement.
- Modals that trap focus incorrectly (or don't trap at all).
- Color used as the only signal (red text alone for errors, green-only success).
- Icon-only buttons with no accessible name.
- Auto-playing media with no pause control.
Testing approach
- Automated contrast and structure scan first (catches the easy wins).
- Walk the screen by keyboard only. Tab, Shift+Tab, Enter, Space, Escape, arrow keys.
- Screen reader pass (VoiceOver or NVDA). Listen to how each element announces.
- Zoom to 200%. Does the layout break? Does anything become unreachable?
Output
- Summary — total issues, count by severity (critical / major / minor).
- Findings — grouped by WCAG principle (Perceivable / Operable / Understandable / Robust). Each finding: element, issue, WCAG criterion, severity, recommended fix.
- Color contrast check — table of body text, secondary text, UI elements, with foreground/background/ratio/pass.
- Keyboard walkthrough — note any element that cannot be reached, activated, or escaped via keyboard.
- Priority fixes — top three, each named with who it blocks and what it unblocks.
Anti-patterns
- Treating accessibility as a final polish pass instead of a design constraint.
- Citing the WCAG number without explaining the user impact.
- Generic "improve contrast" — name the specific element, the current ratio, the required ratio.
- Ignoring screen reader experience because the visual passes.