skills.rest
Dazlarus
DazlarusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/Dazlarus/karl-code --skill accessibility-dazlarus
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
rodrigo-altissimorodrigo-altissimo

design-heydon-pickering

Design and remediate accessible web components with semantic HTML and ARIA.

Community
Advanced
mtsatryanmtsatryan
1

accessibility-auditor

Audit web applications for WCAG compliance using axe-core and Playwright.

Community
Advanced
RSHVRRSHVR
1

elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

Community
Advanced
knckknckknckknck

wcag-audit-patterns

Audit WCAG 2.2 conformance with axe-core, pa11y, and lighthouse.

Community
Advanced