Frontend Accessibility

Run npx skillmds@latest add tomevault-io/frontend-accessibility in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Implement accessible user interfaces following WCAG guidelines with semantic HTML, keyboard navigation, proper color contrast, and screen reader support. Use this skill when building React, Vue, Svelte, or any frontend framework components; when writing HTML structure with semantic elements (nav, main, button, etc.); when implementing keyboard navigation and focus management; when checking color contrast ratios for text and UI elements; when adding ARIA attributes to enhance complex components; when providing alt text for images and labels for form inputs; when testing with screen readers; when structuring heading hierarchies (h1-h6) for document outline; when managing focus in dynamic content, modals, and single-page applications; when building accessible forms, buttons, links, and interactive elements; or when ensuring web accessibility compliance across desktop and mobile interfaces. Use when this capability is needed. It is listed under Web & Frontend on SkillMD.

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.