Frontend Accessibility

Guide frontend UI development with ARIA attributes and keyboard navigation.

Updated Aug 23, 2026

Search Tags:#inclusive design #accessibility #ARIA #WCAG #frontend #UI/UX #usability #web standards

One-click install

npx skills add https://github.com/alenon/portfolios --skill frontend-accessibility-alenon

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/alenon/portfolios/tree/main/.claude/skills/frontend-accessibility
Command: npx skills add https://github.com/alenon/portfolios --skill frontend-accessibility-alenon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides the development of user interfaces that are usable by people with disabilities, ensuring compliance with accessibility standards (e.g., WCAG) and broadening your user reach. It automates the integration of accessibility best practices, reducing the effort required to build inclusive applications.

Core Features & Use Cases

ARIA Attributes: Guides AI to correctly apply ARIA roles and attributes for screen readers and assistive technologies.
Keyboard Navigation: Ensures all interactive elements are navigable and operable via keyboard, improving usability for all users.
Use Case: When building a new form, this skill ensures the AI includes proper label associations, alt text for images, and keyboard focus management, making the form usable for everyone.

Quick Start

Use the Frontend Accessibility skill to review and improve the accessibility of the LoginForm component in frontend/src/components/LoginForm.tsx, ensuring proper ARIA labels and keyboard navigation.