mcpField
A
a11y

a11y

Local
github.com/rog0xDeveloper Tools0Updated 32w ago
Repository

About a11y

An MCP server that provides web accessibility checks for AI agents working with HTML. It covers image alt text, heading structure, color contrast, ARIA attributes and form labels, with findings tailored to common accessibility rules.

Key features

  1. 01Check image alt text quality
  2. 02Validate heading order and outline
  3. 03Measure WCAG color contrast
  4. 04Validate ARIA roles and properties
  5. 05Audit form labels and IDs

Use cases

  1. 01Review HTML image descriptions
  2. 02Find heading hierarchy issues
  3. 03Check text color contrast compliance
  4. 04Audit ARIA and form accessibility

MCP support

It exposes accessibility analysis tools to MCP clients, which can submit HTML or color pairs for checks.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "rog0x-a11y": {
      "command": "npx",
      "args": [
        "-y",
        "@rog0x/mcp-a11y-tools"
      ]
    }
  }
}
Run commandnpx -y @rog0x/mcp-a11y-tools

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@rog0x/mcp-a11y-tools1.0.2

Tools

5

Saved tool list · updated 3w ago

ParameterTypeRequiredDescription
htmlstringYesThe HTML content to analyze for image alt text

Details

From the project README

mcp-a11y-tools

Web accessibility analysis tools for AI agents, served over the Model Context Protocol (MCP).

Tools

check_alt_text

Analyze images in HTML for missing, empty, or low-quality alt text.

  • Detects missing alt attributes
  • Identifies decorative images (alt="" with role="presentation")
  • Flags low-quality alt text (e.g., "image", "photo", filenames)
  • Checks linked images, <input type="image">, and <area> elements
check_heading_hierarchy

Validate heading structure for proper nesting and content quality.

  • Verifies h1-h6 order with no skipped levels
  • Ensures a single <h1> per page
  • Detects empty, too-short, or too-long headings
  • Supports role="heading" with aria-level
  • Returns a visual tree of the heading outline
check_color_contrast

Check WCAG 2.x contrast ratio for foreground/background color pairs.

  • Calculates precise contrast ratio per WCAG relative luminance formula
  • Reports AA and AAA compliance for normal and large text
  • Accepts hex (#fff, #ffffff), rgb(r,g,b), and named colors
validate_aria

Validate ARIA attributes on HTML elements.

  • Detects invalid ARIA roles
  • Checks for missing required ARIA properties per role
  • Flags redundant ARIA roles that match native semantics
  • Warns about aria-label on non-interactive elements
  • Catches aria-hidden="true" on focusable elements
check_form_accessibility

Audit form elements for accessibility compliance.

  • Verifies every input has an associated label (explicit, implicit, or ARIA)
  • Checks radio/checkbox groups for <fieldset> and <legend>
  • Flags placeholder text used as the only label
  • Suggests autocomplete attributes for personal info fields
  • Detects duplicate IDs that break label association

Setup

npm install
npm run build

Usage with Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "a11y-tools": {
      "command": "node",
      "args": ["D:/products/mcp-servers/mcp-a11y-tools/dist/index.js"]
    }
  }
}

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.