Focus

Screens were drawn on the assumption of a mouse for a long time. Hover, the appearance while a pointer sits over something, made it into mockups, while moving through a screen by keyboard never appeared there and so fell out of the design.

Pagedeck did the same thing. The blue outline the browser draws by default clashed with the mockups, so it was deleted. Messages arrived a few months later from two people: a user with a wrist injury who could not use a mouse for a while, and a user who reads the screen through software that speaks it. Both said the same thing — they were moving with the tab key and could not see where they were standing, so pressing enter felt like a gamble.

A mouse user has a cursor. For someone not using a mouse, this indicator is the cursor. Delete it and the screen has none.

Each press of tab moves the selection to the next element, and the selected element carries an indicator. Five things get decided.

1. The travel order. Tab follows the order of elements in the markup. When the visible arrangement disagrees with the markup, focus goes to the bottom right and then jumps back to the top left, so matching layout to markup beats assigning the order by hand.
2. The indicator. An outline of two pixels or more, plus a real brightness difference against the background. Change only the color and nothing changes at all for someone who has trouble distinguishing colors, which is why accessibility standards ask for an indicator that changes shape.
3. One per screen. When two things look highlighted, there is no telling which one enter will hit.
4. It can be hidden for mouse clicks. Showing the outline only for keyboard navigation keeps the mockup's appearance and still gets the signal to the people who need it.
5. Trap it inside an open layer. While a confirmation dialog is up, tab escaping to the screen behind it leaves the user standing somewhere invisible and pressing enter. Return it to where it was when the dialog closes.

Everything pressable has to be reachable and decorations have to be skipped. Get that backwards and twenty presses of tab never land on the button.

"Don't delete the focus outline. For someone on a keyboard, that's the cursor."

Removing the indicator leaves keyboard users unable to place themselves.

"The tab order is odd. It goes from the title straight to the footer button."

The visible arrangement and the markup order disagree.

"Focus leaks behind the modal when it opens."

The selection is not trapped inside the open layer.

At Pagedeck, Noa draws this appearance into the mockup. Hand over only the default appearance and the browser default either survives or gets deleted during development, and both are hard to fix later. Theo checks from his side by putting the mouse away and crossing a finished screen end to end with tab alone. The gaps usually show up on hand-built buttons and list rows.