web-accessibility
Tools to ensure UI components meet accessibility standards.
Install
mkdir -p .claude/skills/web-accessibility && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16289" && unzip -o skill.zip -d .claude/skills/web-accessibility && rm skill.zipInstalls to .claude/skills/web-accessibility
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Enforces semantic HTML and accessibility standards (ARIA, keyboard navigation, color contrast). Use when building or auditing UI components.Key capabilities
- →Enforce semantic HTML structure
- →Maintain color contrast ratios
- →Ensure keyboard navigation
- →Implement ARIA compliance
How it works
This skill provides guidelines for building and auditing UI components to ensure they meet web accessibility standards, including semantic HTML, visual and interactive elements, and ARIA compliance.
Inputs & outputs
When to use web-accessibility
- →Audit UI accessibility
- →Build accessible components
- →Check ARIA labels
About this skill
Web Accessibility Skill
Ensures the MapRecruit interface is accessible to all users, including those using assistive technologies.
When to use this skill
- When building new React components.
- When auditing existing UI for accessibility regressions.
- When creating complex interactive elements (modals, dropdowns, calendars).
How to use it
1. Semantic Structure
- Use
<nav>,<main>,<section>, and Proper Header hierarchy (h1-h6). - Ensure all interactive elements use the correct tags (e.g.,
<button>for actions,<a>for navigation).
2. Visual & Interactive
- Contrast: Maintain a minimum contrast ratio of 4.5:1 for text.
- Focus States: Never hide focus rings (
outline-none) unless you are providing a clear alternative focus indicator. - Tap Targets: Ensure all buttons and links are at least 44x44px for touch accessibility.
3. ARIA Compliance
- Use
aria-labeloraria-labelledbyfor icons or elements without visible text. - Manage focus for modals: return focus to the trigger element when the modal is closed.
How it compares
This skill offers specific instructions for accessibility features like focus states and tap targets, which a generic UI development guide might omit.
Compared to similar skills
web-accessibility side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| web-accessibility (this skill) | 0 | 5mo | No flags | Beginner |
| elegant-design | 21 | 5mo | Review | Intermediate |
| web-design-reviewer | 7 | 7mo | No flags | Intermediate |
| baseline-ui | 3 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by diegosouzapw
View all by diegosouzapw →You might also like
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
baseline-ui
agentset-ai
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
bencium-innovative-ux-designer
bencium
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
theme-system
btriapitsyn
Use when creating or modifying UI components, styling, or visual elements in OpenChamber. All UI colors must use theme tokens - never hardcoded values or Tailwind color classes.
design-system-starter
davila7
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.