accessibility-patterns
Build inclusive web experiences following WCAG guidelines.
Skill by 4444J99
Chalk Labs
Need help deploying accessibility-patterns?
Chalk Labs sets up agents like this inside real teams: connected to your tools, tested on your data, with a human in the loop where it matters.
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/4444j99-accessibility-patterns
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend, testing
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/accessibility-patterns
What's inside
- Skill name
accessibility-patterns- Description
- Build inclusive web experiences following WCAG guidelines. Covers semantic HTML, ARIA, keyboard navigation, color contrast, and testing strategies. Triggers on accessibility, a11y, WCAG, screen readers, or inclusive design requests.
- License
- MIT
- Instructions
- 466 lines in SKILL.md · view on GitHub
Files (5)
- SKILL.md
- aria-patterns.md · references/
- testing-tools.md · references/
- wcag-checklist.md · references/
- workflow-integration.md · references/
SKILL.md (first lines)
# Accessibility Patterns
Build for everyone from the start.
## Core Principles (POUR)
| Principle | Meaning | Example |
|-----------|---------|---------|
| **Perceivable** | Users can perceive content | Alt text, captions, contrast |
| **Operable** | Users can interact | Keyboard access, enough time |
| **Understandable** | Users can comprehend | Clear language, predictable |
| **Robust** | Works with assistive tech | Valid HTML, ARIA |
---
## WCAG Levels
| Level | Description | Target |
|-------|-------------|--------|
| A | Minimum | Must have |
| AA | Standard | Industry standard, legal requirement |
| AAA | Enhanced | Nice to have |
**Target Level AA** for most projects.
---
## Semantic HTML
### Use the Right Element
| Instead of | Use |
|------------|-----|
| `<div onclick>` | `<button>` |
| `<span class="link">` | `<a href>` |
| `<div class="header">` | `<header>` |
| `<div class="nav">` | `<nav>` |
| `<div class="main">` | `<main>` |
| `<b>` for emphasis | `<strong>` |
| `<i>` for emphasis | `<em>` |
### Document Structure
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Descriptive Page Title</title>
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<header>
<nav aria-label="Main">
<!-- navigation -->
</nav>
</header>
<main id="main">
<h1>Page Title</h1>
<!-- Only one h1 per page -->
<article>
<h2>Section</h2>
<h3>Subsection</h3>
</article>
</main>
<aside aria-label="Related content">
<!-- sidebar -->
</aside>
<footer>
<!-- footer content -->
</footer>
</body>
</html>
```
### Heading Hierarchy
```
h1 - Page title (one per page)
h2 - Major sections
h3 - Subsections
h4 - Sub-subsections
Never skip levels (h1 → h3)
```
---
## Images & Media
### Alt Text
```html
<!-- Informative image -->
<img src="chart.png" alt="Bar chart showing sales increased 40% in Q4">
<!-- Decorative image -->
<img src="decorative-border.png" alt="" role="presentation">
<!-- Complex image -->
<figure>
<img src="complex-diagram.png" alt="System architecture diagram">
<figcaption>
Detailed description of the system architecture...
</figcaption>
</figure>
<!-- Image as link -->
<a href="/products">
<img src="product.jpg" alt="View our products">
</a>
```
### Alt Text GuidelinesFrom 4444J99/a-i--skills, MIT.
More from 4444J99/a-i--skills
- 0.646score
d2l-discussion-responder
4444J99
Review D2L/Brightspace discussion threads as an instructor, identify unanswered questions, verify course facts, and draft concise replies in the instructor's…
SkillAFreshness: A★ 17Claude Code +9 - 0.646score
artifact-resurfacing
4444J99
Four-phase protocol for clearing accumulated drift between memory claims, CLAUDE.md citations, and on-disk reality.
SkillAFreshness: A★ 17Claude Code +9 - 0.646score
domain-ideal-whole-substrate
4444J99
Foundational layer beneath PDE.
SkillAFreshness: A★ 17Claude Code +9 - 0.641score
conversation-content-pipeline
4444J99
Transform AI conversations and chat transcripts into publishable content including blog posts, documentation, tutorials, and knowledge base entries.
SkillAFreshness: A★ 17Claude Code +9 - 0.641score
document-audit-extraction
4444J99
Audit document collections to extract features, identify patterns, assess quality, and build structured inventories.
SkillAFreshness: A★ 17Claude Code +9 - 0.637score
closeout
4444J99
Session-end ritual that walks back through plans authored and atoms touched in this session, assigning each a closure status (DONE-NNN, IRF-XXX-NNN, or…
SkillAFreshness: A★ 17Claude Code +9 - 0.601score
code-review-checklist
4444J99
Guide an AI agent through a structured code review — correctness, security, performance, readability, and test coverage — producing a summary with actionable…
SkillBFreshness: B★ 17Claude Code +9 - 0.556score
ecosystem-autopsy
4444J99
Orchestrate a full directory-graph autopsy across an ORGANVM workspace, then emit migration signals that unite repositories under canonical governance.
SkillCFreshness: C★ 17Claude Code +9 - 0.551score
expansive-inquiry
4444J99
Multi-perspective collaborative inquiry.
SkillCFreshness: C★ 17Claude Code +9 - 0.551score
corpus-persona-extraction
4444J99
Ingest a corpus of session logs (JSONL transcripts, chat exports) and extract a persona profile — vocabulary frequency, unique idioms and coinages, structural…
SkillCFreshness: C★ 17Claude Code +9 - 0.550score
continuous-learning-agent
4444J99
Self-improvement patterns for AI agents to learn from feedback, errors, and successful patterns across sessions
SkillCFreshness: C★ 17Claude Code +9 - 0.491score
evaluation-to-growth
4444J99
Systematic content evaluation framework progressing through Critique → Reinforcement → Risk Analysis → Growth.
SkillDFreshness: D★ 17Claude Code +9
Signals
- Stars
- 17
- Forks
- 9
- Open issues
- 6
- Last commit (this folder)
- Apr 18, 2026 (6 months ago)
- Last release
- Feb 6, 2026 (8 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- Repository
- github.com/4444J99/a-i--skills
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from 4444J99
- 0.646score
domain-ideal-whole-substrate
4444J99
Foundational layer beneath PDE.
SkillAFreshness: A★ 17Claude Code +9 - 0.646score
d2l-discussion-responder
4444J99
Review D2L/Brightspace discussion threads as an instructor, identify unanswered questions, verify course facts, and draft concise replies in the instructor's…
SkillAFreshness: A★ 17Claude Code +9 - 0.646score
artifact-resurfacing
4444J99
Four-phase protocol for clearing accumulated drift between memory claims, CLAUDE.md citations, and on-disk reality.
SkillAFreshness: A★ 17Claude Code +9 - 0.641score
document-audit-extraction
4444J99
Audit document collections to extract features, identify patterns, assess quality, and build structured inventories.
SkillAFreshness: A★ 17Claude Code +9 - 0.641score
conversation-content-pipeline
4444J99
Transform AI conversations and chat transcripts into publishable content including blog posts, documentation, tutorials, and knowledge base entries.
SkillAFreshness: A★ 17Claude Code +9 - 0.637score
closeout
4444J99
Session-end ritual that walks back through plans authored and atoms touched in this session, assigning each a closure status (DONE-NNN, IRF-XXX-NNN, or…
SkillAFreshness: A★ 17Claude Code +9
Done for you
Rather not set it up yourself?
Chalk Labs scopes, builds and runs agents for your team: the task audit, the eval harness, the integrations and the weekly ops report. Fixed scope, priced before we start.
See how we build AI agents →Read the case studies
Chalk Labs is a two-founder AI and growth studio. We build AI agents, CRMs and MVPs for Web3 and AI companies, and have shipped 50+ product and token launches.
- launches shipped
- 50+
- launches shipped
- media placements
- 500+
- media placements
- founders on every account
- 2
- founders on every account
Press we've placed: Forbes · CoinDesk · Decrypt · Cointelegraph · The Block
Rahil Jain, Co-founder, Chalk Labs. Ex-Goldman Sachs engineer. You talk to the person who builds it.
Get accessibility-patterns running in your business
Tell us what you want to automate. A founder replies within one working day with a plan, not a pitch deck.
Cite this page
accessibility-patterns skill. Agent Mart. https://agentmart.dev/skills/4444j99-accessibility-patterns (last updated 2026-10-24)