A Page That Passes the Audit

Goal

You write a page that actually passes an accessibility check. There is no browser, but the structure of markup comes out true or false even without a browser.

What to build

It is a single file, /root/work/html/index.html. No CSS or JavaScript is needed — what this lab looks at is which tags you chose.

The checker

It includes a checker that looks at the same rules as the preceding seven steps. Run it yourself at any time.

cd /root/work/html
python3 /opt/lab/checks/html-lab/audit.py index.html

For each finding, it tells you what on which line is a problem and why.

Steps

Skeleton · lang · viewport
Landmarks (only one main)
One h1 · don't skip levels
3 images · alt="" for decorative ones
3 form fields · connect labels · type/autocomplete
2 links (text that states the purpose) · actions use button
A table (caption/thead/scope)
Check it yourself → 08-audit.txt
Wrap-up → 09-notes.md

Notes

The image files don't need to actually exist. It looks only at the markup.

An automated check catches only 30–40% of the problems. The rest mostly come to light if you put the mouse away and go all the way through with Tab alone.

Skeleton and lang

Create /root/work/html/index.html. It must have <!doctype html>, <html lang="ko">, <title>, <meta charset>, and <meta name="viewport">.

Run mkdir -p /root/work/html. Without lang, a screen reader reads Korean with English pronunciation rules — of all the things you get by fixing one character, it has the biggest effect. Without a viewport, mobile renders at desktop width.

Draw the map with landmarks

Include header, nav, main, and footer. There must be only one main on the page.

<div class="main"> tells a machine nothing. Screen reader users read by jumping between landmarks, and "skip to content" works only if a main exists.

Headings are a table of contents

Put only one h1, and use two or more h2 under it. You must not skip levels (no h4 after h2).

A heading is not a font size but the table of contents of the document. If you want to change the size, change it with CSS — using an h3 because it looks nice is the most common accessibility problem.

Choose alt properly

Include three images — two that convey content (with meaningful alt) and one purely decorative (alt=""). Every img must have an alt attribute.

Omitting the attribute entirely is different from alt="". If you omit it, the screen reader reads the file name (IMG_20240103.jpg), and if you leave it empty, it quietly skips it. For decorative images, always specify an empty alt explicitly. The files don't need to actually exist — it looks only at the markup.

A field without a label has no name

Build a form with three input fields. Each must have a label (connected with for/id), and the email field must have type="email" and autocomplete. Submit with a button.

A placeholder is not a label — it disappears when you type, so you can no longer tell what the field was for. If you connect a label, clicking the text also focuses the field (a big difference on mobile). If you set type properly, the mobile keyboard changes.

Links go, buttons act

Include two links that go to real addresses. The link text must state its purpose on its own — "here," "read more," and "click" are not allowed. And for places that perform an action, use a button instead of a href="#".

Screen reader users pull out just the links and view them as a list. A list with twenty "here" entries is useless. Don't use div onclick either — it can't be reached with Tab and isn't pressed with Enter.

A table has header cells

Include a table that has caption, thead, and th scope. Use scope="col" for column headers and scope="row" for row headers.

Only with scope does a screen reader read it like "January, sales, 1200." Without it, it reads only the numbers one after another. You must not use a table for layout — that is a job for CSS Grid.

Check it yourself

Run /opt/lab/checks/html-lab/audit.py yourself and save the result as 08-audit.txt. There must be 0 findings.

python3 /opt/lab/checks/html-lab/audit.py index.html | tee 08-audit.txt. The rules this checker looks at are the same as the preceding seven steps. Also remember that an automated check catches only 30–40% of the problems — the rest come to light if you spend 5 minutes using it with the keyboard alone.

What was free

In 09-notes.md, write at least three lines: two things a button built with div loses, the difference between alt="" and a missing alt attribute, and how you check for what automated checks can't catch.

The text must contain 키보드, alt, and 랜드마크 (the Korean words for "keyboard" and "landmark"). The core is one thing — accessibility is not a feature you add later; most of it is decided at the moment you pick a tag.