check_accessibility
Retrieve accessibility features and ARIA attributes for React components to ensure compliance and improve user experience for all users.
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 main handler function that executes the check_accessibility tool logic. It retrieves the component from the registry and generates a comprehensive accessibility report including features, compliance status, testing results, and best practices.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:339-350 (registration)Registration of the check_accessibility tool in the MCP server's tool list, including name, description, and input schema definition.{ 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)MCP tool dispatcher case that parses input, calls the checkAccessibility function from documentationTools, and formats the response.case "check_accessibility": { const { component } = z.object({ component: z.string() }).parse(args); const a11y = documentationTools.checkAccessibility(component); return { content: [ { type: "text", text: a11y, }, ], }; }