Search code examples
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; }