Frontend Accessibility Standards

Name: Frontend Accessibility Standards
Availability: InStock
Author: dennistoma

Audit HTML templates and JSX/TSX components for accessibility compliance.

Updated Aug 23, 2026

Search Tags:#screen reader #semantic HTML #keyboard navigation #ARIA #WCAG #accessible UI

Ready to run

npx skills add https://github.com/DennisToma/repo_example --skill frontend-accessibility-standards-dennistoma

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Frontend Accessibility Standards
Source: https://github.com/DennisToma/repo_example/tree/main/.claude/skills/frontend-accessibility-standards
Command: npx skills add https://github.com/DennisToma/repo_example --skill frontend-accessibility-standards-dennistoma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to make UIs accessible to all users. This Skill provides a structured approach to ensure semantic HTML, proper ARIA attributes, keyboard navigation, color contrast, and screen reader compatibility across components and templates.

Core Features & Use Cases

Semantic HTML-first markup for headings, landmarks, and form controls
ARIA attributes and roles to enhance custom components while preserving native semantics
Keyboard accessibility, focus management, and accessible navigation in modals, menus, and forms
Color contrast guidance aligned with WCAG and practical testing steps
Real-world Use Case: When implementing a login form or modal, apply the standards to guarantee full accessibility compliance and predictable assistive technology behavior.

Quick Start

Use this skill to audit a sample HTML file (e.g., login.html) and annotate or modify it to include proper labels, ARIA, and keyboard focus flows.

Frequently Asked Questions about Frontend Accessibility Standards

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

FAQPage Schema

How do I make my custom modal accessible for keyboard navigation and screen readers?▼

To make custom modals accessible, enforce ARIA roles, manage keyboard focus, and ensure screen reader compatibility. This requires trapping focus within the modal while open and returning focus to the trigger element upon close.

What is the best way to add ARIA attributes to JSX and TSX components?▼

The best way to add ARIA attributes to JSX and TSX components is to start with semantic HTML first, then enhance custom UI elements with ARIA roles. This preserves native semantics and ensures predictable assistive technology behavior.

How do I audit an HTML file for WCAG color contrast and semantic markup compliance?▼

To audit an HTML file for WCAG compliance, review semantic HTML structure for headings and landmarks, verify color contrast ratios, and test keyboard navigation. Annotate templates to include proper labels and focus flows.

Does this approach work for standard login forms and dynamic navigation menus?▼

Yes, this approach works for standard login forms and dynamic navigation menus by enforcing semantic HTML, proper labels, and keyboard accessibility. It guarantees full accessibility compliance and predictable assistive technology behavior across components.

Why does my screen reader skip dynamic content updates in my accessible UI?▼

Screen readers skip dynamic content updates when accessible UI components lack proper ARIA live regions or semantic HTML structure. Enforcing correct ARIA attributes on dynamic content ensures screen readers announce updates predictably.