Frontend Accessibility

{
  "schema_version": "2.0",
  "meta": {
    "generated_at": "2026-01-17T03:07:42.348Z",
    "slug": "devanb-frontend-accessibility",
    "source_url": "https://github.com/DevanB/lucidlog/tree/master/.claude/skills/frontend-accessibility",
    "source_ref": "master",
    "model": "claude",
    "analysis_version": "3.0.0",
    "source_type": "community",
    "content_hash": "09beaaea482b737880efd6e765dbb78ad0e0c2f993d086850b0cedd956028385",
    "tree_hash": "b21e7d76defdfc4c8037545b5571186f30ae16a044e6edaef7f87d5963aebe4e"
  },
  "skill": {
    "name": "frontend-accessibility",
    "description": "Implement accessible user interfaces with semantic HTML, keyboard navigation, sufficient color contrast, screen reader support, ARIA attributes, and proper focus management. Use this skill when creating or editing React components (.tsx, .jsx files), when implementing forms with labels and inputs, when building interactive elements (buttons, modals, menus, dialogs), when implementing keyboard navigation, when choosing colors and ensuring contrast ratios, when adding ARIA attributes, when testing with screen readers, when implementing focus states and focus management, or when creating heading structures and page landmarks.",
    "summary": "Implement accessible user interfaces with semantic HTML, keyboard navigation, sufficient color contr...",
    "icon": "♿",
    "version": "1.0.0",
    "author": "DevanB",
    "license": "MIT",
    "category": "design",
    "tags": [
      "accessibility",
      "wcag",
      "react",
      "semantic-html",
      "aria"
    ],
    "supported_tools": [
      "claude",
      "codex",
      "claude-code"
    ],
    "risk_factors": [
      "network",
      "filesystem",
      "external_commands"
    ]
  },
  "security_audit": {
    "risk_level": "safe",
    "is_blocked": false,
    "safe_to_publish": true,
    "summary": "This skill contains only documentation and guidance instructions for implementing accessibility features. The static analyzer flagged 20 benign text patterns (URLs, hashes, documentation paths, license names) as security issues. All findings are false positives. No executable code, network operations, or file modifications exist.",
    "risk_factor_evidence": [
      {
        "factor": "network",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          }
        ]
      },
      {
        "factor": "filesystem",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          },
          {
            "file": "SKILL.md",
            "line_start": 29,
            "line_end": 29
          },
          {
            "file": "SKILL.md",
            "line_start": 29,
            "line_end": 29
          },
          {
            "file": "SKILL.md",
            "line_start": 29,
            "line_end": 29
          }
        ]
      },
      {
        "factor": "external_commands",
        "evidence": [
          {
            "file": "SKILL.md",
            "line_start": 12,
            "line_end": 12
          },
          {
            "file": "SKILL.md",
            "line_start": 12,
            "line_end": 12
          }
        ]
      }
    ],
    "critical_findings": [],
    "high_findings": [],
    "medium_findings": [],
    "low_findings": [],
    "dangerous_patterns": [],
    "files_scanned": 2,
    "total_lines": 208,
    "audit_model": "claude",
    "audited_at": "2026-01-17T03:07:42.348Z"
  },
  "content": {
    "user_title": "Build WCAG-compliant accessible React interfaces",
    "value_statement": "Building accessible web interfaces ensures everyone can use your applications, including users with disabilities. This skill enforces WCAG standards, proper ARIA attributes, keyboard navigation, and screen reader compatibility in your React components.",
    "seo_keywords": [
      "accessibility",
      "WCAG compliance",
      "React accessibility",
      "ARIA attributes",
      "keyboard navigation",
      "screen reader",
      "semantic HTML",
      "Claude Code",
      "Codex",
      "Claude"
    ],
    "actual_capabilities": [
      "Enforces WCAG 2.1 AA compliance standards in React components",
      "Adds proper ARIA attributes and semantic HTML elements",
      "Implements keyboard navigation and focus management",
      "Ensures 4.5:1 color contrast ratios and visible focus indicators",
      "Creates logical heading hierarchies and page landmarks"
    ],
    "limitations": [
      "Only works with React components (.tsx, .jsx files)",
      "Requires manual testing with actual screen readers",
      "Cannot automatically fix all accessibility issues"
    ],
    "use_cases": [
      {
        "target_user": "Frontend developers",
        "title": "Build accessible React components",
        "description": "Create buttons, forms, and interactive elements that work with screen readers and keyboard navigation"
      },
      {
        "target_user": "Design system teams",
        "title": "Maintain accessibility standards",
        "description": "Ensure all UI components meet WCAG guidelines with proper ARIA attributes and contrast ratios"
      },
      {
        "target_user": "Product teams",
        "title": "Comply with accessibility regulations",
        "description": "Meet ADA, Section 508, and WCAG requirements to avoid legal issues and serve all users"
      }
    ],
    "prompt_templates": [
      {
        "title": "Make form accessible",
        "scenario": "Adding labels and keyboard navigation",
        "prompt": "Make this contact form fully accessible with proper labels, ARIA attributes, and keyboard navigation"
      },
      {
        "title": "Add ARIA to modal",
        "scenario": "Implementing an accessible modal dialog",
        "prompt": "Add proper ARIA attributes, focus management, and keyboard controls to this modal component"
      },
      {
        "title": "Fix color contrast",
        "scenario": "Ensuring WCAG color compliance",
        "prompt": "Update these component colors to meet WCAG 2.1 AA contrast ratio requirements (4.5:1 minimum)"
      },
      {
        "title": "Build accessible navigation",
        "scenario": "Creating a navigation menu",
        "prompt": "Build an accessible navigation menu with proper ARIA landmarks, keyboard navigation, and screen reader support"
      }
    ],
    "output_examples": [
      {
        "input": "Create an accessible button component",
        "output": [
          "Semantic button element with proper type attribute",
          "Visible focus indicator with 3:1 contrast ratio",
          "Accessible name via text content or aria-label",
          "Keyboard activation with Enter and Space keys",
          "Disabled state properly communicated to assistive technology"
        ]
      },
      {
        "input": "Make this form keyboard accessible",
        "output": [
          "Labels associated with inputs via htmlFor and id",
          "Focus order follows visual layout",
          "Error messages linked via aria-describedby",
          "Tab index values managed appropriately",
          "Required fields announced via aria-required"
        ]
      }
    ],
    "best_practices": [
      "Always include proper labels for form inputs using htmlFor and id attributes",
      "Test components with keyboard-only navigation before shipping",
      "Use semantic HTML elements (nav, main, button) instead of divs with ARIA"
    ],
    "anti_patterns": [
      "Don't use divs with onClick handlers instead of proper button elements",
      "Avoid color-only indicators without text or icon alternatives",
      "Never remove focus outlines without providing custom focus indicators"
    ],
    "faq": [
      {
        "question": "Which screen readers should I test with?",
        "answer": "Test with NVDA (Windows), JAWS (Windows), VoiceOver (Mac/iOS), and TalkBack (Android) for comprehensive coverage"
      },
      {
        "question": "What WCAG level should I target?",
        "answer": "Aim for WCAG 2.1 Level AA compliance as the minimum standard for most applications"
      },
      {
        "question": "How do I check color contrast ratios?",
        "answer": "Use tools like WebAIM's contrast checker or browser extensions to verify 4.5:1 minimum contrast"
      },
      {
        "question": "Can this skill fix existing accessibility issues?",
        "answer": "It guides you to fix issues but cannot automatically refactor existing code - you'll need to implement the suggestions"
      },
      {
        "question": "Does this work with other frameworks?",
        "answer": "Currently optimized for React - principles apply elsewhere but examples are React-specific"
      },
      {
        "question": "How do I handle complex interactive widgets?",
        "answer": "Follow ARIA authoring practices patterns and test thoroughly with keyboard and screen readers"
      }
    ]
  },
  "file_structure": [
    {
      "name": "SKILL.md",
      "type": "file",
      "path": "SKILL.md",
      "lines": 30
    }
  ]
}