Build With AI Academy
Use this worksheet before publishing an AI-built page. It focuses on practical checks a nontechnical reviewer can do: keyboard navigation, color contrast, headings, labels, image alt text, mobile readability, form errors, and screen-reader basics.
What to check before publishing
Press Tab through the page and make sure every important control can be reached.
Check text, buttons, cards, badges, and links against their backgrounds.
Make sure the page has a logical structure and does not repeat itself near the top.
Every form field, checkbox, dropdown, and search input should have a clear label.
Meaningful images should have text that explains what they communicate.
Text, buttons, tables, and cards should work on a phone-width screen.
Errors should explain what went wrong and how to fix it.
Important content should be real text, not only images, icons, color, or hover effects.
Checklist categories and how to test them
Page structure
Scan the headings from top to bottom. The page should have a clear order and should not skip around randomly.
Text readability
Read the page at normal size and at 200% zoom. Text should remain readable, spaced, and not clipped.
Color and contrast
Look at text, buttons, badges, forms, and cards. Important text should be easy to read against its background.
Keyboard navigation
Press Tab through the page from the browser address bar. You should be able to reach links, buttons, and form controls in a sensible order.
Buttons and links
Read button and link text out of context. A visitor should know what will happen before they click.
Forms
Try every form field. Labels, instructions, errors, and success messages should be visible and understandable.
Images and media
Check every meaningful image, icon, video, and embedded media block. Important visual information needs a text equivalent.
Mobile accessibility
Open the page on a phone-width screen. The page should be readable and usable without pinching or side scrolling.
Error states
Try to break the page gently. Empty fields, bad inputs, missing data, and failed actions should produce helpful messages.
Final publish checks
Before publishing, run the page like a visitor: read, tab, click, submit, resize, and review the final result.
Interactive accessibility QA worksheet
For each item, choose Pass, Needs fix, or Not applicable. The progress summary updates as you work through the page.
The main content has one clear visible topic heading.
How to test: Look for the first large heading in the content area and make sure it matches the page topic.
Headings are in a logical order.
How to test: Check that sections move from broad to specific instead of jumping between unrelated ideas.
The page can be understood without relying only on layout or color.
How to test: Read the page as plain text and confirm the meaning still makes sense.
Repeated title blocks are removed or visually hidden.
How to test: Look for duplicate page titles near the top and keep only the useful content title.
Body text is large enough to read comfortably.
How to test: Zoom the browser to 200% and confirm paragraphs still read cleanly.
Long lines are not exhausting to read.
How to test: Check that paragraphs do not stretch across the whole screen on desktop.
Text does not overlap or get cut off.
How to test: Resize the browser and look for clipped headings, buttons, or cards.
Important instructions are written plainly.
How to test: Replace vague wording with direct instructions a beginner can follow.
Main text has strong contrast against the page background.
How to test: Check paragraphs, headings, and captions in both desktop and mobile widths.
CTA button text is readable.
How to test: Look at every button and make sure the label is not low-contrast or washed out.
Color is not the only way meaning is shown.
How to test: If something is only marked red/green, add text such as pass, warning, or error.
Links are visually distinguishable from surrounding text.
How to test: Check that links are colored, underlined, or otherwise clearly identifiable.
Every interactive control can be reached with the keyboard.
How to test: Press Tab repeatedly and confirm links, buttons, forms, and controls receive focus.
The focus outline is visible.
How to test: When an item is focused, you should be able to see where you are on the page.
Focus order follows the visual order.
How to test: Tab through the page and confirm focus does not jump unexpectedly.
No interaction requires hover only.
How to test: Confirm menus, cards, or tooltips are usable without a mouse hover.
Button labels describe the action.
How to test: Replace vague labels with action labels such as Download checklist or Copy prompt.
Links describe where they go.
How to test: Avoid link text that only says click here, learn more, or this page.
Buttons and links have enough spacing.
How to test: On mobile, make sure controls are not packed so tightly that taps are hard.
External or download actions are clear.
How to test: If a link opens a PDF, download, or external site, make that clear in the label.
Every input has a visible label.
How to test: Check text fields, email fields, search boxes, dropdowns, and checkboxes.
Required fields are clearly marked.
How to test: Submit the form empty and make sure required fields are obvious.
Error messages explain how to fix the issue.
How to test: Trigger an error and check that the message is specific, not just invalid.
Success messages confirm what happened.
How to test: Submit a test form and confirm the user knows whether it worked.
Meaningful images have useful alt text.
How to test: Ask what the image communicates and write alt text for that meaning.
Decorative images are not announced as important content.
How to test: If an image is purely decorative, make sure it does not add noise.
Text is not trapped inside images.
How to test: If important text appears in an image, add the same information as real page text.
Video or audio content has a transcript or summary.
How to test: For key media, provide text that explains the important points.
The page works at mobile width.
How to test: Use a narrow browser window or phone and check the full page top to bottom.
Large headings fit on small screens.
How to test: Look for giant headings that wrap badly or cover other content.
Tap targets are large enough.
How to test: Buttons, links, and checkbox labels should be easy to tap.
No horizontal scrolling is required.
How to test: At mobile width, the page should not force sideways scrolling for normal content.
Empty states explain what to do next.
How to test: If a list, search, or result area is empty, it should tell the user what to try.
Failed actions do not leave the user stuck.
How to test: If copy, submit, download, or generation fails, there should be a next step.
Error messages are easy to notice.
How to test: Errors should appear near the problem and not rely only on color.
Recovery steps are clear.
How to test: Tell the user whether to retry, edit an input, contact support, or refresh.
All links and buttons work.
How to test: Click every important CTA and internal link.
The page is usable at 200% zoom.
How to test: Zoom to 200% and check that text, cards, and controls still work.
The page has no obvious console or visual errors.
How to test: Look for broken scripts, visible raw code, or layout glitches.
A human reviewed sensitive claims and final copy.
How to test: Check legal, medical, financial, privacy, pricing, and accessibility claims manually.
Copy-ready Codex prompt
Use this when you want Codex to review a page and explain accessibility issues in plain English.
Review this page for accessibility.
Check:
- page structure and heading order
- text readability
- color contrast
- keyboard navigation
- button and link labels
- form labels, errors, and success states
- image alt text and media accessibility
- mobile layout
- error states
- final publish readiness
Work like a careful QA partner:
1. Inspect the page first before suggesting changes.
2. Explain issues in plain English.
3. Group findings by severity: Must fix before publishing, Should fix soon, Nice to improve.
4. For each issue, explain why it matters and suggest the smallest safe fix.
5. Tell me what I should manually review before publishing.
6. Do not expose passwords, API keys, private customer data, or secrets.Common AI-built page mistakes
- Low contrast CTA buttons: the button looks stylish, but the label is hard to read.
- Giant headings on mobile: hero text wraps badly or pushes the useful content too far down.
- Unlabeled form fields: placeholders are used instead of real labels.
- Links that only say click here: the destination is unclear out of context.
- Missing alt text: important images communicate information that screen-reader users cannot access.
- Hover-only interactions: cards or menus reveal important controls only when a mouse hovers.
- Text trapped in images: key copy is inside a graphic instead of real HTML text.
Severity levels
Must fix before publishing
Blocks access, prevents completion, hides important information, creates privacy risk, or makes the page unusable for keyboard or mobile users.
Should fix soon
Does not fully block use, but creates friction, confusion, or avoidable accessibility issues.
Nice to improve
Improves clarity, comfort, polish, or long-term maintainability.
Not applicable
The check does not apply to this page, such as form checks on a page with no forms.
Sample QA report
A finished review should be specific enough that someone can fix the problem without guessing.
| Issue | Why it matters | Suggested fix | Priority |
|---|---|---|---|
| CTA button text is low contrast. | Visitors may not be able to read the main action. | Use a darker button background or white text with sufficient contrast. | Must fix before publishing |
| Search field has no visible label. | Some users may not know what the input is for. | Add a visible label above the search field. | Must fix before publishing |
| Several links say learn more. | Links are unclear when read out of context. | Change labels to describe the destination, such as Open calculator guide. | Should fix soon |
| Hero heading is too large on mobile. | The page becomes hard to scan on small screens. | Reduce mobile heading size and check line wrapping. | Should fix soon |
Accessibility QA Report
Page reviewed:
Date:
Reviewer:
Must fix before publishing:
1. Issue:
Why it matters:
Suggested fix:
Priority:
Should fix soon:
1. Issue:
Why it matters:
Suggested fix:
Priority:
Nice to improve:
1. Issue:
Why it matters:
Suggested fix:
Priority:
Manual review notes:
- Keyboard navigation:
- Color contrast:
- Forms:
- Mobile:
- Sensitive claims or private data:
Final recommendation:
Publish / publish after fixes / do not publish yetRelated Academy links
QA an AI-built website
Use the broader QA guide.
Open guideLanding page guide
Build and review offer pages.
Open guideCalculator guide
Check interactive calculator projects.
Open guideCodex Prompt Builder
Create better QA prompts.
Open toolBeginner safety rules
Review safe AI-building habits.
Open guideAccessibility QA is not a one-time polish pass. Run it before publishing and again after major content, style, form, or layout changes.
Want your AI product explained to a large AI-native audience?
Kingy AI helps AI companies turn complex products into clear, useful YouTube videos that drive awareness, product understanding, demos, clicks, and search visibility.
