Web Accessibility

{
  "schema_version": "2.0",
  "meta": {
    "generated_at": "2026-01-16T14:32:49.082Z",
    "slug": "89jobrien-web-accessibility",
    "source_url": "https://github.com/89jobrien/steve/tree/main/steve/skills/web-accessibility",
    "source_ref": "main",
    "model": "claude",
    "analysis_version": "3.0.0",
    "source_type": "community",
    "content_hash": "197f0dc9558c6687fd1bc5edff50ba05f81dadd81774462a75662413df82979c",
    "tree_hash": "7703dbecd566df37376285c943a9a60679894aae9c7bc63162b181966e28d43f"
  },
  "skill": {
    "name": "web-accessibility",
    "description": "Web accessibility compliance specialist. Use when conducting WCAG compliance audits, testing screen reader compatibility, validating keyboard navigation, or ensuring inclusive design. Focuses on WCAG 2.1/2.2 standards.",
    "summary": "Web accessibility compliance specialist. Use when conducting WCAG compliance audits, testing screen ...",
    "icon": "♿",
    "version": "1.0.1",
    "author": "Joseph OBrien",
    "license": "MIT",
    "category": "documentation",
    "tags": [
      "accessibility",
      "wcag",
      "inclusive-design",
      "a11y",
      "compliance"
    ],
    "supported_tools": [
      "claude",
      "codex",
      "claude-code"
    ],
    "risk_factors": [
      "network",
      "external_commands"
    ]
  },
  "security_audit": {
    "risk_level": "safe",
    "is_blocked": false,
    "safe_to_publish": true,
    "summary": "Pure prompt-based skill containing only markdown documentation. The static analyzer flagged version numbers as 'weak cryptographic algorithms' and markdown code fences as 'shell backticks' - both are false positives. No executable code, network calls, file access, or command execution present. This skill provides AI assistants with accessibility expertise for WCAG compliance audits.",
    "risk_factor_evidence": [
      {
        "factor": "network",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          }
        ]
      },
      {
        "factor": "external_commands",
        "evidence": [
          {
            "file": "SKILL.md",
            "line_start": 40,
            "line_end": 42
          },
          {
            "file": "SKILL.md",
            "line_start": 42,
            "line_end": 44
          },
          {
            "file": "SKILL.md",
            "line_start": 44,
            "line_end": 46
          },
          {
            "file": "SKILL.md",
            "line_start": 46,
            "line_end": 50
          },
          {
            "file": "SKILL.md",
            "line_start": 50,
            "line_end": 52
          },
          {
            "file": "SKILL.md",
            "line_start": 52,
            "line_end": 88
          },
          {
            "file": "SKILL.md",
            "line_start": 88,
            "line_end": 97
          },
          {
            "file": "SKILL.md",
            "line_start": 97,
            "line_end": 103
          },
          {
            "file": "SKILL.md",
            "line_start": 103,
            "line_end": 111
          },
          {
            "file": "SKILL.md",
            "line_start": 111,
            "line_end": 118
          },
          {
            "file": "SKILL.md",
            "line_start": 118,
            "line_end": 128
          }
        ]
      }
    ],
    "critical_findings": [],
    "high_findings": [],
    "medium_findings": [],
    "low_findings": [],
    "dangerous_patterns": [],
    "files_scanned": 2,
    "total_lines": 326,
    "audit_model": "claude",
    "audited_at": "2026-01-16T14:32:49.082Z"
  },
  "content": {
    "user_title": "Audit Websites for WCAG Accessibility Compliance",
    "value_statement": "Web accessibility issues can exclude users with disabilities from accessing digital content. This skill provides comprehensive WCAG compliance audits, screen reader compatibility testing, and actionable remediation guidance for creating inclusive web experiences.",
    "seo_keywords": [
      "web accessibility",
      "WCAG compliance",
      "accessibility audit",
      "screen reader testing",
      "inclusive design",
      "ARIA labels",
      "keyboard navigation",
      "color contrast",
      "Claude Code",
      "a11y"
    ],
    "actual_capabilities": [
      "Conduct WCAG 2.1/2.2 compliance audits at levels A, AA, and AAA",
      "Analyze screen reader compatibility and semantic HTML structure",
      "Validate keyboard navigation and focus management",
      "Evaluate color contrast ratios against WCAG requirements",
      "Review alternative text and media accessibility",
      "Check form labels and error handling accessibility"
    ],
    "limitations": [
      "Cannot actually test live websites - provides guidance for manual and automated testing",
      "Cannot run screen reader software or verify actual screen reader output",
      "Cannot access external URLs or analyze deployed websites directly"
    ],
    "use_cases": [
      {
        "target_user": "Frontend Developers",
        "title": "Build Accessible Components",
        "description": "Learn to implement accessible HTML, ARIA attributes, and keyboard interactions in web components."
      },
      {
        "target_user": "QA Testers",
        "title": "Conduct Accessibility Audits",
        "description": "Perform systematic accessibility testing including keyboard-only navigation and screen reader validation."
      },
      {
        "target_user": "Product Designers",
        "title": "Design Inclusive Interfaces",
        "description": "Apply inclusive design principles and ensure color contrast meets WCAG standards."
      }
    ],
    "prompt_templates": [
      {
        "title": "Basic WCAG Audit",
        "scenario": "Quick accessibility check",
        "prompt": "Check this webpage for WCAG Level A compliance issues. Identify missing alt text, keyboard accessibility problems, and missing form labels."
      },
      {
        "title": "Color Contrast Analysis",
        "scenario": "Verify color requirements",
        "prompt": "Analyze the color contrast ratios on this page. Flag any text that fails WCAG AA or AAA requirements and suggest better color combinations."
      },
      {
        "title": "Screen Reader Review",
        "scenario": "Test screen reader compatibility",
        "prompt": "Review this HTML for screen reader compatibility. Check semantic structure, ARIA labels, heading hierarchy, and landmark regions."
      },
      {
        "title": "Complete Accessibility Audit",
        "scenario": "Full compliance assessment",
        "prompt": "Perform a comprehensive WCAG 2.2 AA compliance audit. Analyze color contrast, keyboard navigation, screen reader support, form accessibility, and multimedia alternatives. Provide specific code fixes."
      }
    ],
    "output_examples": [
      {
        "input": "Audit this login form for accessibility issues",
        "output": [
          "• Critical: Missing label for email input - add <label for='email'> or aria-label",
          "• Critical: Password field missing autocomplete attribute for browser autofill",
          "• Warning: Error messages not announced to screen readers - add aria-live region",
          "• Warning: Focus indicator not visible - ensure outline is not removed",
          "• Suggestion: Add landmark role='form' for navigation regions"
        ]
      },
      {
        "input": "Check color contrast on my landing page",
        "output": [
          "• Fail: Hero text at #777777 on white background = 3.2:1 ratio (needs 4.5:1)",
          "• Fail: CTA button text at #999999 on blue = 2.8:1 ratio (needs 4.5:1)",
          "• Pass: Body text at #333333 on white = 10.2:1 ratio (meets AAA)",
          "• Fix: Darken hero text to #595959 for 4.5:1 contrast ratio"
        ]
      }
    ],
    "best_practices": [
      "Start with semantic HTML before adding ARIA attributes",
      "Test keyboard navigation using only Tab, Enter, and Arrow keys",
      "Verify all interactive elements have visible focus indicators",
      "Include descriptive alt text for all meaningful images"
    ],
    "anti_patterns": [
      "Fixing individual elements without considering overall page structure",
      "Overusing ARIA when native HTML elements provide the behavior",
      "Treating accessibility as a final checklist item rather than a design principle",
      "Using color alone to convey information"
    ],
    "faq": [
      {
        "question": "Which AI platforms is this skill compatible with?",
        "answer": "This skill works with Claude, OpenAI Codex, and Claude Code. It provides accessibility expertise to any AI assistant."
      },
      {
        "question": "What WCAG levels does this skill cover?",
        "answer": "The skill covers WCAG 2.1 and 2.2 standards at all three conformance levels: A (minimum), AA (recommended), and AAA (enhanced)."
      },
      {
        "question": "Can this skill test live websites directly?",
        "answer": "No, this skill provides expert guidance and prompts for conducting accessibility audits. Actual testing requires browser tools or manual review."
      },
      {
        "question": "Does this skill store or transmit any data?",
        "answer": "No, this is a prompt-based skill with no code execution. No data is collected, stored, or transmitted."
      },
      {
        "question": "How does this compare to automated accessibility tools?",
        "answer": "Automated tools catch about 30 percent of accessibility issues. This skill helps identify contextual and complex issues that require human judgment."
      },
      {
        "question": "What should I do after an accessibility audit?",
        "answer": "Prioritize fixes by severity, start with Level A issues, test changes with keyboard and screen readers, and document remediation steps."
      }
    ]
  },
  "file_structure": [
    {
      "name": "SKILL.md",
      "type": "file",
      "path": "SKILL.md",
      "lines": 147
    }
  ]
}