How this site is built to be used, and where it still falls short

What we built in

Keyboard, all of it

Every link, every field, every filter on the catalog can be reached and operated with Tab, Shift Tab, Enter and the space bar. There is no control on this site that needs a mouse. The focus outline is a solid two pixel ring that we never turn off, and it sits on a background chosen so the ring stays visible on both the pale and the dark panels.

Heading order

One h1 per page, then h2, then h3, in that order and with nothing skipped. If you navigate by headings you get the page structure the way we wrote it, not a jumble. The trip pages all follow the same shape, so once you learn one you know the other ten.

Contrast read off the real ground

Text contrast was measured against the color actually painted behind it, not against white as a stand in. Body text sits at or above 7 to 1, and the smallest type on the site, the notes under each figure, was raised twice during the build because it measured 4.2 to 1 the first time.

Alternative text

Photographs carry a description of what a traveler would see: the ground, the water, the parking, the room. Where an image is only decoration it carries an empty alt so a screen reader skips it rather than reading a file name. No image on this site holds information that is not also written in the prose next to it.

The three marks

Each trip carries a mark showing how much of the week is open to your dog. The mark is a shape with a countable number of sides: three sides for part-of-it, four for almost-all-of-it, five for all-of-it. It is never a color, never a green light against a red one, and the words all-of-it, almost-all-of-it and part-of-it are printed next to every mark in text. Turn images off entirely and the answer is still there in words.

Arrival that moves and never fades

Blocks that come in as you scroll move a short distance and stop. They do not fade from transparent, because a fade leaves text unreadable partway through and leaves it invisible altogether if the animation is interrupted. Everything on the page is at full opacity from the first paint. If your system asks for reduced motion, the movement is dropped and the block is simply there.

Zoom and reflow

At 200 percent browser zoom nothing is cut off and nothing needs sideways scrolling, on the trip pages and on the request form both. At 400 percent the layout collapses to a single column and stays readable, with the one exception listed in the next section. Text can also be spaced out, line height and letter spacing raised, without content overlapping.

Fields that say what they want

Every field on the request form has a visible label that stays visible after you type, not placeholder text that disappears. Required fields are named as required in words. When something is wrong the message appears next to the field, says what to change, and does not clear what you already entered. The form can be completed with a keyboard alone and it never times out.