Agent-Skills.md

Agent Skills: Web Accessibility

Web accessibility compliance specialist. Use when conducting WCAG compliance

UncategorizedID: 89jobrien/steve/web-accessibility

Repository

89jobrien/steve
89jobrien
1

Install this agent skill to your local

pnpm dlx add-skill https://github.com/89jobrien/steve/tree/HEAD/steve/skills/web-accessibility

Skill Files

Browse the full folder contents for web-accessibility.

Download Skill

Loading file tree…

steve/skills/web-accessibility/SKILL.md

Skill Metadata

Name
web-accessibility
Description
Web accessibility compliance specialist. Use when conducting WCAG compliance

Web Accessibility

This skill provides comprehensive web accessibility analysis and remediation, focusing on WCAG compliance, screen reader compatibility, and inclusive design.

When to Use This Skill

  • When conducting WCAG compliance audits
  • When testing screen reader compatibility
  • When validating keyboard navigation
  • When analyzing color contrast
  • When ensuring inclusive design
  • When remediating accessibility issues

What This Skill Does

  1. WCAG Compliance: Assesses compliance with WCAG 2.1/2.2 (A, AA, AAA)
  2. Screen Reader Testing: Validates semantic HTML and ARIA usage
  3. Keyboard Navigation: Tests keyboard accessibility and focus management
  4. Color Contrast: Analyzes color contrast ratios
  5. Alternative Text: Evaluates alt text and media accessibility
  6. Form Accessibility: Validates form labels and error handling

How to Use

Audit Accessibility

Conduct a WCAG compliance audit of this website

Test keyboard navigation and screen reader compatibility

Specific Analysis

Check color contrast ratios and suggest improvements

WCAG Standards

Level A (Minimum)

  • Text alternatives for images
  • Captions for videos
  • Keyboard accessible
  • No seizure-inducing content
  • Proper heading structure

Level AA (Recommended)

  • Color contrast ratio 4.5:1 (text)
  • Resizable text up to 200%
  • Multiple navigation methods
  • Consistent navigation
  • Error identification

Level AAA (Enhanced)

  • Color contrast ratio 7:1 (text)
  • Sign language interpretation
  • Extended audio descriptions
  • No timing restrictions
  • Context-sensitive help

Examples

Example 1: WCAG Audit

Input: Audit homepage for WCAG compliance

Output:

## Accessibility Audit: Homepage

### Critical Issues (Level A)

**1. Missing Alt Text**
- **Location**: Hero image (line 45)
- **Issue**: Image has no alt attribute
- **Fix**: Add descriptive alt text
```html
<!-- Before -->
<img src="hero.jpg">

<!-- After -->
<img src="hero.jpg" alt="Team collaborating on project management dashboard">

2. Missing Form Labels

  • Location: Email input (line 78)
  • Issue: Input has no associated label
  • Fix: Add proper label
<!-- Before -->
<input type="email" id="email">

<!-- After -->
<label for="email">Email Address</label>
<input type="email" id="email" aria-required="true">

Warnings (Level AA)

3. Color Contrast

  • Location: Button text (line 92)
  • Issue: Contrast ratio 3.2:1 (needs 4.5:1)
  • Fix: Darken text color

## Best Practices

### Accessibility Guidelines

1. **Semantic HTML**: Use proper HTML elements
2. **ARIA When Needed**: Use ARIA for complex interactions
3. **Keyboard Access**: Ensure all functionality is keyboard accessible
4. **Color Contrast**: Meet WCAG contrast requirements
5. **Testing**: Test with screen readers and keyboard only

## Related Use Cases

- WCAG compliance audits
- Screen reader testing
- Keyboard navigation validation
- Color contrast analysis
- Inclusive design implementation