Focus Outlines - Accessibility Quick Guide

Keyboard focus outlines must be visible around links, buttons, inputs, and controls when the user is tabbing.

Input with autofocus styled with CSS *:focus {outline:3px solid blue; outline-offset: 2px;}

Guidance

Never use CSS :focus {outline:none;}!
Focus outline must have good contrast with the control it surrounds and its background.
Browser default focus outlines do not have good contrast and should not be used.
Enhance the keyboard focus outlines of all controls using CSS outline and outline-offset properties.

Checkbox

Radio Button

Select

Checkbox

Radio Button

Select