Pro Skill Packs logo PRO SKILL PACKS

Guides / Developers

How do I check a web page for accessibility problems in its code?

A prompt that reads a page's HTML for the usual accessibility problems, shows the offending code and a fix, and lists what only a human can check. Copy it, paste your markup.

Most accessibility problems are visible in the code before anyone opens a screen reader. An image with no alt text. A form field with only a placeholder. A button that is really a div with a click handler. These are quick to find and quick to fix, and they are the ones that block real people.

An assistant can read markup and list them. What it cannot do is tell you the page is accessible, and the prompt below is written so it never says so. Think of it as a fast first pass, the kind a colleague does before a proper review.

What you need

  • The page's HTML. In your browser, use View source and copy it, or paste the component code you are working on. For a large page, paste the main part and say what you left out.
  • The standard you are aiming for. The prompt defaults to WCAG 2.2 level AA.
  • The key flows, such as checkout or sign-up, if you have any.

The prompt

Paste this into a new chat, fill in the two fields, then paste your code.

You do a fast code-level accessibility review. Report only what the markup shows. Never say a page "is accessible" or "passes WCAG".

Target: WCAG 2.2 AA (change if needed). Key flows: [e.g. checkout, sign-up, or "none"]
Code: [paste]

Check: images with no alt, meaningless alt, icon-only controls with no name; form fields with no label, placeholder as the only label, missing autocomplete; empty or vague links and buttons, duplicate ids; heading order, missing h1, missing lang or title, missing landmarks, tables without headers; keyboard problems (tabindex above 0, click handlers on div or span with no role, outline removed, no skip link); ARIA misuse (conflicting roles, aria-hidden on focusable items, missing aria-expanded); text and background contrast where the colour values are visible (compute the ratio, show the numbers, 4.5:1 for normal text and 3:1 for large text and UI, else say "not checked"); media with no captions, autoplay, carousels with no pause; user-scalable=no in the viewport tag.

Output: a first line "Found N high-impact, M medium and K low issues in the code I read." Then each issue with what is wrong, the WCAG criterion (only if you are sure), a short quote of the offending code, who it affects in one sentence, and a fixed snippet. Group repeats. Label best practices as "good practice", not failures. Then "Needs a human check" (alt quality, reading order, focus order, screen reader announcements, caption accuracy) with a one-line test for each, and "Not checked" (JavaScript-added content, other pages, PDFs, third-party widgets). Quote real code only. This is not a legal audit. No em dashes.

How to check the result

Open the code next to the report. Each issue should quote real markup. If a quote is not in your code, the assistant invented it, so discard that issue.

For contrast, the prompt only computes a ratio when the colour values are visible in the code, and shows the numbers. The W3C's contrast criterion asks for at least 4.5:1 for normal text and 3:1 for large text (success criterion 1.4.3), and 3:1 for user interface components and graphics (1.4.11). You can verify any ratio with a contrast checker. The criterion is explained here: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

Apply the fixes it gives you one at a time and read each snippet before you paste it. A fixed snippet can be correct for the markup it saw and wrong for the rest of your page.

Then do the section called "Needs a human check". It lists things like whether alt text is meaningful, whether the reading order makes sense and what a screen reader announces. Each comes with a one-line test. Do those tests. They are the part code reading cannot replace.

Limits

  • It only reads the code you paste. Content added by JavaScript, other pages, PDFs and third-party widgets are outside it, and the report says so.
  • It never says a page passes WCAG, and this is not a legal audit.
  • A short list of issues does not mean a clean page. It means a clean sample.
  • Real testing needs a keyboard, a screen reader and, ideally, people who use assistive technology.

Browse all skills in the catalog

Want this as a ready-made skill? Accessibility Quick Audit (Free) does it in your own assistant.