# Frontend Accessibility > 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. - Skill: `tomevault-io/frontend-accessibility` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/frontend-accessibility` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-accessibility/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/frontend-accessibility --- # Frontend Accessibility 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. ## When to use this skill - When implementing semantic HTML structure with appropriate elements - When ensuring keyboard navigation and visible focus indicators - When checking and maintaining color contrast ratios (4.5:1 for normal text) - When adding descriptive alt text for images and labels for form inputs - When testing with screen readers and assistive technologies - When using ARIA attributes to enhance complex components - When structuring proper 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 ## Instructions For details, refer to the information provided in this file: [frontend accessibility](../../../agent-os/standards/frontend/accessibility.md) --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/shynlee04) — claim your Tome and manage your conversions.