Focus must differ clearly from the resting state
Aliases: focus indicator · keyboard focus · caret vs field focus
What it is
Once a single-line field is selected by keyboard or pointer, it must leave its resting state so people immediately know characters will land in this slot. That difference is focus-resting contrast. It tracks which cell currently holds the insertion point, not whether the cell looks like a field, and not how wide it should be. A blinking caret marks a character position; if the cell itself almost matches its unselected neighbors, a pass with Tab loses the form’s coordinates.
Why it happens
Keyboard users jump between controls with Tab and need an externalized “I am here” at every step. A focus ring, a heavier stroke, or a trough luminance shift lifts the active slot out of a row of similar wells. If the difference is smaller than shadows, validation outlines, or brand color blocks, focus is drowned. Color-only changes on a red–green axis disappear for some observers with color-vision deficiency. Stylesheets often strip the browser’s default ring and fail to replace it at equal strength, so the keyboard path vanishes visually. Pointer users need the same contrast: a click that barely changes appearance is read as unregistered, prompting repeated clicks or a jump to another cell.
Studying it
Have participants complete a multi-field form with the keyboard only; record whether they can point to focus, wrong-field jumps, and time. Factors: indicator area and contrast, whether the system ring remains, nearby error strokes or motion. Outcomes: correct localization, repeat activation, abandonment. A still-image probe also works: show a row with one cell focused and ask where the next character will appear. Include color-vision simulation and forced-colors modes—many “obvious” indicators collapse there. Do not substitute mouse-task satisfaction for keyboard trackability.
Where it stops holding
Touchscreens have no Tab ring; the software keyboard and caret carry more of the work. If the system already lifts the cell or scrolls it into view, an extra thick ring can look redundant, but an attached hardware keyboard still needs it. Custom focus that appears only on :hover remains invisible to keyboard users. Magnification and high contrast can smear a hairline ring into the same weight as the border. Autofocus that parks on a cell with no resting-state difference leaves screen-reader users informed and sighted keyboard users lost.
Applying it
- Give the single-line field a focused appearance separable from rest by shape or luminance, not by a hue shift that is easy to miss.
- Do not remove the system focus ring for visual quiet without an equally strong replacement; an error outline must not double as the focus indicator.
- Screenshot dark theme, high contrast, and error-adjacent layouts separately and confirm the focused cell can still be named.
- Verify by unplugging the mouse and tabbing the whole form. At each stop, ask an observer to point to the current cell; a miss or a pause longer than one jump means the contrast is too weak.