New: 97,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 ever-works in ever-works/ever-works

Audit and improve web accessibility following WCAG 2.2 guidelines.

MITAuto-check passedFrontend & Design

Install Accessibility

skills CLI
$ npx skills add ever-works/ever-works --skill accessibility -a claude-code

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

GitHub CLI
$ gh skill install ever-works/ever-works 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/ever-works/ever-works.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/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
158
Used in
6 other repos
Token cost
~3.2k tokens
SKILL.md length
746 words
Files
3 (incl. references)
Skills in repo
14
Repo updated
First seen
Licence
MIT

At a glance

Audit and improve web accessibility following WCAG 2.2 guidelines.

  • Works in 5 steps: Missing form labels → Missing image alt text → Insufficient color contrast → …
  • Asked to improve accessibility
  • SKILL.md covers WCAG Principles: POUR, Conformance levels, Perceivable and Operable, plus 3 more sections
  • Calls npx and npm

What it does

Accessibility is an agent skill from ever-works/ever-works. Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

Its SKILL.md is about 3.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/A11Y-PATTERNS.md` and `references/WCAG.md`).

It sits in Frontend & Design, covering Accessibility. The repository describes itself as: Ever® Works™ - The Workshop for AI. An open agentic runtime that autonomously researches, ships, and maintains entire businesses, 24/7 - https://ever.works. The licence is MIT.

When your agent uses it

  • Asked to improve accessibility
  • WCAG compliance
  • Screen reader support
  • Keyboard navigation

Example prompts

  • “improve accessibility”
  • “a11y audit”
  • “WCAG compliance”
  • “/accessibility”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Missing form labels
  2. Missing image alt text
  3. Insufficient color contrast
  4. Keyboard traps
  5. No focus indicators

What it can do on your machine

Read from SKILL.md and the folder at commit 11d15aa. 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

    Shell commands in SKILL.md call:

    • npx
    • npm

    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
    • dequeuniversity.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 3.2k tokens when it runs, and up to ~8.4k if it reads all its reference files. Until then it costs about 57 tokens; SKILL.md has 746 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~57
When it runs · the whole SKILL.md, loaded when a task matches
~3.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8.4k

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 ever-works/ever-works at commit 11d15aa, republished under its MIT licence (© ever-works). 746 words, ~3,164 tokens.

Download SKILL.mdSave it as .claude/skills/accessibility/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
accessibility
description
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
license
MIT
metadata.author
web-quality-skills
metadata.version
1.1

Accessibility (a11y)

Comprehensive accessibility guidelines based on WCAG 2.2 and Lighthouse accessibility audits. Goal: make content usable by everyone, including people with disabilities.

WCAG Principles: POUR

PrincipleDescription
PerceivableContent can be perceived through different senses
OperableInterface can be operated by all users
UnderstandableContent and interface are understandable
RobustContent works with assistive technologies

Conformance levels

LevelRequirementTarget
AMinimum accessibilityMust pass
AAStandard complianceShould pass (legal requirement in many jurisdictions)
AAAEnhanced accessibilityNice to have

Perceivable

Text alternatives (1.1)

Images require alt text:

html
<!-- ❌ Missing alt -->
<img src="chart.png" />

<!-- ✅ Descriptive alt -->
<img src="chart.png" alt="Bar chart showing 40% increase in Q3 sales" />

<!-- ✅ Decorative image (empty alt) -->
<img src="decorative-border.png" alt="" role="presentation" />

<!-- ✅ Complex image with longer description -->
<figure>
	<img src="infographic.png" alt="2024 market trends infographic" aria-describedby="infographic-desc" />
	<figcaption id="infographic-desc">
		<!-- Detailed description -->
	</figcaption>
</figure>

Icon buttons need accessible names:

html
<!-- ❌ No accessible name -->
<button>
	<svg><!-- menu icon --></svg>
</button>

<!-- ✅ Using aria-label -->
<button aria-label="Open menu">
	<svg aria-hidden="true"><!-- menu icon --></svg>
</button>

<!-- ✅ Using visually hidden text -->
<button>
	<svg aria-hidden="true"><!-- menu icon --></svg>
	<span class="visually-hidden">Open menu</span>
</button>

Visually hidden class:

css
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
Color contrast (1.4.3, 1.4.6)
Text SizeAA minimumAAA enhanced
Normal text (< 18px / < 14px bold)4.5:17:1
Large text (≥ 18px / ≥ 14px bold)3:14.5:1
UI components & graphics3:13:1
css
/* ❌ Low contrast (2.5:1) */
.low-contrast {
	color: #999;
	background: #fff;
}

/* ✅ Sufficient contrast (7:1) */
.high-contrast {
	color: #333;
	background: #fff;
}

/* ✅ Focus states need contrast too */
:focus-visible {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
}

Don't rely on color alone:

html
<!-- ❌ Only color indicates error -->
<input class="error-border" />
<style>
	.error-border {
		border-color: red;
	}
</style>

<!-- ✅ Color + icon + text -->
<div class="field-error">
	<input aria-invalid="true" aria-describedby="email-error" />
	<span id="email-error" class="error-message">
		<svg aria-hidden="true"><!-- error icon --></svg>
		Please enter a valid email address
	</span>
</div>
Media alternatives (1.2)
html
<!-- Video with captions -->
<video controls>
	<source src="video.mp4" type="video/mp4" />
	<track kind="captions" src="captions.vtt" srclang="en" label="English" default />
	<track kind="descriptions" src="descriptions.vtt" srclang="en" label="Descriptions" />
</video>

<!-- Audio with transcript -->
<audio controls>
	<source src="podcast.mp3" type="audio/mp3" />
</audio>
<details>
	<summary>Transcript</summary>
	<p>Full transcript text...</p>
</details>

Operable

Keyboard accessible (2.1)

All functionality must be keyboard accessible:

javascript
// ❌ Only handles click
element.addEventListener('click', handleAction);

// ✅ Handles both click and keyboard
element.addEventListener('click', handleAction);
element.addEventListener('keydown', (e) => {
	if (e.key === 'Enter' || e.key === ' ') {
		e.preventDefault();
		handleAction();
	}
});

No keyboard traps. Users must be able to Tab into and out of every component. Use the modal focus trap pattern for dialogs—the native <dialog> element handles this automatically.

Focus visible (2.4.7)
css
/* ❌ Never remove focus outlines */
*:focus {
	outline: none;
}

/* ✅ Use :focus-visible for keyboard-only focus */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
}

/* ✅ Or custom focus styles */
button:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}
Focus not obscured (2.4.11) — new in 2.2

When an element receives keyboard focus, it must not be entirely hidden by other author-created content such as sticky headers, footers, or overlapping panels. At Level AAA (2.4.12), no part of the focused element may be hidden.

css
/* ✅ Account for sticky headers when scrolling to focused elements */
:target {
	scroll-margin-top: 80px;
}

/* ✅ Ensure focused items clear fixed/sticky bars */
:focus {
	scroll-margin-top: 80px;
	scroll-margin-bottom: 60px;
}

Provide a skip link so keyboard users can bypass repetitive navigation. See the skip link pattern for full markup and styles.

Target size (2.5.8) — new in 2.2

Interactive targets must be at least 24 × 24 CSS pixels (AA). Exceptions: inline text links, elements where the browser controls the size, and targets where a 24px circle centered on the bounding box does not overlap another target.

css
/* ✅ Minimum target size */
button,
[role='button'],
input[type='checkbox'] + label,
input[type='radio'] + label {
	min-width: 24px;
	min-height: 24px;
}

/* ✅ Comfortable target size (recommended 44×44) */
.touch-target {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
Dragging movements (2.5.7) — new in 2.2

Any action that requires dragging must have a single-pointer alternative (e.g., buttons, inputs). See the dragging movements pattern for a sortable-list example.

Timing (2.2)
javascript
// Allow users to extend time limits
function showSessionWarning() {
	const modal = createModal({
		title: 'Session Expiring',
		content: 'Your session will expire in 2 minutes.',
		actions: [
			{ label: 'Extend session', action: extendSession },
			{ label: 'Log out', action: logout }
		],
		timeout: 120000
	});
}
Motion (2.3)
css
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

Understandable

Page language (3.1.1)
html
<!-- ❌ No language specified -->
<html>
	<!-- ✅ Language specified -->
	<html lang="en">
		<!-- ✅ Language changes within page -->
		<p>The French word for hello is <span lang="fr">bonjour</span>.</p>
	</html>
</html>
Consistent navigation (3.2.3)
html
<!-- Navigation should be consistent across pages -->
<nav aria-label="Main">
	<ul>
		<li><a href="/" aria-current="page">Home</a></li>
		<li><a href="/products">Products</a></li>
		<li><a href="/about">About</a></li>
	</ul>
</nav>
Consistent help (3.2.6) — new in 2.2

If a help mechanism (contact info, chat widget, FAQ link, self-help option) is repeated across multiple pages, it must appear in the same relative order each time. Users who rely on consistent placement shouldn't have to hunt for help on every page.

Form labels (3.3.2)

Every input needs a programmatically associated label. See the form labels pattern for explicit, implicit, and instructional examples.

Error handling (3.3.1, 3.3.3)

Announce errors to screen readers with role="alert" or aria-live, set aria-invalid="true" on invalid fields, and focus the first error on submit. See the error handling pattern for full markup and JS.

Show full SKILL.md (314 more words)Show less
Redundant entry (3.3.7) — new in 2.2

Don't force users to re-enter information they already provided in the same session. Auto-populate from earlier steps, or let users select from previously entered values. Exceptions: security re-confirmation and content that has expired.

html
<!-- ✅ Auto-fill shipping address from billing -->
<fieldset>
	<legend>Shipping address</legend>
	<label>
		<input type="checkbox" id="same-as-billing" checked />
		Same as billing address
	</label>
	<!-- Fields auto-populated when checked -->
</fieldset>
Accessible authentication (3.3.8) — new in 2.2

Login flows must not rely on cognitive function tests (e.g., remembering a password, solving a puzzle) unless at least one of:

  • A copy-paste or autofill mechanism is available
  • An alternative method exists (e.g., passkey, SSO, email link)
  • The test uses object recognition or personal content (AA only; AAA removes this exception)
html
<!-- ✅ Allow paste in password fields -->
<input type="password" id="password" autocomplete="current-password" />

<!-- ✅ Offer passwordless alternatives -->
<button type="button">Sign in with passkey</button>
<button type="button">Email me a login link</button>

Robust

ARIA usage (4.1.2)

Prefer native elements:

html
<!-- ❌ ARIA role on div -->
<div role="button" tabindex="0">Click me</div>

<!-- ✅ Native button -->
<button>Click me</button>

<!-- ❌ ARIA checkbox -->
<div role="checkbox" aria-checked="false">Option</div>

<!-- ✅ Native checkbox -->
<label><input type="checkbox" /> Option</label>

When ARIA is needed, use the correct roles and states. See the ARIA tabs pattern for a complete tablist example.

Live regions (4.1.3)

Use aria-live regions to announce dynamic content changes without moving focus. See the live regions pattern for markup and a showNotification() helper.

Testing checklist

Automated testing
bash
# Lighthouse accessibility audit
npx lighthouse https://example.com --only-categories=accessibility

# axe-core
npm install @axe-core/cli -g
axe https://example.com
Manual testing
  • Keyboard navigation: Tab through entire page, use Enter/Space to activate
  • Screen reader: Test with VoiceOver (Mac), NVDA (Windows), or TalkBack (Android)
  • Zoom: Content usable at 200% zoom
  • High contrast: Test with Windows High Contrast Mode
  • Reduced motion: Test with prefers-reduced-motion: reduce
  • Focus order: Logical and follows visual order
  • Target size: Interactive elements meet 24×24px minimum

See the screen reader commands reference for VoiceOver and NVDA shortcuts.

Common issues by impact

Critical (fix immediately)
  1. Missing form labels
  2. Missing image alt text
  3. Insufficient color contrast
  4. Keyboard traps
  5. No focus indicators
Serious (fix before launch)
  1. Missing page language
  2. Missing heading structure
  3. Non-descriptive link text
  4. Auto-playing media
  5. Missing skip links
Moderate (fix soon)
  1. Missing ARIA labels on icons
  2. Inconsistent navigation
  3. Missing error identification
  4. Timing without controls
  5. Missing landmark regions

References

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

Files

SKILL.md and 2 other files (references) in .agents/skills/accessibility of ever-works/ever-works.

  • SKILL.md
  • references/A11Y-PATTERNS.md
  • references/WCAG.md

Open the folder on GitHubat commit 11d15aa

Used in 6 other repositories

We found 6 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 6 other GitHub owners. This page covers the copy in ever-works/ever-works, 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 skillever-works/ever-works1586 repos~3.2kAutomated safety check: PassMIT
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone
Accessibility Reviewmarkmead/hyperui12k1 repos~1.1kAutomated safety check: PassMIT
Web Animation DesignbaptisteArno/typebot.io11k2 repos~2.7kAutomated safety check: PassCustom licence
Accessibility Fixeribelick/ui-skills9.4k4 repos~1.2kAutomated safety check: PassMIT
Wcag Audit PatternsvmDeshpande/ai-agent-automation17810 repos~610Automated safety check: PassApache-2.0

Similar skills

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Accessibility Review

    markmead/hyperui

    Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.

    12k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • Web Animation Design

    baptisteArno/typebot.io

    Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.

    11k GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed

  • Accessibility Fixer

    ibelick/ui-skills

    Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

    9.4k GitHub starsUsed in 4 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Wcag Audit Patterns

    vmDeshpande/ai-agent-automation

    Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.

    178 GitHub starsUsed in 10 repos~610 tokens
    Frontend & DesignAuto-check passed

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.4k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from ever-works/ever-works

All 14 skills in this repo

  • Nodejs Backend Patterns

    ever-works/ever-works

    Build production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices.

    158 GitHub starsUsed in 17 repos~4k tokens
    Auto-check passed

  • Tailwind CSS Patterns

    ever-works/ever-works

    Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.

    158 GitHub starsUsed in 3 repos~1.6k tokens
    Auto-check: notes

  • SEO

    ever-works/ever-works

    Optimize for search engine visibility and ranking. An agent skill from ever-works/ever-works.

    158 GitHub starsUsed in 10 repos~2.9k tokens
    Auto-check passed

  • Nodejs Express Server

    ever-works/ever-works

    Build production-ready Express.js servers with middleware, authentication, routing, and database integration.

    158 GitHub stars~965 tokensUpdated 2 days ago
    Auto-check passed

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    158 GitHub starsUsed in 2 repos~3.8k tokens
    Auto-check passed

  • Email And Password Best Practices

    ever-works/ever-works

    Configure email verification, implement password reset flows, set password policies, and customise hashing algorithms for Better Auth email/password authentication.

    158 GitHub starsUsed in 3 repos~1.5k tokens
    Auto-check passed

Categories

Questions about Accessibility

What does Accessibility do?

Audit and improve web accessibility following WCAG 2.2 guidelines. Accessibility is an agent skill from ever-works/ever-works.2 guidelines.

When should I use Accessibility?

Accessibility fits situations like: asked to improve accessibility; WCAG compliance; screen reader support; keyboard navigation.

How do I install Accessibility in Claude Code?

Run `npx skills add ever-works/ever-works --skill accessibility -a claude-code`. Or copy the skill folder (.agents/skills/accessibility in ever-works/ever-works) 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 ever-works/ever-works --skill accessibility -a codex`. Or copy the skill folder (.agents/skills/accessibility in ever-works/ever-works) 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 ever-works/ever-works --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?

Going by SKILL.md and its folder, Accessibility needs the command-line tools its instructions call (npx and npm). Our summary lists: Node.js.

Does Accessibility access the network?

SKILL.md names 2 domains. As links in the text: w3.org and dequeuniversity.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 (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Accessibility use?

About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.2k tokens, read only when the agent opens those files.

What are the alternatives to Accessibility?

Skills that share tags, products or a category with Accessibility: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Accessibility?

ever-works (a GitHub organization) maintains it in ever-works/ever-works, which has 158 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 5, 2026.

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