mcpField
A
accessibility-auditing

accessibility-auditing

github.com/spencerpaulyTesting & quality868520 installsUpdated 13w ago
Repository

About accessibility-auditing

accessibility-auditing is a skill for developers that reviews web pages using Cursor's built-in browser. It checks the accessibility tree, keyboard behavior, and visual contrast, then reports issues and suggests fixes.

Key features

  1. 01Inspect the page accessibility tree
  2. 02Review labels and semantic HTML
  3. 03Test keyboard navigation and focus
  4. 04Check ARIA attribute issues
  5. 05Assess contrast from screenshots
  6. 06Report issues and suggest fixes

Use cases

  1. 01Find controls without accessible names
  2. 02Verify keyboard access to interactive elements
  3. 03Spot heading hierarchy and landmark issues

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill accessibility-auditing

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

Details

From the project README

Accessibility Auditing

Audit a web page for accessibility issues using Cursor's built-in browser without external tools.

Workflow

1. Open the Page

Use browser_navigate to open the target URL.

2. Capture the Accessibility Tree

Use browser_snapshot — this returns the aria/accessibility tree of the page. This is the same tree that screen readers use.

3. Audit the Tree

Check for these issues:

Missing Labels

  • button elements with no accessible name (no text, no aria-label)
  • img elements with no alt text
  • input elements with no associated label or aria-label
  • a (link) elements with no text content
  • Icon-only buttons missing aria-label

Semantic HTML

  • Clickable div or span elements → should be button or a
  • Missing nav, main, header, footer landmarks
  • Headings that skip levels (h1 → h3)
  • Lists that aren't using ul/ol/li

Keyboard Navigation

  • Interactive elements missing from tab order
  • Custom widgets without role and keyboard handlers
  • Focus traps in modals (should trap focus, but also allow Escape to close)
  • Skip-to-content link missing

ARIA Issues

  • aria-hidden="true" on focusable elements
  • Invalid role values
  • aria-expanded without corresponding collapsible content
  • aria-controls pointing to non-existent IDs

Contrast (use screenshot for visual check)

  • Light gray text on white backgrounds
  • Placeholder text that's too faint
  • Disabled states that are indistinguishable
4. Test Keyboard Navigation

Use browser_press to simulate Tab key presses and verify:

  • Every interactive element receives focus
  • Focus order is logical (top-to-bottom, left-to-right)
  • Focus is visible (focus ring or outline)
  • Escape closes modals/dropdowns
5. Report
Accessibility Audit:
  Critical:
    - 3 buttons with no accessible name (header icons)
    - Login form inputs missing labels
  Warnings:
    - Heading levels skip from h1 to h3
    - No skip-to-content link
    - 2 clickable divs should be buttons
  Passed:
    - All images have alt text
    - Landmarks present (nav, main, footer)
    - Focus order is logical
6. Fix

For each issue, apply the fix in the source code. Common fixes:

  • Add aria-label="Close" to icon buttons
  • Wrap inputs in <label> or add htmlFor
  • Change <div onClick> to <button>
  • Add alt text to images
  • Fix heading hierarchy

Comments

Markdown supported