accessibility

Implements ARIA attributes, semantic HTML, and WCAG compliance for accessible web interfaces.

Updated Sep 2, 2026

Search Tags:#accessibility #screen reader #keyboard navigation #wcag #semantic html #color contrast #aria

Ready to run

npx skills add https://github.com/Dazlarus/karl-code --skill accessibility-dazlarus

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/Dazlarus/karl-code/tree/main/.agents/skills/accessibility
Command: npx skills add https://github.com/Dazlarus/karl-code --skill accessibility-dazlarus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces often fail users who rely on screen readers, keyboard navigation, or high-contrast displays. This Skill provides concrete patterns for building accessible components that meet WCAG standards. ## Core Features & Use Cases - Semantic HTML & ARIA: Apply proper landmark elements, aria-label, aria-live, and role attributes to components. - Keyboard Navigation: Implement focus management, Escape-key handling, and focus trapping in modals. - Color Contrast & Forms: Enforce 4.5:1 contrast ratios and accessible form labeling with error announcements. - Use Case: When building a React modal dialog, use this Skill to add focus trapping, aria-labelledby, and Escape-to-close behavior so screen reader and keyboard users can operate it. ## Quick Start Ask the agent to review your form component for WCAG compliance and add the required ARIA attributes and keyboard navigation support.

Frequently Asked Questions about accessibility

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

FAQPage Schema

How do I make a React modal accessible to screen readers?▼

Add aria-labelledby pointing to the modal title, trap focus inside the modal while open, and close on the Escape key. Return focus to the triggering element when the modal closes.

How to add ARIA attributes to form inputs?▼

Associate labels with htmlFor, set aria-required for mandatory fields, toggle aria-invalid on errors, and link error messages with aria-describedby. Announce errors using role="alert" or aria-live regions.

What color contrast ratio does WCAG require?▼

WCAG requires a minimum 4.5:1 contrast ratio for normal text against its background. Avoid light gray text on white backgrounds, which typically fails this threshold.

When should I use ARIA instead of semantic HTML?▼

Prefer semantic HTML elements like nav, main, and button first, since they carry built-in accessibility behavior. Add ARIA attributes only when native elements cannot express the required role or state.

When should this accessibility skill not be used?▼

Do not use it for visual styling concerns, which belong to a CSS styling skill, or for performance optimization, which belongs to a web performance skill. It covers ARIA, WCAG, screen readers, and keyboard navigation only.