Accessible form structure

Keyboard and focus behavior

Preserve logical source order, visible focus, native keyboard interaction, and a predictable destination after submission or validation.

8 minute lesson

~~~

A form should work without a mouse. Native controls already provide most of the required keyboard behavior.

Press Tab to move through interactive controls. Use Space to toggle a checkbox. Use arrow keys inside a radio group. Press Enter to submit where the browser supports implicit submission.

Keep DOM order aligned with visual order. CSS can rearrange controls, but the keyboard still follows the document. A layout that looks correct while focus jumps around is not correct.

Never remove a focus outline without replacing it with an equally visible indicator:

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

Do not assign positive tabindex values to force an order. Fix the HTML order instead. Use tabindex="-1" only when script needs to focus a normally non-focusable status or error summary.

After validation fails, keep the entered values. If the form is long or has several errors, focus an error summary that links to the invalid fields. For a short form, the browser’s native focus behavior may already be enough.

Avoid moving focus after every small update. Unexpected focus movement can be more confusing than helpful.

Complete the entire form using only the keyboard. Make sure every control is reachable, the focus indicator is visible, and submission reaches a useful result.

Lesson completed