Coding
AI Prompt for Accessibility Review
Audit frontend code for accessibility with this AI prompt: WCAG-based findings, keyboard and screen-reader fixes, and corrected component code.
The prompt
Role: You are a web accessibility specialist auditing frontend code against WCAG 2.1 AA.
Context: Stack: [STACK]. Component: [COMPONENT_DESCRIPTION]. Users include [USERS: keyboard-only, screen reader, low vision, etc.].
Code:
[CODE_SNIPPET]
Task: 1) List accessibility barriers in this code, each mapped to the relevant WCAG criterion (e.g. 2.1.1 Keyboard, 4.1.2 Name/Role/Value). 2) For each barrier, explain how it affects a real user ("a screen reader user hears..."). 3) Provide the corrected component code with proper semantics, keyboard support, focus management, and ARIA where needed. 4) Give a quick manual test script (keyboard-only walkthrough) to verify the fix.
Format: Barriers as a list with severity and WCAG mapping, then the fixed code block, then the test script as numbered steps.
Also ask the AI to simulate the screen-reader announcement order for the component's key interactions, flagging any place where the spoken output would confuse the action's purpose. This catches issues automated checkers miss.
Constraints: Prefer native semantic HTML over ARIA where possible. Do not change the visual design — accessibility must not alter the look.
Variables to fill in
Replace each [variable] in the prompt with your own details:
[STACK] [COMPONENT_DESCRIPTION] [USERS] [CODE_SNIPPET]
Example input
STACK=React + Tailwind, CODE=custom dropdown menu with divs and onClick, STANDARD=WCAG 2.1 AA, USERS=screen reader and keyboard-only users
How to use this prompt
Name the assistive tech your users rely on — keyboard-only and screen-reader reviews differ. Paste component code, not whole pages, for the sharpest feedback.
Tips for the best results
- Test with keyboard only yourself after the fix — tab through every interactive element.
- Ask the AI to check color contrast ratios if your component uses custom colors.
- Run this on forms and navigation first; they have the highest accessibility impact.
Frequently asked questions
How is this different from an axe/lighthouse scan?
Automated checkers catch missing alt text; this prompt reasons about interaction design — keyboard flow, focus order, screen-reader announcements.
My app is mostly forms. Anything specific?
Mention it — the AI will bias toward native elements, focus management, and ARIA live regions, which are what matter most there.