mcpField
A
accessibility-auditing

accessibility-auditing

github.com/revitalb-portTesting & quality065 installsUpdated 10w ago
Repository

About accessibility-auditing

accessibility-auditing is a skill for auditing web pages with Cursor's built-in browser. It uses the accessibility tree, screenshots, and keyboard navigation checks to identify issues and guide source fixes.

Key features

  1. 01Inspect the accessibility tree
  2. 02Check accessible names and semantic HTML
  3. 03Test keyboard focus and navigation
  4. 04Review ARIA attributes and relationships
  5. 05Visually check contrast in screenshots
  6. 06Report issues and apply source fixes

Use cases

  1. 01Audit a page for missing labels
  2. 02Find keyboard navigation barriers
  3. 03Review ARIA and heading structure
  4. 04Fix accessibility issues in source code

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/revitalb-port/skills-registry-demo --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