Does this replace testing with a real screen reader?

No, it's a strong first pass on code-level issues; test critical flows with an actual screen reader before shipping.

Can it check color contrast without seeing the design?

Yes, if you provide the hex color values in the code or CSS; otherwise ask it to flag where contrast needs manual checking.

Frontend accessibility audit prompt (WCAG)

Paste a component or HTML block and get WCAG accessibility issues flagged by severity, each with a concrete fix.

بواسطة ‪Ahmed Eid‬‏Claude0 نسخة

متى تستخدم هذا البرومبت

Before shipping a new UI component.
When preparing for an accessibility compliance review.
When a user reports difficulty using the site with a screen reader.

نص البرومبت

Review this {{language}} component/markup for accessibility issues (WCAG 2.2), focusing on {{focus}}. List each issue with its severity and a concrete fix.

{{CLIPBOARD}}

الكتلة {{CLIPBOARD}} تُستبدل تلقائياً بما نسخته قبل الضغط على «نسخ».

كيف تستخدمه

انسخ البرومبت بالزر أو املأ المتغيرات أولاً.
الصقه في ChatGPT أو Claude أو Gemini.
عدّل النتيجة أو أعد الطلب بتغيير المتغيرات.

مثال على النتيجة

Issue (High): Icon-only button has no accessible name.
Fix: add aria-label=\"Close dialog\" to the button element.

Issue (Medium): Color contrast of the muted text (#999 on #fff) is 2.8:1, below the 4.5:1 minimum for normal text.
Fix: darken to at least #767676.

نصائح للاستخدام

Include the actual rendered HTML, not just the JSX, since accessibility issues often live in attributes.
Ask it to check keyboard navigation and focus order specifically, not just markup semantics.
Pair this with a real screen reader test before considering a component fully accessible.

النماذج الموصى بها

Claude

أسئلة شائعة

Does this replace testing with a real screen reader?: No, it's a strong first pass on code-level issues; test critical flows with an actual screen reader before shipping.
Can it check color contrast without seeing the design?: Yes, if you provide the hex color values in the code or CSS; otherwise ask it to flag where contrast needs manual checking.

برومبتات ذات صلة

Generate a GraphQL Schema from a Description

Describe your data and operations in plain English and get a complete, documented GraphQL schema.

Design a GraphQL schema (types, queries, mutations) for: {{focus}}. Use {{language}} conventions and include field-level descriptions. {{CLIPBOARD}}

Generate Realistic Mock Data for Testing

Get realistic, varied mock data, including edge cases, matched to your schema, ready to seed a test database.

Generate {{focus}} realistic mock/test data records in {{language}} format for this schema or type, with varied and edge-case values. {{CLIPBOARD}}

Explain What This Legacy Code Actually Does

Paste unfamiliar or legacy code and get a plain-language walkthrough, with dead code and possible bugs flagged.

Walk through this {{language}} code line by line and explain what it does, in plain language. Flag anything that looks like dead code, a workaround, or a potential bug. {{CLIPBOARD}}

Generate a Dockerfile for Your App

Get a secure, optimized Dockerfile tailored to your language and framework, ready to build and run.

Write a production-ready Dockerfile for a {{language}} app using {{framework}}. Use multi-stage builds where useful, minimize image size, and run as a non-root user. Notes: {{focus}}. {{CLIPBOARD}}

المزيد في برمجة ←