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 Fundamentals

by DanielPodolsky in DanielPodolsky/ownyourcode

Reviews accessibility including WCAG, ARIA, keyboard navigation.

MITAuto-check passedFrontend & Design

Install Accessibility Fundamentals

skills CLI
$ npx skills add DanielPodolsky/ownyourcode --skill accessibility-fundamentals -a claude-code

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

GitHub CLI
$ gh skill install DanielPodolsky/ownyourcode accessibility-fundamentals --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/DanielPodolsky/ownyourcode.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/fundamentals/accessibility .claude/skills/accessibility-fundamentals && 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-fundamentals
GitHub stars
290
Used in
1 other repo
Token cost
~1.8k tokens
SKILL.md length
589 words
Files
1
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Reviews accessibility including WCAG, ARIA, keyboard navigation.

  • Works in 6 steps: Div as Button → Missing Form Labels → Icon-Only Buttons → …
  • Junior builds forms
  • SKILL.md covers When to Apply, The Accessibility Checklist, Common Mistakes (Anti-Patterns) and Socratic Questions, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Accessibility Fundamentals is an agent skill from DanielPodolsky/ownyourcode. Reviews accessibility including WCAG, ARIA, keyboard navigation. Use when junior builds forms, buttons, modals, interactive elements, or asks "is this accessible", "a11y", "screen reader".

Its SKILL.md is about 1.8k 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. The repository describes itself as: Claude Code workflow for AI-mentored development. Work efficiently with Spec-Driven Development and the 6 Gates. Built to fight cognitive offloading — for developers using AI to… The licence is MIT.

When your agent uses it

  • Junior builds forms
  • Interactive elements
  • Asks is this accessible

Example prompts

  • “is this accessible”
  • “screen reader”
  • “Use the accessibility-fundamentals skill to review accessibility including WCAG, ARIA, keyboard navigation”
  • “/accessibility-fundamentals”

Workflow steps

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

  1. Div as Button
  2. Missing Form Labels
  3. Icon-Only Buttons
  4. Removed Focus Styles
  5. Non-Descriptive Link Text
  6. Missing Heading Hierarchy

What it can do on your machine

Read from SKILL.md and the folder at commit bd1f17c. 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 typescript, css and bash).

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

  • Network

    No URLs in SKILL.md.

    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 Fundamentals loads about 1.8k tokens when it runs. Until then it costs about 54 tokens; SKILL.md has 589 words of instructions outside code blocks.

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

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 DanielPodolsky/ownyourcode at commit bd1f17c, republished under its MIT licence (© DanielPodolsky). 589 words, ~1,812 tokens.

Download SKILL.mdSave it as .claude/skills/accessibility-fundamentals/SKILL.md (or your agent's skills folder).
name
accessibility-fundamentals
description
Reviews accessibility including WCAG, ARIA, keyboard navigation. Use when junior builds forms, buttons, modals, interactive elements, or asks "is this accessible", "a11y", "screen reader".

Accessibility Fundamentals Review

"Accessibility is not a feature, it's a requirement. If 15% of users can't use your app, you've failed 15% of users."

When to Apply

Activate this skill when:

  • Reviewing JSX with buttons, links, or forms
  • Seeing custom interactive components
  • Forms with inputs and labels
  • Navigation menus
  • Modal dialogs
  • Any user interaction code

The Accessibility Checklist

Must Have (Every Interactive Element)
  • Keyboard accessible — All actions work with Tab + Enter/Space
  • Focus visible — Clear visual indicator of focused element
  • Semantic elements — <button> not <div onClick>
  • Form labels — Every input has an associated <label>
  • Alt text — Images have descriptive alt attributes
  • Sufficient contrast — Text readable against background (4.5:1 ratio)
Should Have (Complex Interactions)
  • ARIA labels — Icon-only buttons have aria-label
  • Focus trapping — Modals trap focus until closed
  • Skip links — "Skip to main content" for keyboard users
  • Live regions — Dynamic content announced to screen readers
  • Error messages — Linked to inputs with aria-describedby
Never Do
  • Rely on color alone — Color should not be the only indicator
  • Remove focus outlines — Never outline: none without replacement
  • Use divs for buttons — Use semantic <button> or <a>
  • Trap users — Always provide escape from modals/menus

Common Mistakes (Anti-Patterns)

1. Div as Button
tsx
// ❌ BAD: Not keyboard accessible, no semantics
<div onClick={handleClick} className="button">
  Click me
</div>

// ✅ GOOD: Native button element
<button onClick={handleClick} className="button">
  Click me
</button>

Why it matters: <div onClick> doesn't receive keyboard focus, doesn't respond to Enter/Space, and isn't announced as a button by screen readers.

2. Missing Form Labels
tsx
// ❌ BAD: Input has no label
<input type="email" placeholder="Email" />

// ✅ GOOD: Label linked to input
<label htmlFor="email">Email</label>
<input id="email" type="email" placeholder="example@email.com" />

// ✅ ALSO GOOD: Wrapping label
<label>
  Email
  <input type="email" />
</label>
3. Icon-Only Buttons
tsx
// ❌ BAD: No accessible name
<button onClick={handleDelete}>
  <TrashIcon />
</button>

// ✅ GOOD: ARIA label for screen readers
<button onClick={handleDelete} aria-label="Delete item">
  <TrashIcon aria-hidden="true" />
</button>
4. Removed Focus Styles
css
/* ❌ BAD: Focus invisible */
button:focus {
  outline: none;
}

/* ✅ GOOD: Custom but visible focus */
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
}

/* ✅ BEST: Use focus-visible */
button:focus-visible {
  outline: 2px solid #4299e1;
  outline-offset: 2px;
}
5. Non-Descriptive Link Text
tsx
// ❌ BAD: "Click here" tells screen reader nothing
<p>
  To read our privacy policy, <a href="/privacy">click here</a>.
</p>

// ✅ GOOD: Link text describes destination
<p>
  Read our <a href="/privacy">privacy policy</a>.
</p>
6. Missing Heading Hierarchy
tsx
// ❌ BAD: Screen reader can't navigate
<div className="title">Welcome</div>
<div className="subtitle">Getting Started</div>

// ✅ GOOD: Proper headings
<h1>Welcome</h1>
<h2>Getting Started</h2>

Socratic Questions

Ask these instead of giving answers:

  1. Keyboard: "Can you complete this action using only the keyboard?"
  2. Focus: "If I tab through the page, can I see where I am?"
  3. Semantics: "What does a screen reader announce for this element?"
  4. Labels: "If the placeholder disappears, how do users know what to enter?"
  5. Color: "If someone is colorblind, can they still understand this UI?"
  6. Alt Text: "If the image doesn't load, what context is lost?"

Testing Accessibility

Manual Testing
  1. Keyboard test: Navigate entire page with Tab only
  2. Focus test: Can you always see where focus is?
  3. Zoom test: Does layout break at 200% zoom?
  4. Screen reader: Try VoiceOver (Mac) or NVDA (Windows)
Show full SKILL.md (233 more words)Show less
Automated Testing
bash
# In your test file
# Pattern: axe-core for React Testing Library
import { axe } from 'jest-axe';

it('should have no a11y violations', async () => {
  const { container } = render(<YourComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

ARIA Reference

Common ARIA Attributes
AttributeUse Case
aria-labelProvides name for icon-only buttons
aria-labelledbyPoints to element with visible label
aria-describedbyPoints to description (error messages)
aria-hidden="true"Hides decorative icons from screen readers
aria-expandedIndicates dropdown/accordion state
aria-liveAnnounces dynamic content changes
roleDefines element's purpose (use sparingly)
The First Rule of ARIA

"No ARIA is better than bad ARIA."

Use semantic HTML first. Only use ARIA when HTML can't express what you need.

Stack-Specific Guidance

React
tsx
// Pattern: Button with accessible name
<button
  onClick={handleAction}
  aria-label="Close modal"
>
  <XIcon aria-hidden="true" />
</button>
Form Error Pattern
tsx
// Pattern: Error linked to input
<label htmlFor="email">Email</label>
<input
  id="email"
  type="email"
  aria-describedby={error ? "email-error" : undefined}
  aria-invalid={error ? "true" : undefined}
/>
{error && (
  <span id="email-error" role="alert">
    {error}
  </span>
)}

Red Flags to Call Out

FlagQuestion
<div onClick>"What happens when a keyboard user tries to click this?"
outline: none"How does a keyboard user know where they are?"
No form labels"How does a screen reader know what this input is for?"
Icon-only button"What does a screen reader announce for this button?"
Color as only indicator"What if someone is red-green colorblind?"
tabIndex > 0"This breaks natural tab order. Why is it needed?"

Interview Connection

"I implemented accessibility best practices including semantic HTML, proper form labeling, and keyboard navigation, ensuring our app is usable by everyone."

STAR story material:

  • "Identified accessibility issues with our form and fixed them..."
  • "Implemented proper focus management in our modal component..."
  • "Added screen reader support for our notification system..."

MCP Usage

Context7 - Framework Docs
Fetch: WAI-ARIA practices
Fetch: React accessibility documentation
Octocode - Real Examples
Search: "aria-label" + "button" patterns
Search: Modal focus trapping implementations

Resources

  • WCAG 2.1 Guidelines (check Context7)
  • Deque's axe-core for automated testing
  • WebAIM color contrast checker

© DanielPodolsky, 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 .claude/skills/fundamentals/accessibility of DanielPodolsky/ownyourcode.

Open the folder on GitHubat commit bd1f17c

Used in 1 other repository

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

Compare with similar skills

Accessibility Fundamentals 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 Fundamentals compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Accessibility Fundamentals this skillDanielPodolsky/ownyourcode2901 repos~1.8kAutomated safety check: PassMIT
Web Interface Guidelines Reviewervercel-labs/openreview1.7k97 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.6k4 repos~1.2kAutomated safety check: PassMIT
Wcag Audit PatternsvmDeshpande/ai-agent-automation17811 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 97 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.6k 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 11 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.6k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from DanielPodolsky/ownyourcode

All 19 skills in this repo

  • Backend Fundamentals

    DanielPodolsky/ownyourcode

    Reviews API design, REST conventions, and backend architecture.

    290 GitHub starsUsed in 1 repo~1.1k tokens
    Auto-check passed

  • Database Fundamentals

    DanielPodolsky/ownyourcode

    Reviews schema design, SQL queries, ORM patterns. An agent skill from DanielPodolsky/ownyourcode.

    290 GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed

  • Documentation Fundamentals

    DanielPodolsky/ownyourcode

    Guides documentation standards including READMEs, JSDoc, and code comments.

    290 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed

  • Error Handling Fundamentals

    DanielPodolsky/ownyourcode

    Guides error handling for async operations and API calls. An agent skill from DanielPodolsky/ownyourcode.

    290 GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

  • Frontend Fundamentals

    DanielPodolsky/ownyourcode

    Reviews React/Vue component architecture, state, and hooks. An agent skill from DanielPodolsky/ownyourcode.

    290 GitHub starsUsed in 1 repo~874 tokens
    Auto-check passed

  • Performance Fundamentals

    DanielPodolsky/ownyourcode

    Reviews performance including N+1 queries, re-renders, scalability.

    290 GitHub starsUsed in 1 repo~1.3k tokens
    Auto-check passed

Categories

Questions about Accessibility Fundamentals

What does Accessibility Fundamentals do?

Reviews accessibility including WCAG, ARIA, keyboard navigation. Accessibility Fundamentals is an agent skill from DanielPodolsky/ownyourcode. Reviews accessibility including WCAG, ARIA, keyboard navigation.

When should I use Accessibility Fundamentals?

Accessibility Fundamentals fits situations like: junior builds forms; interactive elements; asks is this accessible.

How do I install Accessibility Fundamentals in Claude Code?

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

How do I install Accessibility Fundamentals in Codex?

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

Can I use Accessibility Fundamentals 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 DanielPodolsky/ownyourcode --skill accessibility-fundamentals -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-fundamentals, .gemini/skills/accessibility-fundamentals, .github/skills/accessibility-fundamentals and .opencode/skills/accessibility-fundamentals in your project.

What does Accessibility Fundamentals need to run?

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

Does Accessibility Fundamentals access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Accessibility Fundamentals 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 Fundamentals use?

Accessibility Fundamentals 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 Fundamentals use?

About 1.8k tokens (SKILL.md is roughly 7.2k 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 Fundamentals?

Skills that share tags, products or a category with Accessibility Fundamentals: 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.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Accessibility Fundamentals?

DanielPodolsky (a GitHub user) maintains it in DanielPodolsky/ownyourcode, which has 290 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on June 27, 2026.

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