accessibility

Files (1)

• SKILL.md

SKILL.md (first lines)

# Accessibility (a11y) Compliance Checking

I'll analyze your web application for accessibility issues, validate WCAG 2.1 compliance, check ARIA attributes, verify keyboard navigation, validate color contrast, and generate comprehensive accessibility reports.

**Compliance Standards:**
- WCAG 2.1 Level A (minimum compliance)
- WCAG 2.1 Level AA (target standard)
- WCAG 2.1 Level AAA (enhanced accessibility)
- Section 508 (US federal requirements)
- EN 301 549 (EU accessibility requirements)

**Frameworks Supported:**
- React (React Testing Library, jest-axe)
- Vue.js (Vue Test Utils, vue-axe)
- Angular (Angular testing utilities)
- HTML/CSS (static analysis)
- Next.js, Gatsby, Nuxt.js


**Arguments:** `$ARGUMENTS` - optional:
- URL to audit (defaults to http://localhost:3000)
- WCAG level (A, AA, AAA - defaults to AA)
- Focus area: --images, --forms, --keyboard, --contrast, --aria (for targeted analysis)

<think>
Accessibility ensures:
- Usability for people with disabilities
- Keyboard-only navigation support
- Screen reader compatibility
- Visual accessibility (contrast, font size)
- Cognitive accessibility (clear language, structure)

Common a11y issues:
- Missing alt text on images
- Insufficient color contrast
- Missing ARIA labels
- Non-semantic HTML
- Keyboard navigation barriers
- Missing form labels
- Poor heading hierarchy
</think>

## Phase 1: Framework & Tool Detection

First, I'll detect your framework and set up accessibility testing tools:

```bash
#!/bin/bash
# Accessibility Analysis - Framework Detection & Tool Setup

echo "=== Accessibility (a11y) Compliance Checking ==="
echo ""

# Create accessibility directory
mkdir -p .claude/accessibility
A11Y_DIR=".claude/accessibility"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
REPORT="$A11Y_DIR/a11y-report-$TIMESTAMP.md"
WCAG_LEVEL="${1:-AA}"  # Default to WCAG 2.1 Level AA
TARGET_URL="${2:-http://localhost:3000}"

echo "Configuration:"
echo "  WCAG Level: $WCAG_LEVEL"
echo "  Target URL: $TARGET_URL"
echo "  Analysis directory: $A11Y_DIR"
echo ""

detect_framework() {
    echo "Detecting framework..."
    echo ""

    local framework=""

    if [ ! -f "package.json" ]; then
        echo "⚠️  No package.json found"
        echo "   This skill works best with JavaScript/TypeScript projects"
        echo "   Will perform generic HTML analysis"
        framework="generic"
    else
        # React detection
        if grep -q '"react"' package.json; then
            framework="react"
            echo "✓ React detected"

            # Check for React Testing Library
            if grep -q '@testing-library/react' package.json; then
                echo "  - React Testing Library available"
            fi

            # Check for jest-axe
            if grep -q 'jest-axe' package.json; then
                echo "  - jest-axe available"
            fi

        # Vue detection
        elif grep -q '"vue"' package.json; then
            framework="vue"
            echo "✓ Vue.js detected"

        # Angular detection
        elif grep -q '"@angular' package.json; then
            framework="angular"
            echo "✓ Angular detected"

        # Next.js detection
        elif grep -q '"next"' package.json; then
            framework="next"
            echo "✓ Next.js detected"

        else
            framework="generic"
            echo "✓ Generic web project detected"
        fi
    fi

    echo "$framework"
}

FRAMEWORK=$(detect_framework)

From manastalukdar/ai-devstudio, MIT.

More from manastalukdar/ai-devstudio