skills.rest
roanbrasil
roanbrasilCOMMUNITY
Explore all skills by this author →
Website𝕏@roanbrasilGitHub

accessibility

Enforce WCAG 2.1 AA accessibility standards in frontend development workflows.

5|1|Updated Jun 17, 2026
Search Tags:#accessibility#a11y#wcag#semantic-html#screen-reader#aria#keyboard-navigation
One-click install
npx skills add https://github.com/roanbrasil/engineer-grade-agent-skills --skill accessibility-roanbrasil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/roanbrasil/engineer-grade-agent-skills/tree/main/skills/accessibility
Command: npx skills add https://github.com/roanbrasil/engineer-grade-agent-skills --skill accessibility-roanbrasil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the pervasive problem of web interfaces that exclude users with disabilities, leading to poor user experience, failed WCAG compliance audits, and potential legal liability for non-compliant digital products.

Core Features & Use Cases

  • WCAG 2.1 AA Standard Guidance: Covers all four POUR principles (Perceivable, Operable, Understandable, Robust) to meet global accessibility requirements.
  • Accessible Implementation Patterns: Provides production-ready examples for semantic HTML, correct ARIA usage, keyboard navigation, focus management, color contrast, and screen reader support.
  • Real-World Use Case: When building a public-facing e-commerce site, use this Skill to audit product pages and checkout flows for accessibility gaps, fix issues like missing alt text on product images or broken keyboard navigation for modals, and ensure the site is usable for all users including those using assistive technologies.

Quick Start

Use the accessibility skill to review the attached checkout modal component for WCAG 2.1 AA compliance, identify missing ARIA labels and focus trap gaps, and provide corrected implementation examples.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make my web UI compliant with WCAG 2.1 AA standards?▼

To make web UI compliant with WCAG 2.1 AA, enforce semantic HTML structure, correct ARIA implementation, focus management for interactive elements, and keyboard navigation. This ensures interfaces meet all four POUR principles for accessibility.

How do I fix keyboard navigation and screen reader support in a modal component?▼

Fix keyboard navigation and screen reader support in modals by implementing focus traps to contain tab order, adding missing ARIA labels, and managing focus return on close. These corrections ensure interactive elements are fully operable for assistive technologies.

What is the best way to audit a checkout flow for accessibility gaps?▼

The best way to audit checkout flows for accessibility gaps is reviewing components against WCAG 2.1 AA standards, checking for missing alt text on images, broken keyboard navigation, and integrating automated accessibility testing with tools like axe-core.

Does this work with frontend development workflows for code review?▼

Yes, it applies directly to frontend development workflows including UI component construction and code review for accessibility compliance. It identifies issues like incorrect ARIA usage and color contrast problems during the review process.

When do I need ARIA implementation versus semantic HTML for accessibility?▼

You need ARIA implementation when semantic HTML alone cannot convey dynamic UI changes or complex widget roles to screen readers. Semantic HTML provides the foundational accessibility structure, while ARIA enhances it for interactive elements lacking native equivalents.

Why does my automated accessibility testing fail on color contrast issues?▼

Automated accessibility testing fails on color contrast when visual presentation lacks sufficient luminance differences for readability. Resolve contrast issues by adjusting foreground and background colors to meet WCAG 2.1 AA perceivable principle thresholds.

Related Skills

Explore More Software Engineering Skills→
vladolaruvladolaru
6

accessible-frontend-dev

Implement ARIA, keyboard, and focus management patterns for React and HTML components.

Community
Advanced
pedronauckpedronauck
567

a11y-testing

Automate accessibility testing with jest-axe and Playwright axe-core.

Community
Intermediate
maxrittermaxritter
1.8k

Frontend Accessibility Standards

Review HTML templates and React, Vue, or Svelte components for accessibility standards.

Community
Intermediate
Bbeierle12Bbeierle12
8

form-accessibility

Implement WCAG 2.2 AA form accessibility patterns in React/TypeScript projects.

Community
Basic