Build the page in the order people meet it
WebForgers
A page can look right and read wrong. With the style sheet blocked, the booking action on one layout sat after a gallery, a map, and a footer, because the columns had been drawn first and the document had been filled in to match the picture. A person moving from the start of the page met the gallery before the thing the page was for.
The order
Write the document in the order a person should meet it.
For a booking page that order is the name of the place, one sentence on what a visitor can do, the booking action, the list of what can be booked, and then the practical details: hours, what to bring, how to find the door. A gallery can follow the list. It is not the way through the page.
The HTML living standard orders sequential focus so that a positive tabindex jumps ahead of the rest, and everything else follows the document. Leave tabindex unset. Put the booking action early in the file, and it is early in that order.
<header>
<p>Studio hours</p>
<h1>Book a session</h1>
<p>Two-hour sessions for people who have attended before.</p>
<a href="#book">Book a session</a>
</header>The heading names the action. The sentence says who it is for. The link points at a form that is already in the document, with labels and a submit button that can post on their own.
Paint
CSS can place that action in a band at the top while the details sit in a column. Read the unpainted document on purpose: styles off, and a narrow width where a grid becomes one column. If that order is a pile, the grid is a picture the document does not contain.
Script
The form posts with no script. A script may then add a layer: how many places remain, or a stay on the page after a successful post, with the form replaced by a confirmation. If the script never arrives, the post still happens, and the answer is an ordinary page.
That extra layer is its own agreement, the same kind of boundary described in Keep a component inside its boundary.
Read it with the paint off
Turn the style sheet off, and read from the top of the file. You should meet the name of the place, one sentence on what a visitor can do, and the booking action before a gallery, a map, or a footer. Then narrow the window until any grid is one column, and read again with the paint on. If the narrow page is a pile and the unpainted page is a different pile, the document and the picture have come apart.
Leave tabindex unset. A positive value jumps ahead of the rest of the document, which is a second, hidden order. The booking action is early because it is early in the file, not because a number hauled it forward.
What the script is allowed to add
The form posts on its own. A script may say how many places remain, or it may stay on the page after a successful post and replace the form with a confirmation. Both of those are additions. If the script never arrives, the post still happens and the answer is an ordinary page. A script that is the only way to reach the form has become the page. Put the form back in the document until the post works with the script blocked.
A second page, same rule
A software desk can make the same mistake as the booking page. The empty desk’s first action, “Add an item,” belongs at the start of the document. A tour that highlights corners, a chart, and a settings drawer can be painted around it later. With the paint off, the add action is still first. The desk piece uses that test for a coworker who was not at the setup: Software a coworker can run without a tour.
Write the order in the file, not in a comment
A comment that says “the button is visually on top” does not move the button. Whoever reads the file next trusts the comment, ships the gallery first, and finds the keyboard order in front of a visitor. The order is the sequence of elements. Read that sequence out loud. If you say the gallery before the booking action, move the elements, then read it again.
Read the file out loud
Open the HTML and read the text nodes in source order, skipping the style and the script. On the booking page the reading should meet the action before it meets the gallery, the map, or the strip of logos. If your voice hits a heading, that heading is part of the order too. A heading that says “The room” before any heading that says what can be booked has told the person the subject of the page is the room. Move the heading with the elements it labels. Do not leave the heading at the top because it looks like a title in the paint.
Do this with the style sheet blocked, once, before you trust a screenshot. The screenshot is the paint. The reading is the file. They are allowed to disagree only while you are still moving elements. They are not allowed to disagree in the version you hand on.
A second reader should be able to do the same reading and land on the same first action. If two people disagree, the file is ambiguous, usually because a visually hidden block still contains a heading or a link. Hidden text is still in the order. If it should not be met, take it out of the document. Do not leave it for the paint to cover.
The gallery is allowed to be beautiful later
The gallery can be the largest thing on the painted page. That is a paint decision. It becomes a file decision only if the images sit earlier than the booking action. Put the images after the action in the source, and place them with CSS wherever the composition needs them. A grid that visually wraps the gallery to the top is fine. A source order that matches that wrap is the bug.
Captions travel with their images. If you move the gallery, move the captions. A caption left above the booking action, while its image sits below, is a stray sentence the reading hits for no reason. The same goes for a “scroll for photos” link that points at nothing until the script runs. If the link is in the file, the target is in the file.
Focus starts where the reading starts
Sequential focus follows the source unless you build a second order on purpose. This page does not build a second order. The first control a person reaches by keyboard should be the booking action, or a control inside that action, not a skip-the-gallery link you added to apologize for the gallery being first. If you feel the need for that skip link, the gallery is still first. Move the gallery. The apology can go.
Do not put a positive tabindex on the booking control to haul it forward. The number will be wrong the day a new control is added above it, and the new control will be skipped. The file is the order. New controls join the file at the position a person should meet them.
A dialog that opens over the page is a different problem and a later one. Until you have a dialog, you do not have an excuse to trap focus. The booking page in this piece does not open a dialog to complete the booking. It posts. The post works with the script blocked.
What you write in the margin of the file
At the top of the file, three lines are enough, and they are not a comment pretending to be the order. They name the first action in words, they name what must come after it, and they name the date you last read the file aloud. “Button is visually on top” is not one of the three lines. The three lines are a check, not a layout.
When the paint changes and the file does not, leave the three lines alone. When the file changes, read it aloud again and change the date. A date that never moves is a check nobody is doing. The control plate and the layout plate can change the label of the action. When they do, the first line in this margin changes to the same words, in the same edit. Two names for one action is how the keyboard order and the visible button drift apart.
A heading that belongs to the action
If the booking action has a heading, the heading sits immediately before the action in the file, and the heading’s words are the action’s words. A heading left over from an old paint pass, “Welcome,” before a control that says “Book Thursday at 6,” is a second name. Move it or delete it in the same edit that fixed the control’s label. The reading should not meet a welcome and then have to recover the real subject three elements later.
The explanatory paragraph belongs under that heading, still before the gallery. A person who hears the heading and the paragraph has the offer. The gallery illustrates it. The gallery does not introduce it.