playbooks

home / skills / shipshitdev / library / accessibility

accessibility skill

/bundles/frontend/skills/accessibility

This skill helps ensure WCAG 2.1 AA accessibility in React/Next.js apps by auditing components, improving keyboard support, and validating ARIA usage.

npx playbooks add skill shipshitdev/library --skill accessibility

Review the files below or copy the command above to add this skill to your agents.

Files (3)
SKILL.md
1.4 KB
---
name: accessibility
description: Expert in web accessibility (WCAG 2.1 AA compliance) for React/Next.js applications, ensuring all projects are usable by everyone
version: 1.0.0
tags:
  - accessibility
  - a11y
  - wcag
  - aria
  - keyboard-navigation
  - screen-reader
  - inclusive-design
---

# Accessibility (a11y) Skill

Act as an expert in web accessibility (a11y), specializing in WCAG 2.1 AA compliance for React/Next.js applications.

## When to Use This Skill

Use when you're:

- Creating or reviewing UI components
- Implementing interactive elements (buttons, forms, modals)
- Adding keyboard navigation
- Reviewing color contrast and visual design
- Testing with screen readers
- Auditing existing pages for accessibility issues
- Implementing ARIA attributes

## Quick Workflow

1. Discover project-specific accessibility requirements and existing patterns.
2. Apply core rules: semantic HTML, text alternatives, contrast, keyboard access, and focus management.
3. Validate with automated tooling plus manual keyboard and screen reader testing.
4. Document issues and fixes with examples.

## WCAG Principles (Quick)

- Perceivable: text alternatives, contrast, responsive support.
- Operable: keyboard access, focus management, timing.
- Understandable: clear language, predictable behavior.
- Robust: valid HTML and ARIA usage.

## References

- [Full guide: WCAG patterns, component examples, and testing checklists](references/full-guide.md)

Overview

This skill is an expert in web accessibility (a11y) focused on WCAG 2.1 AA compliance for React and Next.js applications. It helps teams build and review components, interactions, and pages so they are usable by people with diverse abilities. The guidance combines code-level fixes, testing workflows, and documentation-ready examples.

How this skill works

I inspect React/Next.js code and UI patterns for semantic HTML, ARIA usage, keyboard accessibility, focus management, and color contrast. I recommend concrete code changes, testing steps with automated tools and screen readers, and examples of accessible components. I also help create checklists and remediation plans prioritized by impact and effort.

When to use it

  • Designing or reviewing UI components (buttons, inputs, dialogs, lists)
  • Implementing keyboard navigation, focus handling, or modals
  • Auditing pages for WCAG 2.1 AA compliance and reporting fixes
  • Testing with screen readers, keyboard-only flows, and contrast checks
  • Adding or validating ARIA attributes and semantic markup

Best practices

  • Prefer semantic HTML first; add ARIA only when semantics are insufficient
  • Ensure all interactive elements are keyboard operable and focusable
  • Provide clear text alternatives for images, icons, and non-text content
  • Validate color contrast against WCAG AA thresholds and avoid color-only cues
  • Test with both automated tools and manual keyboard/screen reader scenarios

Example use cases

  • Convert a decorative icon button into an accessible button with aria-label and focus styles
  • Make a custom dropdown keyboard-accessible and expose role/aria attributes correctly
  • Audit a page and produce a prioritized list of WCAG 2.1 AA issues with code fixes
  • Implement skip links, logical heading structure, and improved semantic markup
  • Provide testing scripts and examples for using NVDA/VoiceOver and keyboard-only checks

FAQ

Do I always need ARIA attributes?

No. Use semantic HTML whenever possible; add ARIA only when native elements cannot express the required behavior.

How should I test components during development?

Combine automated linters and contrast checkers with manual keyboard navigation and screen reader testing to catch issues automated tools miss.