# Improve Frontend Accessibility

Frontend teams can miss keyboard, semantic, and screen reader requirements. This skill guides AI agents to build accessible UI components.

## Install

```bash
npx skillstore add devanb/frontend-accessibility
```

## Metadata

- Status: approved
- Slug: devanb-frontend-accessibility
- Skillstore revision: r1
- Version status: missing
- Tree hash: c01a7679785ab27823f8fbbce06239cef1aa1cd046b03a7dab859d78b523fde4
- Author: DevanB
- GitHub username: DevanB
- License: MIT
- Repository: https://github.com/DevanB/lucidlog/tree/master/.claude/skills/frontend-accessibility
- Ref: 0519034dad657fb1f7706e0550e962beeda73fdf
- 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, filesystem
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/devanb-frontend-accessibility
- Manifest: https://skillstore.pages.dev/api/skills/devanb-frontend-accessibility/manifest

## Capabilities

- Guides semantic HTML choices for landmarks, headings, buttons, links, articles, and sections.
- Checks forms for associated labels, accessible names, and clear input relationships.
- Reviews keyboard navigation, focus order, visible focus states, and modal focus management.
- Prompts WCAG contrast checks for text, interface controls, and important visual states.
- Supports ARIA usage for complex patterns where native HTML is not sufficient.

## Use Cases

- Review React Components: Find accessibility gaps in component markup, labels, focus states, and ARIA usage before release.
- Build Accessible Forms: Create forms with clear labels, validation messaging, keyboard support, and screen reader friendly structure.
- Audit Interactive UI: Evaluate dialogs, menus, buttons, and dynamic content for focus control and keyboard behavior.

## Prompt Templates

### Check A Component

```
Review this component for accessibility issues. Focus on semantic HTML, labels, keyboard support, contrast, and screen reader behavior.
```

### Improve A Form

```
Improve this form for accessibility. Ensure every input has a label, validation is announced, and keyboard users can complete the flow.
```

### Fix A Modal Flow

```
Audit this modal or dialog flow. Check focus trapping, initial focus, escape behavior, return focus, announcements, and keyboard interaction.
```

### Review A Feature End To End

```
Review this frontend workflow for WCAG accessibility risks. Provide prioritized fixes for semantics, focus, contrast, headings, ARIA, and assistive technology support.
```

## Limitations

- Does not run automated accessibility scanners by itself.
- Does not replace manual testing with screen readers and keyboard-only navigation.
- Does not guarantee legal compliance for every product or jurisdiction.
- Relies on available project code and design context for accurate recommendations.

## Best Practices

- Prefer native HTML controls before adding ARIA roles or custom interaction models.
- Test important flows with keyboard-only navigation and at least one screen reader.
- Verify contrast for text, controls, focus indicators, disabled states, and error states.

## Anti Patterns

- Do not use clickable div elements when a button or link is the correct control.
- Do not hide focus indicators or depend only on pointer interactions.
- Do not add ARIA attributes without matching behavior and accessible names.

## Security Audit

- Audited at: 2026-07-09T12:43:42.136\+00:00
- Summary: The inline-code backticks on line 12 are a false positive because they only mark file extensions. The relative path on line 29 is confirmed because it points outside the skill directory. No prompt injection or data exfiltration intent was found.

## Stats

- Views: 155
- Downloads: 8
- Favorites: 0
- Popularity score: 0