Lab 10 · Pre-Handoff Accessibility Gate

Run the full artifact-side accessibility review on a three-screen flow: deterministic contrast math, target sizes, focus order, heading hierarchy, and AI-drafted alt text you verify by hand. The spec contains seeded violations — and one deliberately compliant decoy, because inventing false positives fails the gate too.

Sam is a product designer at Ternwell, a fictional pharmacy-delivery app, and the checkout redesign ships to engineering on Friday. The org's new rule: no handoff without a designer-run accessibility gate, because the last WCAG findings that came back from an external audit cost a sprint to retrofit. AI helps at two specific points in this gate — drafting alt text and pre-scanning the spec — and is actively dangerous at a third: contrast, where models pattern-match plausible-looking ratios instead of computing them. This lab's spec has violations seeded across all five check families. It also contains one element that looks like a violation and is not. Catch everything real, and nothing fake.

You will need

A free contrast checker (any WCAG contrast-ratio tool — you need computed ratios, not eyeballs).
A chat AIfree ChatGPT, Claude, or Gemini — for alt-text drafting and the pre-scan.
A doc or spreadsheet for the findings table.
Timeabout 60 minutes.

The flow spec

Three screens of a checkout flow, specified in text. Treat every value as the source of truth.

TERNWELL CHECKOUT — annotated spec (mobile, 390pt wide)

SCREEN 1 — Cart
- H1 "Your cart" 24px #1B1F23 on #FFFFFF
- Item rows: name 16px #1B1F23; dosage note 13px #767676 on
  #FFFFFF
- Remove-item control: icon-only trash glyph, 20x20pt hit
  area, right-aligned per row
- "Checkout" primary button: 16px #FFFFFF on #0B6E4F, full
  width, 48pt tall
- Free-delivery progress note: 13px #9AA5B1 on #FFFFFF

SCREEN 2 — Delivery details
- H2 "Delivery" 20px #1B1F23
- Then jumps to H4 "Address" 15px #1B1F23 (H3 skipped —
  visual size looked better)
- Input labels 14px #4A5056 on #FFFFFF
- Required-field indicator: label text turns red #D64545
  (color change only, no asterisk or text)
- "Use saved address" toggle: 44x28pt
- Delivery-slot chips: 14px #0B6E4F text on #E6F4EF fill,
  radius 16, 36pt tall
- Focus order (as specced): name → address → city → postcode
  → phone → BACK TO city (map pin re-check) → slot chips →
  continue
- Continue button: 16px #FFFFFF on #0B6E4F, 48pt tall

SCREEN 3 — Confirm
- H2 "Confirm order" 20px #1B1F23
- Order summary text 15px #1B1F23
- Prescription-photo thumbnail, 64x64pt. Spec'd alt text:
  "Photo of your uploaded prescription from Dr. Mehta dated
  12 July for Amoxicillin 500mg, verified by our pharmacy
  team"
- Terms checkbox 24x24pt with label "I agree to the terms"
- "Place order" button: 16px #FFFFFF on #63A96B, 48pt tall
- Edit links in each summary row: 13px #0B6E4F on #FFFFFF,
  underlined

Steps

Set the bar in writing. One paragraph at the top of your findings doc: this gate checks WCAG 2.2 AA — contrast (1.4.3), non-text contrast where relevant (1.4.11), use of color (1.4.1), target size minimum (2.5.8), focus order (2.4.3), heading structure (1.3.1 / best practice), and image alternatives (1.1.1). Naming the criteria first keeps the review systematic instead of vibes-driven.
Run the AI pre-scan — then distrust it in one specific place. Paste the spec: "Audit this mobile flow spec against WCAG 2.2 AA. List suspected violations with the success criterion." Keep the output as a checklist of suspicions. Mark every contrast claim in it as unverified: models estimate ratios and are wrong constantly, in both directions. The pre-scan's real value is coverage — it rarely misses a category entirely.
Compute every contrast pair yourself. Every text/background pair in the spec goes through the contrast checker: the two body-text greys on white, the dosage note, the progress note, the input labels, the chip text on its fill, both green buttons' white labels, the red required-state text, the edit links. Log computed ratios to one decimal. Thresholds: 4.5:1 normal text, 3:1 large text (18pt+/14pt bold+).
Check target sizes. Against 24x24pt CSS minimum (WCAG 2.5.8 AA) and platform guidance (44pt iOS / 48dp Android for primary controls): the trash icon's hit area, the toggle, the chips, the checkbox, the edit links (small text links have an exemption nuance — note it), and the buttons. Log actual vs. required.
Audit structure and focus order. Heading sequence across the three screens (find the skip), and walk the specced focus order on Screen 2 finger-by-finger — does the tab sequence match the visual and logical order, or does it teleport?
Verify the alt text like a fact-checker. The prescription-thumbnail alt text is AI-drafted. Check it against what the artifact can actually know and should actually say: does the alt describe what is known to be in the image, or does it assert facts (doctor name, date, drug, verification status) that belong to — and may contradict — the record? Rewrite it to be honest and useful for a screen-reader user in this context, and note the general rule you applied.
Hunt the decoy. One element in this spec is commonly flagged and is actually compliant. Before finalizing, re-test your own findings: for each violation you logged, write the computed number or criterion text that convicts it. Anything you cannot convict with a number or a quoted criterion gets deleted. False positives burn the gate's credibility with engineering.
Write the findings table for handoff. Columns: ID | Screen | Element | Criterion | Evidence (computed ratio / measured size / quoted spec) | Severity | Required fix. Order by severity. Add a two-line cover note: what passes, what blocks handoff.

Warning

Never accept a contrast ratio from a language model — it will state "4.6:1" with total confidence for a pair that computes to 3.2:1; ratios come from a checker, alt text drafts come from AI, and the division of labor is not negotiable.

Verify your work

Every text/background pair logged with a computed ratio, not an estimated one.
All seeded violations caught across contrast, targets, focus order, headings, color-only signaling, and alt text.
The decoy correctly cleared, with the number that clears it.
The alt text rewritten with a stated rule for what alt text may assert.
A findings table where every row carries convicting evidence.

▸Answer key — seeded violations, the decoy, and expected numbersoptional deep dive — click to expand

Contrast violations (computed). Dosage note #767676 on #FFFFFF ≈ 4.5:1 — this is the decoy: it looks like the classic mid-grey failure but computes to approximately 4.54:1, which passes AA for normal text. Clearing it with the number is the false-positive test. The real contrast failures: free-delivery note #9AA5B1 on white ≈ 2.8:1 — fails hard at 13px; "Place order" white on #63A96B ≈ 2.9:1 — fails for 16px text, and this is the flow's most important button (note the other green #0B6E4F with white ≈ 6.2:1 passes — the spec quietly swapped greens on Screen 3); edit links #0B6E4F at 13px on white pass contrast (≈6.2:1) but see target size below. If your AI pre-scan "passed" the #63A96B button or "failed" #767676, you have your evidence for step 2's distrust.

Use of color. Required-field indication by label color change alone (#D64545, no asterisk/text/icon) fails SC 1.4.1 — and doubly fails color-blind users for whom red-vs-dark-grey is weak. Fix: add a text or symbol indicator plus programmatic required.

Target sizes. Trash icon 20x20pt fails SC 2.5.8's 24px minimum — and it is a destructive action, so platform guidance (44pt) is the right bar; the toggle at 44x28 and chips at 36pt tall meet 2.5.8 though chips sit below the 44pt platform comfort bar (note, not block); checkbox 24x24 passes 2.5.8 exactly — acceptable, though enlarging the label's hit area is the better fix; 13px edit links are small but inline-text links have a 2.5.8 exemption — flag as advisory, not violation, and you get credit for knowing the exemption.

Structure and focus. H2 → H4 skip on Screen 2 ("visual size looked better" is the classic cause — heading level is structure, size is style; fail under 1.3.1 best practice). Focus order teleports: … → postcode → phone → back to city → chips breaks SC 2.4.3's logical order; the map-pin re-check needs a different interaction design, not a focus loop.

Alt text. The drafted alt asserts doctor name, date, drug, dosage, and "verified by our pharmacy team" — claims the image element cannot know and that may contradict the actual upload (wrong photo, unverified state). AI-drafted alt text hallucinating specifics is exactly the failure mode you are gating. Honest rewrite in context: "Your uploaded prescription photo" — the record's details belong in adjacent text bound to real data, and verification status must come from the verification system, never hard-coded into alt. Rule to state: alt text describes what the image is, asserts nothing the artifact cannot guarantee.

Grading yourself. All real violations convicted with numbers, decoy cleared, alt text rule articulated: excellent — this gate would survive an external audit. Decoy flagged as a failure: your process trusts appearance over computation — the same flaw you were told to distrust in the AI. Missed the green-button swap: you checked one green and assumed the other; specs drift exactly like that in real files.

Key Takeaway:

The accessibility gate splits cleanly by tool — deterministic checkers for everything computable, AI only for drafts a human verifies, and a findings table where every row carries the number or criterion that convicts it. Evidence is what makes engineering fix things without argument.

© Anvi Innovate · BXUP — Be Exponentially Upskilled · BXUP is an independent learning platform, not affiliated with or endorsed by AWS, Microsoft, Google, NVIDIA, IBM, Salesforce, Databricks, Oracle or Anthropic. All trademarks belong to their respective owners. · bxup.in