skills.rest
lugassawan
lugassawanCOMMUNITY
Explore all skills by this author →
GitHub

principle-accessibility

Apply WCAG 2.2 AA semantic HTML, ARIA, and keyboard focus requirements to UI code reviews.

2|8|Updated Apr 20, 2026
Search Tags:#accessibility#keyboard navigation#wcag 2.2#semantic html#screen readers#focus management#aria
One-click install
npx skills add https://github.com/lugassawan/swe-workbench --skill principle-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: principle-accessibility
Source: https://github.com/lugassawan/swe-workbench/tree/main/skills/principle-accessibility
Command: npx skills add https://github.com/lugassawan/swe-workbench --skill principle-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents accessibility defects from slipping into UI work by enforcing WCAG 2.2 AA–aligned semantic structure, keyboard behavior, focus management, contrast, and assistive-technology compatibility.

Core Features & Use Cases

  • Semantic HTML first: prioritize native elements, landmark regions, and correct heading/list/table structure to get roles and accessible names “for free.”
  • ARIA with guardrails: use ARIA only when native semantics are insufficient, avoid redundant roles, and ensure live regions and accessible naming follow required patterns.
  • Keyboard & focus correctness: guarantee interactive reachability, preserve logical tab order, provide robust focus indicators, and implement modal focus traps with escape/restore behavior.
  • Visual accessibility: apply WCAG contrast targets, avoid color-only meaning, ensure adequate pointer target sizing, and respect reduced-motion preferences.
  • Screen-reader validation: ensure images and form controls have correct alt/text and labeling, announce status updates without stealing focus, and reduce false confidence from automated tooling alone.

Quick Start

Ask for an accessibility audit of the provided UI markup and request fixes for keyboard navigation, focus handling in dialogs, ARIA usage, image alt text, form labels, and WCAG 2.2 AA contrast/motion concerns.

Frequently Asked Questions about principle-accessibility

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

FAQPage Schema
How do I make UI components accessible with WCAG 2.2 AA semantic HTML?▼

Ensure keyboard navigation by guaranteeing all interactive elements are reachable with logical tab order and robust visible focus indicators. You must also implement focus trapping for modals, including proper escape behavior and restoring focus to the triggering element upon closure.

How do I implement focus trapping for modal dialogs and keyboard navigation?▼

Ensure keyboard navigation by guaranteeing all interactive elements are reachable with logical tab order and robust visible focus indicators. You must also implement focus trapping for modals, including proper escape behavior and restoring focus to the triggering element upon closure.

When should I use ARIA roles instead of native HTML elements?▼

Use ARIA roles only when native HTML semantics are insufficient to convey the intended interaction or state. Apply ARIA discipline by avoiding redundant roles, ensuring correct accessible naming, and implementing required live region patterns for status updates without stealing focus.

How do I check WCAG 2.2 color contrast and motion compliance in frontend code?▼

Check WCAG 2.2 color contrast and motion compliance by verifying visual accessibility targets against the standard ratios. Avoid color-only meaning, ensure adequate pointer target sizing, and respect user reduced-motion preferences in your frontend stylesheets.

Why do automated accessibility tools give false confidence for screen reader testing?▼

Automated accessibility tools give false confidence because they cannot fully validate screen-reader validation or correct alt-text and form labeling context. You must perform manual screen-reader testing to ensure images and controls announce properly and status updates do not steal focus.

Related Skills

Explore More Design & Creative Skills→
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate
videojsvideojs
888

aria

Audit React UI components for ARIA accessibility and keyboard navigation.

Official
Basic
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
MoxyWolfLLCMoxyWolfLLC

accessibility-audit

Audit and correct WCAG 2.1 AA issues in web UI code.

Official
Intermediate