skills.rest
FlorianRiquelme
FlorianRiquelmeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Frontend Accessibility

Implement WCAG 2.1 AA accessibility in HTML, Vue, and React components.

Updated Oct 31, 2025
Search Tags:#inclusive design#accessibility#screen reader#semantic HTML#WCAG#frontend#UI/UX
One-click install
npx skills add https://github.com/FlorianRiquelme/statamic-assets --skill frontend-accessibility-florianriquelme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/FlorianRiquelme/statamic-assets/tree/main/.claude/skills/frontend-accessibility
Command: npx skills add https://github.com/FlorianRiquelme/statamic-assets --skill frontend-accessibility-florianriquelme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures your web applications are usable by everyone, including individuals with disabilities, by guiding the implementation of accessible UI components and interactions. This expands your user base and meets compliance standards.

Core Features & Use Cases

  • Semantic HTML: Utilizes correct HTML elements for inherent accessibility and structure.
  • Keyboard & Screen Reader Support: Enables navigation and interaction without a mouse, and provides proper context for assistive technologies.
  • Use Case: When creating a new navigation menu, this skill ensures it's navigable via keyboard, has proper ARIA labels for screen readers, and sufficient color contrast for visually impaired users.

Quick Start

Create an accessible button component that supports keyboard navigation and has appropriate ARIA attributes.

Frequently Asked Questions about Frontend Accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my React and Vue components accessible to screen readers?▼

Screen reader accessibility requires semantic HTML elements, proper ARIA roles and labels, and logical heading structure. This Skill guides you through adding aria-label, aria-describedby, and role attributes to React and Vue components so assistive technologies correctly interpret your UI and convey content to users with visual impairments.

What does WCAG 2.1 AA compliance mean for frontend development?▼

WCAG 2.1 AA is the accessibility standard requiring keyboard navigation, sufficient color contrast (4.5:1 for text), alt text for images, and proper focus management. This Skill helps you implement these requirements across forms, modals, navigation menus, and interactive elements to ensure your application is usable by people with disabilities.

How do I ensure keyboard navigation works on my HTML forms and interactive components?▼

Keyboard navigation relies on semantic HTML, logical tab order, visible focus indicators, and keyboard event handlers for interactive elements. This Skill shows you how to structure forms with proper labels, implement keyboard shortcuts, and test navigation through modals and menus without a mouse.

Can I use this for accessible modals, dialogs, and overlays?▼

Yes, this Skill covers accessible modal and dialog implementation in HTML templates, Vue, and React. It ensures focus trapping, proper ARIA attributes (role, aria-modal, aria-labelledby), semantic structure, and keyboard escape handling so users with assistive technologies can navigate overlays effectively.

What's the difference between alt text and ARIA labels for accessibility?▼

Alt text describes images for screen readers and serves users who cannot load images; ARIA labels provide context for interactive controls and dynamic content. This Skill guides you on when to use each—alt text for img elements, aria-label for buttons and custom components—to ensure complete coverage across your UI.

Do I need to test my accessible components with actual screen readers?▼

Full accessibility validation requires manual testing with assistive technologies and expert review beyond automated checks. This Skill provides the implementation foundation—semantic HTML, ARIA support, keyboard navigation, and color contrast—but real-world screen reader testing with tools and users ensures end-to-end accessibility.

Related Skills

Explore More Software Engineering Skills→
EIS-ITSEIS-ITS

Frontend Accessibility

Identify and fix accessibility issues in frontend interfaces using semantic HTML, ARIA, and keyboard navigation.

Official
Intermediate
VirtoCommerceVirtoCommerce
2

qa-accessibility

Audits web interfaces for WCAG 2.2 AA compliance using axe-core and Lighthouse checks.

Official
Advanced
adrien-barretadrien-barret
8

accessibility-audit

Audit frontend code for WCAG 2.1 AA accessibility issues.

Community
Intermediate
zinohomezinohome
1

accessibility-auditor

Audit web pages for WCAG 2.1 compliance and implement accessibility fixes.

Community
Advanced