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'. Read the style, not the width: outline is a shorthand, and browsers have not agreed on what the width computes to once the style is none -- some report zero, some report the initial 'medium' as 3px for a ring that is not drawn. The style is what decides whether anything is drawn, so it is the only part worth reading. 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.
Now you try
Next in HTML and CSS
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.