skills.rest
DennisToma
DennisTomaCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Accessibility Standards

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
One-click install
npx skills add https://github.com/DennisToma/repo_example --skill frontend-accessibility-standards-dennistoma
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ReefBytesReefBytes
1

ux-review

Audit HTML, JSX, and TSX projects for WCAG 2.2 accessibility and responsive design issues.

Community
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-accessibility

Analyze web UI structure, semantics, and ARIA usage for accessibility gaps.

Community
Advanced
HouseofmvpsHouseofmvps
115

a11y

Detect and fix deterministic WCAG 2.2 A/AA accessibility violations in HTML files.

Community
Advanced