• Observe — What actually happened? Describe behavior before adopting a tool’s explanation.
• Claim — What specific accessibility problem do you think that behavior indicates?
• Evidence — What supports the conclusion? Use WCAG / W3C, official institutional or legal guidance where relevant, direct measurement, or reproducible browser behavior.
• Test — What could establish the claim? Choose keyboard, screen reader, accessibility tree, WAVE, Lighthouse, contrast measurement, zoom/reflow, or direct task completion to fit the question.
• Fix — What change addresses the actual problem?
• Retest — Repeat the relevant test. Was the problem corrected? Does the task still work? Did the change introduce another problem?

Use Microsoft Copilot, ChatGPT, or another comparable generative AI assistant you already use. A free option is sufficient. Use only the fictional Studio Plan sample below; do not upload personal, sensitive, or university-restricted data.

Open the working sample and try saving a plan with the pointer and keyboard. Then copy all the supplied HTML, CSS, and JavaScript into your assistant with the exact initial prompt below. The code includes the behavior; no screenshot is needed. Different responses are expected.

Use this initial prompt exactly:

Review this interface for accessibility issues. For each issue you identify, explain the problem, identify the relevant WCAG success criterion and conformance level where applicable, and recommend a correction.

Append the complete code below to the prompt. The illustration is embedded in the HTML, so the downloaded sample also works offline.

Download Studio Plan HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Studio Plan — Course Sample</title>
    <style>
        body { margin: 0; background: #f8fafc; color: #0f172a; font: 1rem/1.6 system-ui, sans-serif; }
        main { max-width: 42rem; margin: auto; padding: 2rem 1.25rem; }
        .panel { padding: 1.5rem; background: white; border: 1px solid #cbd5e1; border-radius: 1rem; }
        .heading { font-size: 1.5rem; font-weight: 700; }
        img { display: block; width: 100%; height: auto; }
        label { display: block; font-weight: 600; }
        select { max-width: 100%; padding: .6rem; color: #0f172a; background: white; border: 1px solid #64748b; font: inherit; }
        .save { display: inline-block; margin-top: 1rem; padding: .6rem 1rem; background: #0f172a; color: white; border: 2px solid #0f172a; border-radius: .4rem; cursor: pointer; font: inherit; }
        :focus-visible { outline: 3px solid #0369a1; outline-offset: 4px; }
    </style>
</head>
<body>
<main>
    <p>Campus Media Studio · Fictional course sample</p>
    <h1>Plan your studio visit</h1>
    <p>Choose a session. Use the room layout to find the entrance, then save your plan.</p>
    <div class="panel">
        <p class="heading">Choose your session</p>
        <label for="session">Session</label>
        <select id="session">
            <option>Tuesday, 10:00–11:00 AM</option>
            <option>Thursday, 2:00–3:00 PM</option>
        </select>
        <h2>Room layout</h2>
        <img width="600" height="250" alt="Studio diagram" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='250' viewBox='0 0 600 250'%3E%3Crect width='600' height='250' fill='%23e2e8f0'/%3E%3Crect x='30' y='30' width='400' height='190' fill='white' stroke='%230f172a' stroke-width='3'/%3E%3Ctext x='60' y='75' font-size='24' font-family='sans-serif' fill='%230f172a'%3ERecording studio%3C/text%3E%3Ctext x='60' y='135' font-size='22' font-family='sans-serif' fill='%230f172a'%3EEnter through the east door%3C/text%3E%3Cpath d='M350 170h130m-20-15 20 15-20 15' fill='none' stroke='%230f172a' stroke-width='5'/%3E%3Ctext x='450' y='75' font-size='24' font-family='sans-serif' fill='%230f172a'%3EEast door%3C/text%3E%3C/svg%3E">
        <div class="save" role="button" tabindex="0" onclick="savePlan()">Save</div>
        <p id="save-message"></p>
    </div>
    <p>This sample does not send or store data. Save creates an on-page confirmation.</p>
</main>
<script>
    function savePlan() {
        document.getElementById('save-message').textContent =
            'Plan saved: ' + document.getElementById('session').value;
    }
</script>
</body>
</html>

For at least three AI claims, use Observe → Claim → Evidence → Test → Fix → Retest. Keep this investigation in your learning notes; it is not another formal assignment.

Reproduce or inspect the claimed behavior. Open the cited WCAG source and check the criterion number, scope, and A/AA/AAA level. Decide whether it supports the claim. Evaluate the correction and retest where applicable.

If the assistant gives fewer than three claims, ask it to assess heading semantics, keyboard activation, image purpose, and save feedback. Keep the original response and this follow-up. Do not manufacture a failure to reach three.

• Supported — the observation and source support the conclusion.
• Partially supported — something useful was noticed, but the claim overstates, misclassifies, or incompletely explains it.
• Unsupported — the evidence does not establish the claim.

An assistant suggests adding role="button" and tabindex="0" to a clickable div. Before revealing the answer, inspect the snippet below. What do those attributes establish? What would you still test?

<div role="button" tabindex="0" onclick="savePlan()">
    Save
</div>

<button type="button" onclick="savePlan()">Save</button>

Compare your evidence with these observations only after investigating the response. An assistant may find these issues, miss them, or cite an unrelated criterion. Judge its actual claims.

Download the Studio Plan HTML from the sample section. Save an original copy and a working copy. Open the working file in Chrome and edit it in any text editor. Everything is in one file; nothing is installed or submitted by the sample.

Choose one supported correction. Record the original behavior and test steps, edit the working copy, save it, reload the browser, and repeat the same test. Also complete the task with pointer and keyboard to check for regressions.

For a keyboard correction, compare Tab, Enter, and Space before and after. Inspect the accessible name and role in Chrome’s accessibility tree. WAVE or a higher Lighthouse score cannot replace the interaction test. For an announcement claim, verify actual announcement with a screen reader available to you; if you cannot, record that limit instead of claiming success.

Use your original WAVE and Lighthouse reports for context. To scan a local working copy with WAVE, use WAVE’s browser extension. Recheck the affected rule when relevant, then state precisely what the retest establishes.

You now have a workflow for both ordinary automation and generative AI. A plausible explanation starts an investigation; evidence and repeatable tests support the conclusion.