# Improve Frontend Accessibility

Frontend teams often miss keyboard, semantic, and screen reader requirements during routine UI work. This skill guides Claude, Codex, and Claude Code to apply accessibility checks while creating or editing interfaces.

## Install

```bash
npx skillstore add eis-its/frontend-accessibility
```

## Metadata

- Status: approved
- Slug: eis-its-frontend-accessibility
- Skillstore revision: r1
- Version status: missing
- Tree hash: d30efaac1e82821801a8d34a2031048c5585d9470a5622a3dee0ec849980772a
- Author: EIS-ITS
- GitHub username: EIS-ITS
- License: MIT
- Repository: https://github.com/EIS-ITS/vss-cli/tree/main/.claude/skills/frontend-accessibility
- Ref: 26421118b848d9f1efc0aa169d8a7a9e7e0a877e
- 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: filesystem
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/eis-its-frontend-accessibility
- Manifest: https://skillstore.pages.dev/api/skills/eis-its-frontend-accessibility/manifest

## Capabilities

- Guides use of semantic HTML for page structure and controls.
- Applies ARIA guidance when native HTML is not enough.
- Checks keyboard navigation and focus management for interactive elements.
- Prompts for accessible labels, validation messages, and form relationships.
- Considers color contrast and non-color indicators for visual states.
- Supports accessibility review of templates, JSX, components, and page layouts.

## Use Cases

- Review Component Markup: Find missing labels, weak semantics, and keyboard barriers before a component is merged.
- Improve Design System Patterns: Apply consistent accessibility rules to forms, menus, dialogs, and reusable controls.
- Prepare Accessibility QA Notes: Create focused review notes for keyboard flow, focus order, headings, and screen reader support.

## Prompt Templates

### Check Basic Markup

```
Review this UI for accessibility basics. Focus on semantic HTML, labels, headings, alt text, and obvious keyboard issues.
```

### Fix a Form

```
Improve this form for accessibility. Check labels, descriptions, required fields, validation messages, focus behavior, and error announcement.
```

### Design Keyboard Interaction

```
Define the keyboard and focus behavior for this interactive component. Include expected tab order, focus return, ARIA use, and escape behavior.
```

### Plan a WCAG Remediation

```
Audit this feature for accessibility risks. Group issues by user impact, propose code-level fixes, and note what needs browser or screen reader testing.
```

## Limitations

- It provides implementation guidance, not formal WCAG certification.
- It does not run browser, screen reader, or automated accessibility tests by itself.
- It cannot confirm real assistive technology behavior without user testing.
- It focuses on frontend interface work, not legal compliance programs.

## Best Practices

- Prefer native HTML controls before adding ARIA.
- Test every interactive path with keyboard navigation.
- Pair automated checks with manual review and assistive technology testing.

## Anti Patterns

- Do not use div or span elements as controls without complete keyboard support.
- Do not hide focus indicators for visual styling.
- Do not rely only on color to communicate errors, status, or selection.

## Security Audit

- Audited at: 2026-07-09T14:11:23.021\+00:00
- Summary: The only static finding is a relative Markdown link that uses parent directory segments to reference an accessibility standards document. This is not executable filesystem access, and I found no prompt injection, network activity, or data exfiltration intent in SKILL.md.

## Stats

- Views: 214
- Downloads: 25
- Favorites: 0
- Popularity score: 0