Agent skill
Frontend Accessibility
Implement accessible UI components using semantic HTML elements, keyboard navigation support, sufficient color contrast ratios, alternative text for images, ARIA attributes when needed, logical heading structure, and proper focus management. Use this skill when creating UI components, forms, interactive elements, navigation menus, modals or dialogs, implementing keyboard shortcuts, adding screen reader support, ensuring WCAG compliance, or testing with assistive technologies. This skill applies when working on any frontend component files, HTML templates, Vue components, React components, or any user interface code that needs to be accessible to all users including those with disabilities.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/testing/frontend-accessibility-florianriquelme-statamic-assets
SKILL.md
Frontend Accessibility
When to use this skill
- When creating UI components or interactive elements
- When implementing forms with input fields and validation
- When building navigation menus or site structure
- When creating modals, dialogs, or overlays
- When implementing keyboard shortcuts or navigation
- When adding screen reader support to components
- When ensuring WCAG 2.1 compliance for your application
- When testing with assistive technologies (screen readers, keyboard-only navigation)
- When working on HTML templates, Vue components, or React components
- When adding alt text to images or labels to form inputs
- When implementing focus management for dynamic content
- When choosing color schemes and ensuring sufficient contrast ratios
This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend accessibility.
Instructions
For details, refer to the information provided in this file: frontend accessibility
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?