Guides / 06—08
Design a visible keyboard focus state
A palette does not end at the default state; keyboard navigation must remain visible.
Find every keyboard target
Use Tab to move through links, buttons and forms. Focus needs to be visible on each operable target. Do not remove the browser outline without replacing it with a clear indicator.
Compare with surroundings
A focus ring, underline or other shape must stand out against adjacent colors. Check whether hover and focus remain distinguishable when hue is hard to perceive. Labels and state text help preserve meaning.
Check order and size
Good color does not fix confusing focus order or hard-to-reach targets. Test the keyboard journey from start to finish and inspect small screens before calling a design ready.