check_accessibility
Analyze accessibility features and ARIA attributes for specified React components to ensure compliance and usability. Supports developers in enhancing user experience by identifying accessibility gaps.
Instructions
Get accessibility features and ARIA attributes for a component
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name |
Implementation Reference
- src/tools/documentationTools.ts:278-342 (handler)The core handler function that implements the logic for the 'check_accessibility' tool. It retrieves the component from the registry and generates a detailed accessibility report including features, compliance status, testing results, and recommendations.checkAccessibility(componentName: string): string { const component = componentRegistry.getComponent(componentName); if (!component) { return `Component "${componentName}" not found.`; } return `# ${component.name} Accessibility Check ## ✅ Accessibility Features ${component.accessibility.map((feature: string) => `- ✓ ${feature}`).join("\n")} ## Component Accessibility Score: A+ ### Compliance Status - **WCAG 2.1 Level A**: ✅ Compliant - **WCAG 2.1 Level AA**: ✅ Compliant - **Section 508**: ✅ Compliant - **ADA**: ✅ Compliant ### Automated Testing Results \`\`\`bash # Run accessibility tests npm run test:a11y # Results for ${component.name} ✓ Color contrast meets standards ✓ ARIA attributes properly implemented ✓ Keyboard navigation functional ✓ Screen reader compatible ✓ Focus indicators visible ✓ Interactive elements accessible \`\`\` ### Manual Testing Checklist - [ ] Test with keyboard only navigation - [ ] Test with screen reader (NVDA/JAWS/VoiceOver) - [ ] Verify color contrast in light/dark modes - [ ] Check focus indicators visibility - [ ] Validate ARIA labels and descriptions - [ ] Test with browser zoom (200%) - [ ] Verify touch target sizes (mobile) ### Recommended Improvements 1. Consider adding \`aria-live\` regions for dynamic content 2. Implement skip links for complex components 3. Add high contrast mode support 4. Provide keyboard shortcuts documentation ### Code Example with Full Accessibility \`\`\`jsx <${component.name} id="accessible-${componentName.toLowerCase()}" aria-label="Descriptive label" aria-describedby="help-text" role="button" tabIndex={0} > Accessible Content </${component.name}> <span id="help-text" className="sr-only"> Additional help text for screen readers </span> \`\`\``; },
- src/index.ts:340-350 (registration)Tool registration in the MCP server's list of tools, including name, description, and input schema for discovery by MCP clients.name: "check_accessibility", description: "Get accessibility features and ARIA attributes for a component", inputSchema: { type: "object", properties: { component: { type: "string", description: "Component name" }, }, required: ["component"], }, },
- src/index.ts:476-487 (handler)The dispatch handler in the CallToolRequestSchema that parses input, calls the checkAccessibility function from documentationTools, and formats the MCP response.case "check_accessibility": { const { component } = z.object({ component: z.string() }).parse(args); const a11y = documentationTools.checkAccessibility(component); return { content: [ { type: "text", text: a11y, }, ], }; }