skills.rest
jeninh
jeninhCOMMUNITY
Explore all skills by this author →
GitHub

frontend-accessibility

Generate WCAG 2.2 AA-compliant frontend code with semantic HTML and ARIA.

Updated Jan 16, 2026
Search Tags:#ARIA#WCAG#frontend#semantic-html#keyboard-accessibility#accessible
One-click install
npx skills add https://github.com/jeninh/ampskills-dotfile --skill frontend-accessibility-jeninh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-accessibility
Source: https://github.com/jeninh/ampskills-dotfile/tree/main/.agents/skills/frontend-accessibility
Command: npx skills add https://github.com/jeninh/ampskills-dotfile --skill frontend-accessibility-jeninh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generating accessible frontend code is essential for inclusive products, but teams often struggle to apply consistent accessibility practices across components and apps.

Core Features & Use Cases

  • Semantic HTML-first patterns for UI components, forms, and navigation.
  • Keyboard accessibility and screen reader compatibility in React and HTML.
  • Use Case: when building a new form, the skill guides you to add proper labels, focus order, and ARIA attributes to meet WCAG 2.2 AA.

Quick Start

Ask the AI to generate a WCAG 2.2 AA-compliant login form component with semantic HTML, proper labels, keyboard navigation, and 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 generate frontend code that meets WCAG 2.2 AA accessibility standards?▼

To generate WCAG 2.2 AA accessible frontend code, use semantic HTML first, ensure keyboard operability, and add ARIA attributes only when necessary. This ensures screen reader compatibility and proper focus management across UI components.

What is the best way to make a React form accessible for screen readers?▼

The best way to make a React form accessible is to use semantic HTML elements, attach proper labels, manage focus order, and apply ARIA attributes selectively. This ensures keyboard navigation and screen reader compatibility per WCAG 2.2 AA standards.

When do I need to add ARIA attributes to semantic HTML for accessibility?▼

You need to add ARIA attributes to semantic HTML only when native elements cannot convey the required semantics or interaction states. Relying on semantic HTML first ensures robust keyboard accessibility and reduces unnecessary ARIA complexity.

Does this accessibility workflow support both React and plain HTML frameworks?▼

Yes, this accessibility workflow supports both React and plain HTML. It applies semantic markup, keyboard operability, and screen reader compatibility practices across these modern frontend frameworks to consistently meet WCAG 2.2 AA requirements.

How do I test keyboard accessibility and focus management in UI components?▼

To test keyboard accessibility and focus management in UI components, verify logical tab order and operability using structured guidance. The workflow provides practical examples ensuring keyboard navigation functions correctly without a mouse.

Related Skills

Explore More Software Engineering Skills→
Albatross679Albatross679

web-artifacts-builder

Build React, TypeScript, Vite, Tailwind CSS, and shadcn/ui artifacts into a single HTML file.

Community
Advanced
anolilabanolilab
214

accessibility

Audit web interfaces against WCAG 2.2 accessibility standards.

Official
Intermediate
sanky369sanky369
29

accessibility-excellence

Audit web applications for WCAG compliance and accessibility gaps.

Community
Basic
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate