Lessons · HTML and CSS · the keyboard user's cursor
The keyboard user's cursor
The focus ring is how a keyboard user knows where they are. Removing it removes the pointer.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
outline: none is the most common accessibility bug in production CSS, and it is invisible to whoever wrote it, because they are using a mouse.
How to think about it
Never leave focus invisible. That is the rule -- not 'keep the default ring'. A designed ring that meets contrast is better than the default.
Worked example
button:focus { outline: none }Tab to the button and the browser reports its outline-style as 'none' and its outline-width as 0px. Focus is still there, and nothing shows where.Your turn
The CSS declaration that leaves focus invisible.
outline:
Write a page and watch it render
The trap
Focus does not stop moving when you hide the ring. The page becomes a keyboard maze in which something is always selected and nothing ever shows what.
Practise the keyboard user's cursor on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.