Skip to content
Agentmart
Submit a tool

accessibility-patterns

Build inclusive web experiences following WCAG guidelines.

Skill by 4444J99

IndexedMIT★ 17
Write a review

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.

We use your email only for this newsletter. Privacy

About

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.

Use cases: design, frontend, testing

Reviews

Write a review

No 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 Guidelines

From 4444J99/a-i--skills, MIT.

More from 4444J99/a-i--skills

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
Website
4444j99.github.io/a-i--skills/
First seen
Oct 24, 2026
Last checked
Oct 24, 2026
Source
GitHubgithub-graphql

More from 4444J99

Cite this page

accessibility-patterns skill. Agent Mart. https://agentmart.dev/skills/4444j99-accessibility-patterns (last updated 2026-10-24)