htmlcssfocusaccessibility

How to style focus outline for accessibility purposes

I'm trying to style the outline of the field when in focus because my current outline is very hard to see. I know that some html elements are focusable by default, so I'm not quite sure to what element to attach the outline style.

Do I need to target all the potentially focusable elements? Like

a:focus, button:focus {outline: 1px solid white; }

(including all the other elements)? This does not seem like the right method.

I have tried searching for the answer and all I can find is that outline must not be none but other than then, I haven't found anything else.

Solution

  • Just go

    :focus { outline: 1px solid white; }

    to target all focussable elements. No need to specify those elements explicitly.

    Btw, this is short for

    *:focus { outline: 1px solid white; }