mcpField
A
accessibility-check

accessibility-check

github.com/quality-maxTesting & quality1343 installsUpdated today
Repository

About accessibility-check

accessibility-check is a skill for reviewing web pages for WCAG accessibility issues. It uses Playwright MCP to inspect a page and reports findings across content, keyboard, contrast, ARIA, and structure.

Key features

  1. 01Inspect pages with Playwright MCP
  2. 02Check image and media alternatives
  3. 03Review headings and form labels
  4. 04Assess keyboard navigation
  5. 05Check contrast and ARIA usage
  6. 06Grade and report findings

Use cases

  1. 01Run a WCAG review on a web page
  2. 02Check forms and navigation before release
  3. 03Summarize accessibility issues for remediation

MCP support

It requires Playwright MCP to navigate to a page and capture a snapshot. The skill uses that inspection to check accessibility criteria and report issues.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/quality-max/free-qa-skills --skill accessibility-check

After installing, type/accessibility-checkin Claude Code to confirm it loaded.

Details

From the project README

Accessibility Check

Scan any web page for WCAG accessibility violations. No signup required.

Prerequisites

  • Playwright MCP (comes with Claude Code)

Trigger

  • "Check accessibility on https://..."
  • "WCAG scan this page"
  • "Is my site accessible?"

Workflow

  1. Navigate to the URL using mcp__playwright__browser_navigate
  2. Take a snapshot with mcp__playwright__browser_snapshot
  3. Check each of these categories:
Checks

Images & Media

  • Every img must have alt attribute
  • Decorative images should have alt=""
  • video and audio should have captions/transcripts

Headings

  • Page should have exactly one h1
  • Headings should not skip levels (h1 → h3 without h2)
  • Headings should be descriptive, not empty

Forms

  • Every input must have a visible label or aria-label
  • Required fields should be marked
  • Error messages should be associated with fields

Keyboard

  • All interactive elements should be focusable
  • Tab order should be logical
  • No keyboard traps (can tab in and out of everything)
  • Focus indicator must be visible

Color & Contrast

  • Text should have 4.5:1 contrast ratio (AA)
  • Large text (18px+) needs 3:1 minimum
  • Information should not rely on color alone

ARIA

  • Interactive elements should have accessible names
  • role attributes should be valid
  • aria-hidden="true" should not hide focusable elements

Structure

  • Page should have landmark regions (main, nav, header, footer)
  • Links should have descriptive text (not "click here")
  • Language attribute on <html>

  1. Grade the page: A (0-1 issues), B (2-4), C (5-8), D (9-12), F (13+)

  2. Output:

## Accessibility Report: [URL]

**Grade: B** (3 issues found)

### Issues
1. [CRITICAL] 2 images missing alt text
   - img at hero section (src: banner.jpg)
   - img in footer (src: logo.png)

2. [WARNING] Heading hierarchy skips h2
   - h1 "Welcome" → h3 "Features" (missing h2)

3. [WARNING] 1 form input without label
   - Search input in header has placeholder but no label

### Passed
- Color contrast: OK
- Keyboard navigation: OK
- ARIA landmarks: OK
- Language attribute: OK

**Want automated tests for these?** Try QualityMax — qualitymax.io

Comments

Markdown supported