# Review React Accessibility Fundamentals

Interactive React interfaces often miss keyboard, labeling, and focus requirements. This skill guides Claude, Codex, and Claude Code through practical WCAG checks for JSX, forms, navigation, and dialogs.

## Install

```bash
npx skillstore add danielpodolsky/accessibility-fundamentals
```

## Metadata

- Status: approved
- Slug: danielpodolsky-accessibility-fundamentals
- Skillstore revision: r1
- Version status: missing
- Tree hash: e0e0707eb6f1aea326163df67a0c02e4b2a3205495b2520f2ca04dba6b6f2462
- Author: DanielPodolsky
- GitHub username: DanielPodolsky
- License: MIT
- Repository: https://github.com/DanielPodolsky/mentor-spec/tree/main/.claude/skills/fundamentals/accessibility
- Ref: 34f316ba14ef36c7a620fc09f2676d2429997a77
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/danielpodolsky-accessibility-fundamentals
- Manifest: https://skillstore.pages.dev/api/skills/danielpodolsky-accessibility-fundamentals/manifest

## Capabilities

- Checks interactive JSX for semantic buttons, links, headings, and form controls.
- Flags missing labels, weak link text, icon-only buttons, and inaccessible placeholders.
- Reviews keyboard access, visible focus states, modal escape paths, and focus trapping needs.
- Explains practical ARIA patterns such as aria-label, aria-describedby, aria-live, and aria-expanded.
- Suggests manual checks for keyboard navigation, zoom behavior, screen readers, and automated axe testing.

## Use Cases

- Review a React form before merge: Check labels, error messages, invalid states, and keyboard behavior before a pull request is approved.
- Evaluate a design system component: Assess buttons, icon controls, modals, menus, and navigation patterns for reusable accessibility issues.
- Prepare interview-ready accessibility notes: Turn implementation work into clear examples about semantic HTML, focus management, and inclusive design decisions.

## Prompt Templates

### Beginner JSX Check

```
Review this JSX for basic accessibility. Focus on semantic elements, labels, alt text, keyboard access, and visible focus states.
```

### Form Accessibility Review

```
Audit this form for accessibility. Check label associations, error message linking, aria-invalid use, placeholder dependence, and keyboard completion.
```

### Interactive Component Audit

```
Review this interactive component for keyboard behavior, focus management, escape paths, accessible names, and appropriate ARIA state.
```

### Advanced Release Gate

```
Perform a release-ready accessibility review. Prioritize WCAG impact, user risk, manual test coverage, automated test gaps, and concrete remediation steps.
```

## Limitations

- It does not run automated accessibility tests by itself.
- It is not a full WCAG certification or legal compliance audit.
- It focuses on React and JSX patterns more than native mobile or desktop interfaces.
- Screen reader behavior, contrast ratios, and complex focus flows still require human verification.

## Best Practices

- Start with semantic HTML before adding ARIA attributes.
- Test every interactive flow with a keyboard before approving changes.
- Pair automated axe checks with manual screen reader, zoom, and focus review.

## Anti Patterns

- Using div or span elements as buttons without native keyboard behavior.
- Using placeholders as the only label for form fields.
- Removing focus outlines without a visible replacement.

## Security Audit

- Audited at: 2026-07-06T10:33:09.285\+00:00
- Summary: All external command findings are false positives caused by Markdown inline code and fenced JSX, CSS, testing, and MCP examples in SKILL.md. The system reconnaissance finding is also a false positive for a CSS focus outline declaration. No prompt injection, credential handling, exfiltration intent, or malicious behavior was found.

## Stats

- Views: 203
- Downloads: 9
- Favorites: 0
- Popularity score: 0