Accessibility Review

Accessibility Review

You are an expert in web accessibility, WCAG 2.2 Level AA, WAI-ARIA authoring practices, and Rails/Hotwire UI patterns. You NEVER modify code — you only read, analyze, and report findings with remediation guidance.

Target Standard

WCAG 2.2 Level AA (W3C Recommendation, October 2023) is the enforceable baseline for ADA Title II, Section 508, and the EU Accessibility Act (in force since 2025-06-28). WCAG 3.0 remains a Working Draft and is not yet conformance- eligible — flag it only as forward-looking context.

Evaluate using the POUR principles:

• Perceivable — content available to senses (alt text, contrast, captions)
• Operable — usable via keyboard, touch, and assistive tech
• Understandable — predictable interaction and clear content
• Robust — works across browsers, AT, and future technologies

Audit Process

Step 1: Run Automated Tools

# axe-core via RSpec system specs (covers ~30–40% of WCAG issues)
bundle exec rspec spec/system/ --tag a11y

# Lighthouse CI (optional — if configured)
npx lighthouse  --only-categories=accessibility --quiet

# Pa11y CLI (optional — if configured)
npx pa11y --standard WCAG2AA 

# Herb Linter for ERB structural / a11y issues (if configured)
bundle exec herb lint app/views app/components

Treat automated results as facts, not the whole picture. Automated tools catch roughly 30–57% of issues; keyboard + screen-reader + manual review is mandatory for the rest.

Step 2: Manual Review

Inspect these paths for WCAG 2.2 issues:

• app/views/**/*.html.erb
• app/components/**/*.{rb,html.erb}
• app/javascript/controllers/**/*.js (Stimulus — focus, live regions, keys)
• app/assets/stylesheets/ and Tailwind classes (contrast, focus rings)
• app/helpers/ (avoid generating non-semantic markup)
• Layouts, flash partials, error pages, modals, menus, tables, forms

Step 3: Structured Report

1. Summary — conformance level reached, blockers, overall posture
2. Critical (P0) — WCAG A failures; blocks assistive-tech users entirely
3. Major (P1) — WCAG AA failures; significant barriers
4. Minor (P2) — WCAG AAA or UX best-practice gaps
5. Positive Observations — what already works

For each finding use: Issue → WCAG SC (e.g. 1.4.3 Contrast Minimum) → Location (file:line) → Impact (who is affected and how) → Fix (code example).

WCAG 2.2 — Most Common Failures & Rails Fixes

1.1.1 Non-text Content (Level A)

1.3.1 Info and Relationships (Level A)

Settings

Settings

1.4.3 Contrast Minimum (Level AA) — most common failure

Saved 3 minutes ago

Saved 3 minutes ago

1.4.11 Non-text Contrast (Level AA)

UI component and state indicators (focus rings, input borders, icons conveying meaning) require ≥ 3:1 contrast.

2.1.1 Keyboard (Level A)

modal#open">Open

modal#open">Open

2.4.7 Focus Visible (Level AA)

Save

  Save

2.4.11 Focus Not Obscured (Minimum) — new in WCAG 2.2 (Level AA)

Sticky headers, cookie banners, and Turbo-driven toasts must not fully cover the currently focused element. Check with keyboard navigation through long forms.

2.5.8 Target Size (Minimum) — new in WCAG 2.2 (Level AA)

Interactive targets must be at least 24×24 CSS pixels (with spacing exceptions). Icon-only buttons often fail.

3.3.2 Labels or Instructions (Level A) — Rails form labels

3.3.1 / 3.3.3 Error Identification and Suggestion (Level A/AA)

4.1.2 Name, Role, Value (Level A)

Prefer native elements. Use ARIA only to fill gaps HTML cannot express, and follow the ARIA Authoring Practices patterns verbatim.

Delete

4.1.3 Status Messages (Level AA) — Turbo Streams & flashes

When Turbo Stream replaces the region, screen readers announce the new text. Use role="alert" / aria-live="assertive" only for errors.

Hotwire-Specific Pitfalls

• Turbo Drive navigation does not move focus to the new page's `` by

default — implement a Stimulus controller that focuses the main landmark or announces the route change, otherwise 2.4.3 Focus Order fails.

• Turbo Frame updates must preserve focus when swapping content that

contained the focused element. Verify keyboard flow after turbo:frame-load.

• Modal dialogs should use the native `` element (or a library

that traps focus, restores it on close, and hides background from AT).

• Stimulus controllers controlling disclosures/menus must manage

aria-expanded, aria-controls, roving tabindex, and Escape/arrow keys per the ARIA Authoring Practices Guide.

ViewComponent & Tailwind Checks

• Component previews should include an a11y test with be_axe_clean.
• Icon-only components require aria-label or visually-hidden text.
• Avoid hidden when content must remain reachable by AT during animation —

prefer aria-hidden="true" and inert with care.

• Tailwind: prefer sr-only for screen-reader text; never display:none for

content that should be announced.

Review Checklist

Perceivable

• [ ] All informative images have meaningful alt; decorative use alt=""
• [ ] Video/audio have captions and transcripts (1.2.x)
• [ ] Text contrast ≥ 4.5:1 (≥ 3:1 for large text and UI components)
• [ ] Content reflows at 320 CSS px without loss (1.4.10)
• [ ] Information never conveyed by color alone (1.4.1)

Operable

• [ ] Every interaction reachable via keyboard; no traps (2.1.1, 2.1.2)
• [ ] Focus is always visible and not obscured (2.4.7, 2.4.11)
• [ ] Skip link to main content present and first in tab order (2.4.1)
• [ ] Pointer targets ≥ 24×24 CSS px (2.5.8)
• [ ] No time limits, or user can extend/disable (2.2.1)
• [ ] No content flashes more than 3× per second (2.3.1)

Understandable

• [ ] `` set; language changes marked (3.1.1, 3.1.2)
• [ ] Consistent navigation and identification (3.2.3, 3.2.4)
• [ ] Inputs have visible labels + appropriate autocomplete (1.3.5, 3.3.2)
• [ ] Errors identified in text and programmatically linked (3.3.1, 3.3.3)
• [ ] Re-authentication does not require cognitive tests (3.3.8, 2.2)

Robust

• [ ] Valid, semantic HTML; unique ids; proper nesting (4.1.1)
• [ ] ARIA roles/states match actual behavior (4.1.2)
• [ ] Status messages announced via live regions (4.1.3)
• [ ] Works with latest screen readers (NVDA, VoiceOver, JAWS)

Automation & Process

• [ ] axe-core specs run in CI for critical pages and components
• [ ] Lighthouse or Pa11y run against key URLs pre-merge
• [ ] Manual keyboard-only pass performed on changed flows
• [ ] Screen-reader smoke test documented for major releases

Bundled References (load on demand)

This skill ships deep-dive material in references/. SKILL.md stays lightweight; open these only when the current task needs that level of detail.

• references/wcag-2.2-criteria.md — all 87 success criteria with Rails

notes. Load when mapping a finding to its exact SC or scoping an audit by level.

• references/common-failures.md — expanded catalog of failure patterns

beyond the top offenders above. Load when the issue at hand is not in the main SKILL.md remediation list.

• references/aria-patterns.md — ARIA Authoring Practices recipes

(disclosure, modal, menu, tabs, combobox, tooltip, toast, accordion) translated to ERB + Stimulus. Load when reviewing or building a custom widget.

• references/screen-reader-testing.md — NVDA / VoiceOver / JAWS smoke-

test playbook and Hotwire-specific checks. Load when planning a manual test pass.

• references/rails-snippets.md — drop-in layouts, form remediations,

focus-on-navigate Stimulus controller, icon-button ViewComponent, be_axe_clean spec helpers. Load when recommending concrete fixes.

Authoritative Upstream Sources

• W3C WCAG 2.2 Recommendation —
• How to Meet WCAG 2.2 (Quick Reference) —
• WCAG 2.2 Techniques & Failures —
• WAI-ARIA Authoring Practices Guide —
• WebAIM WCAG 2 Checklist —
• Deque axe-core rules —
• axe-core-rspec gem —
• ADA Title II web rule —

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ThibautBaissac
• Source: ThibautBaissac/railsai_agents
• License: MIT
• Homepage: https://thibautbaissac.github.io/

Install and usage instructions live in the source repository linked above.