skills.rest
oakoss
oakossOFFICIAL
Explore all skills by this author →
Website𝕏@oak_ossGitHub

accessibility

Create WCAG 2.2 AA compliant interfaces with semantic HTML and ARIA.

14|5|Updated Jan 29, 2026
Search Tags:#inclusive design#accessibility#screen reader#keyboard navigation#wcag#aria
One-click install
npx skills add https://github.com/oakoss/agent-skills --skill accessibility-oakoss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/oakoss/agent-skills/tree/main/skills/accessibility
Command: npx skills add https://github.com/oakoss/agent-skills --skill accessibility-oakoss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures your web interfaces are usable by everyone, regardless of ability, by adhering to WCAG 2.2 AA standards.

Core Features & Use Cases

  • WCAG Compliance: Implement semantic HTML, ARIA attributes, and keyboard navigation.
  • Accessibility Auditing: Identify and fix issues like insufficient contrast, missing alt text, and focus problems.
  • Use Case: When developing a new modal dialog, use this Skill to ensure it's keyboard-operable, has proper focus management, and is announced correctly by screen readers.

Quick Start

Ensure all interactive elements have a visible focus indicator using the :focus-visible pseudo-class.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make my modal dialog keyboard accessible and screen reader compatible?▼

To make a modal dialog keyboard accessible, implement semantic HTML, proper ARIA attributes, and focus management. This ensures the dialog is operable by keyboard and announced correctly by screen readers.

What is WCAG 2.2 AA compliance for web interfaces?▼

WCAG 2.2 AA compliance ensures web interfaces are usable by everyone regardless of ability. It requires semantic HTML structure, ARIA implementation, keyboard navigation, and sufficient color contrast ratios.

How do I fix insufficient color contrast and missing alt text in my UI?▼

Fix insufficient color contrast and missing alt text by auditing your interface against WCAG standards. Adjust contrast ratios to meet AA requirements and add descriptive alt text to images.

Why does my web form lack keyboard navigation and visible focus indicators?▼

Your web form lacks visible focus indicators if it omits the :focus-visible pseudo-class. Implement semantic HTML and ARIA attributes to restore proper keyboard navigation and screen reader compatibility.

Do I need ARIA attributes for standard HTML data tables to meet WCAG standards?▼

Standard HTML data tables need proper semantic structure for WCAG compliance. Use ARIA attributes to enhance screen reader compatibility when native HTML semantics are insufficient for complex data tables.

What is the best way to manage focus when closing a dialog for screen reader users?▼

The best way to manage focus when closing a dialog is returning focus to the triggering element. This ensures keyboard navigation continuity and proper screen reader announcement per WCAG guidelines.

Related Skills

Explore More Design & Creative Skills→
RB-chrismandichRB-chrismandich
1

a11y-audit

Audit web projects for WCAG 2.2 AA accessibility issues with ARIA and semantic HTML checks.

Community
Advanced
haJ1thaJ1t

accessibility-optimizer

Audits and fixes UI accessibility issues against WCAG 2.2 standards.

Community
Advanced
erp-mafiaerp-mafia
209

swarm-a11y-agent

Audit Next.js/React frontend code for WCAG AA accessibility compliance.

Official
Advanced
aaltaayaaltaay

ckm:ui-styling

Build accessible React UI components with shadcn/ui, Tailwind, and Radix primitives.

Community
Advanced