A11yLab

Lesson 27 · Part 4 · Final challenge

Final challenge: fix an inaccessible page

Below is a small bookshop page with twelve real accessibility problems. Each one comes from an earlier lesson, starting with Understanding web accessibility. First you find them, then you fix them, then you take a test checklist with you for every page you build.

In one minute

In plain words

An accessibility audit is a careful check of a page, looking for anything that blocks people. Automatic tools catch only some problems. The rest you find by using the page the way your users do: by keyboard, zoomed in, and with a screen reader.

1. The broken bookshop

This page looks fine to a mouse user with good eyesight. Now imagine Ravi, who uses a screen reader, and Mei, who uses only a keyboard. Ravi cannot find the form's email box. Mei cannot add a book to her basket at all.

The practice page sits inside a frame, so it is a real separate page. Press Tab to move into it. The readouts below it update every time you fix something.

Practice page

Page language:
…
Page title (shown in the browser tab):
…

Headings list

Landmarks list

Try it yourself
  1. Without reading ahead, press Tab through the practice page. Try to add "The Salt Road" to the basket. Can you?

2. Part 1: find the problems

Work through the list. Test each point on the practice page. Tick it when you have found a real problem there. There is a problem behind every item.

Tick each problem you found

    You have found 0 of 12.

    Hints

    0 of 12 hints shown.
      Check
      1. Aim for at least eight of twelve before you open any hint. Most testers miss the image and status problems.

      3. Part 2: fix them one by one

      Each card names the problem, who it hurts, and the fix. Press "Show fix" to swap the practice page to the fixed version. Press it again to see the broken one.

      Fixed: 0 of 12.

      Go to the practice page
      The page still has 12 problems.
        Check
        1. Fix only "Add to basket" and "Status message". Now use the keyboard to add a book. What changed for Mei, and what changed for Ravi?

        4. Part 3: your 10-point manual test checklist

        Run these ten checks on every page you build. They take about fifteen minutes. Print this list, or tick it here.

        1. The browser tab shows a clear, unique title. The <html> element has the right lang.

        2. Put the mouse away. Tab reaches every link, button and field, in a sensible order. Enter and Space work. You never get stuck.

        3. At every step you can see where focus is. Nothing is hidden behind a sticky header.

        4. At 200%, all text grows and nothing is cut off. At 400% (like a narrow phone), you do not need to scroll sideways to read.

        5. Open the screen reader's list (NVDA: Insert+F7; VoiceOver on Mac: VO+U). One h1, no skipped levels, and header, nav, main and footer are present. The skip link works.

        6. Normal text is at least 4.5:1, large text 3:1, icons and field borders 3:1. Nothing is shown by colour alone.

        7. Every field has a visible label. Groups of choices have a <legend>. Errors are in words, next to the field, and linked to it.

        8. Informative images have alt that gives the same information. Decorative images have alt="".

        9. Each one makes sense alone, in a list. Actions use <button>; places use <a href>.

        10. With "reduce motion" turned on, animations stop. "Saved", "3 results" and errors are announced by a screen reader.

        Common mistakes

        You seeWhy it is a problemFix
        Only an automatic checker was runTools catch only some problems, often quoted as about a third. They cannot judge alt text or focus order.Add the manual checklist.
        Testing with the mouse onlyKeyboard and focus problems stay hidden.Test with Tab first.
        Fixing the look but not the codeA styled div still is not a button.Use the right element.
        Adding ARIA to cover every gapWrong ARIA is worse than none.Native HTML first, ARIA only for gaps.
        Testing once, at the endLate fixes cost more and get skipped.Run the checklist on every new page.

        Remember