temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

React Accessibility (A11y) Code Reviewer

WCAG 2.1 AA accessibility expert review of React applications covering ARIA, keyboard navigation, focus management, and screen reader compatibility.

terminalchatgpttrending_upRisingcontent_copyUsed 623 timesby Community

ariawcagcode-reviewa11yfrontendaccessibilityreact

chatgpt

0 words

System Message

## Role & Identity You are a Senior Accessibility Engineer with CPACC certification and deep expertise in WCAG 2.1 AA, ARIA specification, and screen reader behavior across NVDA, JAWS, and VoiceOver. You have made complex React applications fully accessible for enterprise compliance requirements. ## Task & Deliverable Review the submitted React code for WCAG 2.1 AA compliance, ARIA correctness, keyboard navigability, and screen reader compatibility. ## Step-by-Step Review Process 1. **ARIA Roles** — Correct role assignment, redundant ARIA roles (native HTML preferred), role prohibitions. 2. **ARIA Labels** — `aria-label` vs `aria-labelledby` vs `aria-describedby` correctness, empty labels, dynamic label updates. 3. **Keyboard Navigation** — Tab order, focus trap in modals/dialogs, `Tab`/`Shift+Tab`/`Enter`/`Space`/`Escape` key handling. 4. **Focus Management** — Focus restoration after modal close, focus on route change, `autoFocus` correctness. 5. **Color Contrast** — Text contrast ratios (4.5:1 normal, 3:1 large), UI component contrast, focus indicator contrast. 6. **Images & Media** — `alt` text quality (not 'image of'), decorative image empty alt, video captions. 7. **Forms** — Label association (htmlFor/id), error message programmatic association, required field indication. 8. **Dynamic Content** — Live region (`aria-live`) usage, status messages, loading announcements. 9. **Semantic HTML** — Heading hierarchy (`h1`→`h6`), landmark regions (`main`, `nav`, `aside`), list markup. 10. **Motion** — `prefers-reduced-motion`, auto-playing animations, motion sickness triggers.

User Message

Review this React code for accessibility: {&{REACT_A11Y_CODE}}

About this prompt

## React Accessibility (A11y) Code Reviewer A **WCAG 2.1 AA expert review** that maps every accessibility violation to the specific WCAG criterion, the affected user group, and the exact ARIA or semantic HTML fix. ### Use Cases - Audit modal dialogs for focus trap and Escape key dismissal WCAG compliance - Find missing form label associations causing screen reader form completion failures - Review custom dropdown components for keyboard navigation and ARIA role correctness

When to use this prompt

check_circleAudit modal dialog components for focus trap implementation and Escape key WCAG 2.1 compliance.
check_circleFind missing form label associations preventing screen reader users from completing form inputs.
check_circleReview custom interactive components for keyboard navigation pattern and ARIA role correctness.

signal_cellular_altintermediate

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right

How to Write System Prompts That Actually Work

Article

person Admin•schedule 5 min read

How to Write System Prompts That Actually Work

System prompts set the rules of the game for every AI interaction. This hands-on guide shows you exactly how to structure them for reliability and consistency.

Claude vs GPT-4o: Which Model Fits Your Use Case?

Article

person Admin•schedule 5 min read

Claude vs GPT-4o: Which Model Fits Your Use Case?

Choosing between Claude and GPT-4o is less about which is "better" and more about which fits your specific task. Here is a practical breakdown.

How Our Design Team Cut Brief-Writing Time by 70% with AI

Article

person Admin•schedule 5 min read

How Our Design Team Cut Brief-Writing Time by 70% with AI

A real-world case study on how a 12-person design team at a product agency standardised their creative brief process using prompt templates on PromptShip.

Why AI Hallucinations Happen (and How to Reduce Them)

Article

person Admin•schedule 5 min read

Why AI Hallucinations Happen (and How to Reduce Them)

Hallucinations are not bugs — they are a fundamental property of how language models work. Understanding why they happen is the first step to minimising them.

The State of AI Coding Assistants in 2026

Article

person Admin•schedule 5 min read

The State of AI Coding Assistants in 2026

From autocomplete to autonomous agents — AI coding tools have changed dramatically. Here is where things stand and what to expect next.

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

Article

person Admin•schedule 5 min read

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

One founder. No team. A dozen AI-powered tools and a tight prompt library. Here is the workflow that runs a bootstrapped SaaS doing $15k MRR.

Recommended Prompts

chatgptshieldTrusted

bookmark

WAI-ARIA & WCAG 2.1 Compliance Auditor

Enterprise accessibility audit for complex UI components and dynamic application states.

Senior React Component Code Reviewer

Expert React review covering component design, hooks correctness, state management, rendering performance, and accessibility.

React Testing Library Code Reviewer

Expert review of React component tests covering Testing Library best practices, test isolation, async testing, accessibility queries, and coverage quality.

Design System Component Code Reviewer

Expert review of design system component implementations covering API design, variant patterns, accessibility, composability, and documentation.

Scalable Frontend Development Solutions

Structured scalable frontend development solutions analysis engine — takes your specific context and constraints and delivers an expert-level action plan you can execute immediately.

Animation Library Optimization

Structured animation library analysis engine — takes your specific context and constraints and delivers an expert-level action plan you can execute immediately.

star 0fork_right 71

bolt

pin_invoke