Skip to main content
AccessibilityHub exposes MCP Resources — read-only, structured reference data accessible via custom URI schemes. Resources let AI models and developers look up WCAG criteria, contrast thresholds, and Lighthouse audit definitions without hardcoding values.

What are MCP Resources?

MCP Resources are static, versioned datasets exposed through the Model Context Protocol. Unlike tools that perform actions, resources provide factual data that models can reference to ground their analysis in authoritative standards.

Key Characteristics

  • Read-only: Resources cannot be modified; they reflect published standards
  • URI-addressable: Each resource has a unique URI (e.g., wcag://criteria/1.4.3)
  • Structured: All resources return JSON with consistent schemas
  • Filterable: Most resources support filtering by level, principle, or category

Available Resources

AccessibilityHub provides three resource categories:

WCAG Criteria

WCAG 2.1 success criteria with descriptions, levels, and remediation guidance

Contrast Thresholds

WCAG 2.1 and APCA contrast ratio requirements for text and UI elements

Lighthouse Audits

Lighthouse accessibility audit catalog with WCAG mappings

URI Patterns

All resources use custom URI schemes:
URI SchemeDescriptionExample
wcag://WCAG 2.1 criteria and guidelineswcag://criteria/1.4.3
contrast://Contrast threshold reference datacontrast://thresholds/wcag21
lighthouse://Lighthouse audit definitionslighthouse://audits/color-contrast

Path Parameters

Many resources support dynamic path parameters:
// Get a specific WCAG criterion by ID
wcag://criteria/{id}

// Filter criteria by conformance level
wcag://criteria/level/{level}

// Filter by POUR principle
wcag://criteria/principle/{principle}

// Get a specific Lighthouse audit
lighthouse://audits/{auditId}

Accessing Resources

Via MCP Client

MCP clients can read resources using the resources/read method:
import { Client } from '@modelcontextprotocol/sdk/client/index.js';

const client = new Client({
  name: 'example-client',
  version: '1.0.0'
}, {
  capabilities: {}
});

const result = await client.readResource({ 
  uri: 'wcag://criteria/1.4.3' 
});

const criterion = JSON.parse(result.contents[0].text);
console.log(criterion.title); // "Contrast (Minimum)"

Via AI Models

AI models with MCP support can request resources directly:
User: What does WCAG criterion 1.4.3 require?

Assistant: Let me look that up.
[reads resource: wcag://criteria/1.4.3]

WCAG 1.4.3 (Contrast Minimum, Level AA) requires:
The visual presentation of text has a contrast ratio of at least 4.5:1...

Listing Available Resources

List all available resources of a given type:
const resources = await client.listResources();

// Filter to specific URI scheme
const wcagResources = resources.resources.filter(
  r => r.uri.startsWith('wcag://')
);

Response Format

All resources return a consistent response structure:
contents
array
required
Array of resource contents

Example Response

{
  "contents": [
    {
      "uri": "wcag://criteria/1.4.3",
      "mimeType": "application/json",
      "text": "{\"id\":\"1.4.3\",\"title\":\"Contrast (Minimum)\",\"level\":\"AA\",...}"
    }
  ]
}

Common Patterns

Look Up WCAG Details for Issues

When an analysis tool returns WCAG violations, use resources to get full context:
// 1. Run analysis
const analysis = await analyzeWithAxe('https://example.com');

// 2. For each issue, look up the criterion
for (const issue of analysis.violations) {
  const criterion = await client.readResource({
    uri: `wcag://criteria/${issue.wcagCriterion}`
  });
  
  const data = JSON.parse(criterion.contents[0].text);
  console.log(`Issue: ${data.title}`);
  console.log(`Affected users: ${data.affectedUsers.join(', ')}`);
  console.log(`Actions: ${data.suggestedActions.join(', ')}`);
}

Check Contrast Requirements

Before or after running contrast analysis:
// Get WCAG 2.1 thresholds
const wcagThresholds = await client.readResource({
  uri: 'contrast://thresholds/wcag21'
});

const thresholds = JSON.parse(wcagThresholds.contents[0].text);
console.log(`AA normal text requires: ${thresholds.AA_NORMAL.ratio}:1`);

Understand Lighthouse Audits

Map Lighthouse audit IDs to WCAG criteria:
// After running Lighthouse
const audit = await client.readResource({
  uri: 'lighthouse://audits/color-contrast'
});

const auditData = JSON.parse(audit.contents[0].text);
console.log(`Maps to WCAG: ${auditData.wcagCriterion}`);
console.log(`Level: ${auditData.wcagLevel}`);

Resource Versioning

Resources reflect published standards and are versioned with the server:
  • WCAG resources: Based on WCAG 2.1 (current W3C Recommendation)
  • Contrast resources: Includes both WCAG 2.1 and APCA (WCAG 3.0 draft)
  • Lighthouse resources: Reflects Lighthouse v10+ audit definitions
Future versions may add:
  • WCAG 2.2 criteria when finalized
  • WCAG 3.0 resources when published
  • Additional reference datasets

Error Handling

Resources return error objects for invalid requests:
{
  "uri": "wcag://criteria/invalid-id",
  "mimeType": "application/json",
  "text": "{\"error\":\"Criterio WCAG invalid-id no encontrado\"}"
}
Always check for an error field in the parsed response:
const result = await client.readResource({ uri });
const data = JSON.parse(result.contents[0].text);

if (data.error) {
  console.error(`Resource error: ${data.error}`);
  return;
}

// Process valid data
console.log(data.title);

Best Practices

Resources are static and safe to cache during a session:
const criteriaCache = new Map();

async function getCriterion(id: string) {
  if (criteriaCache.has(id)) {
    return criteriaCache.get(id);
  }
  
  const result = await client.readResource({
    uri: `wcag://criteria/${id}`
  });
  const data = JSON.parse(result.contents[0].text);
  criteriaCache.set(id, data);
  return data;
}
When you need multiple related items, use filtered resources:
// ❌ Inefficient: Multiple individual requests
const criteriaA = await client.readResource({ uri: 'wcag://criteria/1.1.1' });
const criteriaB = await client.readResource({ uri: 'wcag://criteria/1.3.1' });
const criteriaC = await client.readResource({ uri: 'wcag://criteria/2.1.1' });

// ✅ Efficient: Single filtered request
const allLevelA = await client.readResource({ 
  uri: 'wcag://criteria/level/A' 
});
const criteria = JSON.parse(allLevelA.contents[0].text);
Resources provide reference data; tools perform analysis. Use them together:
// 1. Use tool to analyze
const analysis = await analyzeContrast(url);

// 2. Use resource to understand thresholds
const thresholds = await client.readResource({
  uri: 'contrast://thresholds/wcag21'
});

// 3. Combine for actionable insights
console.log(`Found ${analysis.issues.length} issues`);
console.log(`Required ratio: ${thresholds.AA_NORMAL.ratio}:1`);

Next Steps

WCAG Criteria

Explore all WCAG 2.1 success criteria

Contrast Thresholds

Look up contrast ratio requirements

Lighthouse Audits

Browse Lighthouse audit catalog

Analysis Tools

Learn about analysis tools that reference these resources

Build docs developers (and LLMs) love