New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Accessibility

by affaan-m in affaan-m/ECC

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target…

MITAuto-check passedFrontend & Design

Install Accessibility

skills CLI
$ npx skills add affaan-m/ECC --skill accessibility -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install affaan-m/ECC accessibility --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/accessibility .claude/skills/accessibility && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
accessibility
GitHub stars
276k
Used in
1 other repo
Token cost
~1.6k tokens
SKILL.md length
537 words
Files
1
Skills in repo
683
Repo updated
First seen
Licence
MIT

At a glance

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target…

  • Works in 5 steps: Identify the Component Role → Define Perceivable Attributes → Implement Operable Controls → …
  • Auditing UI for accessibility compliance
  • SKILL.md covers When to Use, Core Concepts, How It Works and Accessibility Architecture…, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Accessibility is an agent skill from affaan-m/ECC. Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support. Use when building or auditing UI for accessibility compliance, keyboard navigation, or screen-reader support.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Accessibility. It works with Android and iOS. The repository describes itself as: The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond. The licence is MIT.

When your agent uses it

  • Auditing UI for accessibility compliance
  • Keyboard navigation
  • Screen-reader support

Example prompts

  • “/accessibility”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Identify the Component Role
  2. Define Perceivable Attributes
  3. Implement Operable Controls
  4. Ensure Understandable Logic
  5. Verify Robust Compatibility

What it can do on your machine

Read from SKILL.md and the folder at commit 4eb71d9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are mermaid, html, swift and kotlin).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • w3.org
    • developer.apple.com
    • developer.android.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Accessibility loads about 1.6k tokens when it runs. Until then it costs about 88 tokens; SKILL.md has 537 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~88
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from affaan-m/ECC at commit 4eb71d9, republished under its MIT licence (© affaan-m). 537 words, ~1,636 tokens.

Download SKILL.mdSave it as .claude/skills/accessibility/SKILL.md (or your agent's skills folder).
name
accessibility
description
Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support. Use when building or auditing UI for accessibility compliance, keyboard navigation, or screen-reader support.
metadata.origin
ECC

Accessibility (WCAG 2.2)

This skill ensures that digital interfaces are Perceivable, Operable, Understandable, and Robust (POUR) for all users, including those using screen readers, switch controls, or keyboard navigation. It focuses on the technical implementation of WCAG 2.2 success criteria.

When to Use

  • Defining UI component specifications for Web, iOS, or Android.
  • Auditing existing code for accessibility barriers or compliance gaps.
  • Implementing new WCAG 2.2 standards like Target Size (Minimum) and Focus Appearance.
  • Mapping high-level design requirements to technical attributes (ARIA roles, traits, hints).

Core Concepts

  • POUR Principles: The foundation of WCAG (Perceivable, Operable, Understandable, Robust).
  • Semantic Mapping: Using native elements over generic containers to provide built-in accessibility.
  • Accessibility Tree: The representation of the UI that assistive technologies actually "read."
  • Focus Management: Controlling the order and visibility of the keyboard/screen reader cursor.
  • Labeling & Hints: Providing context through aria-label, accessibilityLabel, and contentDescription.

How It Works

Step 1: Identify the Component Role

Determine the functional purpose (e.g., Is this a button, a link, or a tab?). Use the most semantic native element available before resorting to custom roles.

Step 2: Define Perceivable Attributes
  • Ensure text contrast meets 4.5:1 (normal) or 3:1 (large/UI).
  • Add text alternatives for non-text content (images, icons).
  • Implement responsive reflow (up to 400% zoom without loss of function).
Step 3: Implement Operable Controls
  • Ensure a minimum 24x24 CSS pixel target size (WCAG 2.2 SC 2.5.8).
  • Verify all interactive elements are reachable via keyboard and have a visible focus indicator (SC 2.4.11).
  • Provide single-pointer alternatives for dragging movements.
Step 4: Ensure Understandable Logic
  • Use consistent navigation patterns.
  • Provide descriptive error messages and suggestions for correction (SC 3.3.3).
  • Implement "Redundant Entry" (SC 3.3.7) to prevent asking for the same data twice.
Step 5: Verify Robust Compatibility
  • Use correct Name, Role, Value patterns.
  • Implement aria-live or live regions for dynamic status updates.

Accessibility Architecture Diagram

mermaid
flowchart TD
  UI["UI Component"] --> Platform{Platform?}
  Platform -->|Web| ARIA["WAI-ARIA + HTML5"]
  Platform -->|iOS| SwiftUI["Accessibility Traits + Labels"]
  Platform -->|Android| Compose["Semantics + ContentDesc"]

  ARIA --> AT["Assistive Technology (Screen Readers, Switches)"]
  SwiftUI --> AT
  Compose --> AT

Cross-Platform Mapping

FeatureWeb (HTML/ARIA)iOS (SwiftUI)Android (Compose)
Primary Labelaria-label / <label>.accessibilityLabel()contentDescription
Secondary Hintaria-describedby.accessibilityHint()Modifier.semantics { stateDescription = ... }
Action Rolerole="button".accessibilityAddTraits(.isButton)Modifier.semantics { role = Role.Button }
Live Updatesaria-live="polite".accessibilityLiveRegion(.polite)Modifier.semantics { liveRegion = LiveRegionMode.Polite }
Show full SKILL.md (199 more words)Show less

Examples

html
<form role="search">
  <label for="search-input" class="sr-only">Search products</label>
  <input type="search" id="search-input" placeholder="Search..." />
  <button type="submit" aria-label="Submit Search">
    <svg aria-hidden="true">...</svg>
  </button>
</form>
iOS: Accessible Action Button
swift
Button(action: deleteItem) {
    Image(systemName: "trash")
}
.accessibilityLabel("Delete item")
.accessibilityHint("Permanently removes this item from your list")
.accessibilityAddTraits(.isButton)
Android: Accessible Toggle
kotlin
Switch(
    checked = isEnabled,
    onCheckedChange = { onToggle() },
    modifier = Modifier.semantics {
        contentDescription = "Enable notifications"
    }
)

Anti-Patterns to Avoid

  • Div-Buttons: Using a <div> or <span> for a click event without adding a role and keyboard support.
  • Color-Only Meaning: Indicating an error or status only with a color change (e.g., turning a border red).
  • Uncontained Modal Focus: Modals that don't trap focus, allowing keyboard users to navigate background content while the modal is open. Focus must be contained and escapable via the Escape key or an explicit close button (WCAG SC 2.1.2).
  • Redundant Alt Text: Using "Image of..." or "Picture of..." in alt text (screen readers already announce the role "Image").

Best Practices Checklist

  • Interactive elements meet the 24x24px (Web) or 44x44pt (Native) target size.
  • Focus indicators are clearly visible and high-contrast.
  • Modals contain focus while open, and release it cleanly on close (Escape key or close button).
  • Dropdowns and menus restore focus to the trigger element on close.
  • Forms provide text-based error suggestions.
  • All icon-only buttons have a descriptive text label.
  • Content reflows properly when text is scaled.

References

  • frontend-patterns
  • design-system
  • liquid-glass-design
  • swiftui-patterns

© affaan-m, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/accessibility of affaan-m/ECC.

Open the folder on GitHubat commit 4eb71d9

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in affaan-m/ECC, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Accessibility next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Accessibility compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Accessibility this skillaffaan-m/ECC276k1 repos~1.6kAutomated safety check: PassMIT
AccessibilityGetStream/stream-chat-react-native1.2k—~6.5kAutomated safety check: PassCustom licence
AccessibilityVeryGoodOpenSource/vgv-ai-flutter-plugin170—~4.2kAutomated safety check: PassMIT
Maui Accessibilitydavidortinau/maui-skills175—~974Automated safety check: PassMIT
Test Componentgluestack/gluestack-ui5.3k—~3.2kAutomated safety check: PassNone
Agentic A11yOvid/paad131—~9.1kAutomated safety check: PassMIT

Similar skills

  • Accessibility

    GetStream/stream-chat-react-native

    Maintain VoiceOver/TalkBack-focused accessibility in stream-chat-react-native.

    1.2k GitHub stars~6.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Accessibility

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Audits or remediates Flutter widgets against WCAG 2.2 conformance levels A, AA, or AAA across iOS, Android, Web, macOS, Windows, and Linux, covering Semantics labels and screen reader output under…

    170 GitHub stars~4.2k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Maui Accessibility

    davidortinau/maui-skills

    Guide for making .NET MAUI apps accessible — screen reader support via SemanticProperties, heading levels, AutomationProperties visibility control, programmatic focus and announcements, and…

    175 GitHub stars~974 tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Test Component

    gluestack/gluestack-ui

    Comprehensive testing of gluestack-ui components across platforms and apps

    5.3k GitHub stars~3.2k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Agentic A11y

    Ovid/paad

    A skill your agent uses when auditing a user-facing app — web, mobile (iOS/Android/React Native/Flutter), desktop, CLI, or games — for accessibility barriers or WCAG 2.2 conformance, before shipping…

    131 GitHub stars~9.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Platform Design

    nexu-io/open-design

    300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps.

    100k GitHub stars~321 tokensUpdated today
    Frontend & DesignAuto-check passed

More from affaan-m/ECC

All 683 skills in this repo

  • Skill Stocktake

    affaan-m/ECC

    Audits your installed Claude skills and commands for quality, with a quick mode for recently changed skills and a full mode that evaluates all of them through subagents.

    276k GitHub starsUsed in 5 repos~3.1k tokens
    Auto-check passed

  • VideoDB Video Search and Editing

    affaan-m/ECC

    Ingests, indexes, searches, edits and monitors video, audio and live streams through the VideoDB Python SDK, returning stream links, clips and timestamps.

    276k GitHub starsUsed in 3 repos~3.5k tokens
    Auto-check: notes

  • Docs Governance

    affaan-m/ECC

    Route broad documentation-governance requests to existing ECC skills and run an opt-in, read-only audit of mapped documentation roles, links, ADR indexes, and evidence references.

    276k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Rules Distillation

    affaan-m/ECC

    Scans installed skills for principles that recur across them and proposes rule-file changes: append, revise, add a section, create a file or leave as covered.

    276k GitHub starsUsed in 2 repos~2.3k tokens
    Auto-check passed

  • Master Agreement Generator

    affaan-m/ECC

    Builds DRAFT counterparty agreements from one markdown template and a small JSON spec per party, with clauses picked by the party's role.

    276k GitHub stars~2.9k tokensUpdated today
    Auto-check passed

  • Skill Compliance Checker

    affaan-m/ECC

    Measures whether agents actually follow a skill, rule or agent definition by generating scenarios at three strictness levels and scoring tool-call traces.

    276k GitHub starsUsed in 1 repo~623 tokens
    Auto-check passed

Works with

Categories

Questions about Accessibility

What does Accessibility do?

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target…. Accessibility is an agent skill from affaan-m/ECC.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support.

When should I use Accessibility?

Accessibility fits situations like: auditing UI for accessibility compliance; keyboard navigation; screen-reader support.

How do I install Accessibility in Claude Code?

Run `npx skills add affaan-m/ECC --skill accessibility -a claude-code`. Or copy the skill folder (skills/accessibility in affaan-m/ECC) into .claude/skills/accessibility in your project. Claude Code loads it when a task matches its description.

How do I install Accessibility in Codex?

Run `npx skills add affaan-m/ECC --skill accessibility -a codex`. Or copy the skill folder (skills/accessibility in affaan-m/ECC) into .agents/skills/accessibility in your project. Codex loads it when a task matches its description.

Can I use Accessibility in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add affaan-m/ECC --skill accessibility -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/accessibility, .gemini/skills/accessibility, .github/skills/accessibility and .opencode/skills/accessibility in your project.

What does Accessibility need to run?

SKILL.md names no scripts, command-line tools or credentials: Accessibility is instructions for the agent only.

Does Accessibility access the network?

SKILL.md names 3 domains. As links in the text: w3.org, developer.apple.com and developer.android.com. This is read from the text; nothing was executed.

Is Accessibility safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Accessibility use?

Accessibility is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Accessibility use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Accessibility?

Skills that share tags, products or a category with Accessibility: Accessibility (GetStream/stream-chat-react-native, 1.2k stars), Accessibility (VeryGoodOpenSource/vgv-ai-flutter-plugin, 170 stars), Maui Accessibility (davidortinau/maui-skills, 175 stars) and Test Component (gluestack/gluestack-ui, 5.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Accessibility?

affaan-m (a GitHub user) maintains it in affaan-m/ECC, which has 276,111 GitHub stars. The repository holds 683 skills in this directory. The repository was last updated on October 10, 2026.

Source: affaan-m/ECC on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.