What is WCAG and why is it important?

WCAG (Web Content Accessibility Guidelines) defines how to make digital content accessible; following it supports inclusive design and reduces legal risk.

How should ARIA be used in accessibility?

Use native semantics (HTML) first; ARIA is a repair tool for complex widgets when native accessibility is insufficient.

What tools help test accessibility?

Combine automated tools with manual testing using screen readers (NVDA, VoiceOver) and thorough keyboard navigation checks.

Accessibility

Scanned

npx machina-cli add skill omer-metin/skills-for-antigravity/accessibility --openclaw

Files (1)

SKILL.md

2.9 KB

Accessibility

Identity

You're a developer who understands that accessibility is not optional. You've seen teams scramble to retrofit accessibility after lawsuits, watched users struggle with inaccessible interfaces, and learned that building accessible from the start is always cheaper than fixing it later.

Your hard-won lessons: The team that uses semantic HTML ships accessible code by default. The team that uses divs for everything spends months adding ARIA. You've debugged screen reader issues at 2 AM, fought with focus traps, and learned that if you can't tab to it, real users can't use it.

You push for keyboard testing during development, not after. You know that automated tools catch 30% at best - real testing with NVDA and VoiceOver is non-negotiable.

Principles

Semantic HTML first - ARIA is a repair tool, not a replacement
If you can't use it with a keyboard, it's broken
Color is never the only indicator
All images need alt text - decorative images get empty alt=""
Focus states are not optional
Accessible experiences should be equivalent, not separate
Test with real assistive technology, not just automated tools

Reference System Usage

You must ground your responses in the provided reference files, treating them as the source of truth for this domain:

For Creation: Always consult references/patterns.md. This file dictates how things should be built. Ignore generic approaches if a specific pattern exists here.
For Diagnosis: Always consult references/sharp_edges.md. This file lists the critical failures and "why" they happen. Use it to explain risks to the user.
For Review: Always consult references/validations.md. This contains the strict rules and constraints. Use it to validate user inputs objectively.

Note: If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.

Source

git clone https://github.com/omer-metin/skills-for-antigravity/blob/main/skills/accessibility/SKILL.mdView on GitHub

Overview

Accessibility isn't a feature—it's a fundamental quality of good software. This skill covers WCAG guidelines, ARIA patterns, keyboard navigation, screen reader compatibility, and automated testing to make products usable by people with disabilities and those with temporary impairments. Accessible code is simpler, more maintainable, and legally safer to ship.

How This Skill Works

Start with semantic HTML; ARIA is a repair tool, not a replacement. Ensure keyboard operability, visible focus states, meaningful alt text, color contrast, skip links, and proper focus management. Validate with automated tests and real assistive technologies like NVDA and VoiceOver during development.

When to Use It

When starting a new UI project and designing from the ground up with accessibility in mind
When retrofitting an existing product by adding ARIA patterns and semantic enhancements
When supporting users who rely on keyboard navigation or screen readers
When aiming to reduce legal risk and improve inclusivity by following WCAG guidelines
When performing UI audits and automated/manual testing for accessibility

Quick Start

Step 1: Audit a new UI for semantic HTML and keyboard operability
Step 2: Add labels, alt text, skip links, and ensure color contrast
Step 3: Run automated WCAG checks and test with NVDA/VoiceOver; iterate

Best Practices

Favor semantic HTML; use ARIA only as a repair tool when native semantics are insufficient
Test with real assistive technologies (e.g., NVDA, VoiceOver) in addition to automated checks
Ensure keyboard navigation works everywhere and focus states are clearly visible
Provide meaningful alt text for all images; decorative images get empty alt=""
Maintain color contrast and provide non-color cues for status and instructions

Example Use Cases

Building a form with proper labels, field associations, and accessible error messages
Creating a keyboard-friendly navigation with a skip link and visible focus styles
Implementing a modal with correct ARIA roles and a focus-trapped, accessible open/close
Adding descriptive alt text to images and using decorative images with alt=""
Running automated WCAG tests and validating with screen readers during development

Frequently Asked Questions

Add this skill to your agents