mcpField
A
accessibility

accessibility

github.com/dralgorhythmDesign & UI12991 installsUpdated 14w ago
Repository

About accessibility

accessibility is a design skill that outlines WCAG 2.1 principles, common interface accessibility checks, and testing guidance. It helps designers and developers review keyboard access, contrast, forms, images, and screen-reader behavior.

Key features

  1. 01WCAG 2.1 POUR principles
  2. 02Checks for contrast and keyboard access
  3. 03Guidance for forms and images
  4. 04ARIA basics and screen-reader checks
  5. 05Testing checklist and tool references

Use cases

  1. 01Reviewing an interface for accessibility issues
  2. 02Checking keyboard navigation and focus
  3. 03Validating contrast and form labels
  4. 04Planning screen-reader and image-alt checks

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill accessibility

After installing, type/accessibilityin Claude Code to confirm it loaded.

Details

From the project README

Accessibility

WCAG 2.1 Principles (POUR)

Perceivable

Content must be presentable in ways users can perceive.

Operable

Interface must be operable by all users.

Understandable

Content and operation must be understandable.

Robust

Content must work with current and future technologies.

Common Issues & Fixes

Images
<!-- Bad -->
<img src="chart.png">

<!-- Good -->
<img src="chart.png" alt="Sales increased 25% in Q4 2024">
Forms
<!-- Bad -->
<input type="email" placeholder="Email">

<!-- Good -->
<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-hint">
<span id="email-hint">We'll never share your email</span>
Color Contrast
  • Normal text: 4.5:1 minimum
  • Large text (18pt+): 3:1 minimum
  • UI components: 3:1 minimum
Keyboard Navigation
  • All interactive elements focusable
  • Visible focus indicator
  • Logical tab order
  • Skip links for navigation
Screen Readers
<!-- Hidden visually but accessible -->
<span class="sr-only">Open menu</span>

<!-- Live regions for updates -->
<div aria-live="polite">Item added to cart</div>

ARIA Basics

<!-- Roles -->
<nav role="navigation">

<!-- States -->
<button aria-expanded="false">Menu</button>

<!-- Properties -->
<input aria-required="true">

<!-- Labels -->
<button aria-label="Close dialog">×</button>

Testing Checklist

  • Keyboard navigation works
  • Screen reader announces correctly
  • Color contrast passes
  • Focus visible
  • Form labels present
  • Images have alt text
  • Headings hierarchical
  • Links descriptive

Tools

  • Axe DevTools (browser extension)
  • WAVE (web accessibility evaluator)
  • Lighthouse (Chrome DevTools)
  • Screen readers: NVDA, VoiceOver, JAWS

Comments

Markdown supported