A product page, marked up properly
One page for one product, written the way a document is written rather than assembled out of divs. Every step adds a layer — structure, content, a form, navigation, metadata — and every step is checked against the page you actually produced, not against a string.
Builds on HTML
What you end up with
- A valid, standards-mode document with a language, an encoding and real landmarks.
- A product section with an image that reserves its space and a table a screen reader can read.
- An order form where every control has a label and the browser can validate it before you write a line of JavaScript.
- A skip link, breadcrumbs and a FAQ that works with JavaScript turned off.
- The metadata that decides what a search engine shows and what a shared link looks like.
-
You are writing the whole document here, doctype and all — the preview serves it exactly as you type it. The stylesheet in the second tab is already written; it is the next build’s job, not this one’s.
Not finished yet
-
Now the content. The two things people get wrong here are the image — no dimensions, and an alt that repeats the filename — and the table, which is where a screen reader either reads a specification or a wall of numbers.
Not finished yet
-
A form is where accessibility stops being theoretical: a control without a label is a control a screen-reader user cannot fill in, and a radio group without a fieldset is three unrelated buttons. The browser will also validate this one for you, for free.
Not finished yet
-
Nobody sees this part of the page and everybody sees its results: the search snippet, the shared card, and whether two URLs compete with each other. Then a last pass over the whole document for the four mistakes that survive every review.
Not finished yet
Last step — finish it and the build is yours.
When it is finished