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 appli...
Scanned 6/10/2026
Install via CLI
Skills Directoryopenskills install ForceInjection/domain-driven-design-skills---
name: Frontend Accessibility
description: 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.
---
# 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](../../../agent-os/standards/frontend/accessibility.md)
No comments yet. Be the first to comment!
Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content scripts, background scripts, or i18n updates.
SEO optimization with keyword analysis, readability assessment, technical validation, content quality. Use for search rankings, blog posts, content audits, or encountering keyword density, readability scores, meta tags, schema markup errors.
Python backend development expertise for FastAPI, security patterns, database operations, Upstash integrations, and code quality. Use when: (1) Building REST APIs with FastAPI, (2) Implementing JWT/OAuth2 authentication, (3) Setting up SQLAlchemy/async databases, (4) Integrating Redis/Upstash caching, (5) Refactoring AI-generated Python code (deslopification), (6) Designing API patterns, or (7) Optimizing backend performance.
Drive the full internationalization journey for a project — detect the stack, recommend a library, set up the chosen library, wrap existing strings, and optionally connect a translation platform. Use when the user asks to add or configure i18n, internationalization, localization, multi-language support, or translations — including when they explicitly mention LinguiJS, Lingui, next-intl, "wrap strings", "find hardcoded text", "make my app translatable", or "set up translations". Triggers on g...
PTES-aligned adversarial security audit for backend, frontend, and mobile applications. Produces a CVSS-scored Hacker Report with verified PoCs and phased remediation.
