Setup dial

Onboarding as the program dial of an appliance on its first run. Each step is a detent on a rotary dial, its number and name engraved round it, and the panel beside it shows that step’s few fields. A step that is done lights a green lamp by its mark, and the one you are on an amber one. The dial turns back freely, and forward only as far as the first step not yet done.

Fill in the account and press Next: its lamp goes green and the dial turns. Then try turning past a step that is not done. Drag the knob, scroll on it, press a step’s name, or tab to it and use the arrow keys.

• The knob is a slider from 1 to the number of steps, and says where it is in words: “Step 2 of 4, Workspace”. The arrows and Page keys turn it a step; Home goes to the first and End as far as it may.
• The marks are an ordered list and each says its state after its name: “Account, done”, “Workspace, current step”, “Invite, locked”. The current one also carries aria-current="step".
• A turn that meets the stop is said in a polite status line, in words that name the step to finish first. The knob giving a little and coming back is only a second signal.
• Next checks the step with the form’s own validity and shows the browser’s message on the first field that is wrong, so a screen reader says what is missing.
• Lamps are never alone: a done step is green and lit, the current one amber and lit, and both are said in words.
• Without the script every step is on the page, one after another, as a plain form.
• With reduced motion the knob drops into its detent with no swing and meets its stop without the bump.