DEV Community

Django Janny
Django Janny

Posted on

A quick a11y CSS trick

Today, my job was to correct some accessibility lacks on a website of one of my clients.

One of those corrections was about focusing the right stuff in the right order. To be sure of where the focus was, I used this little trick (only in development mode of course):

*:focus {
    background-color: yellow ! important;
}

Top comments (3)

Collapse
 
anevins12 profile image
Andrew Nevins

Good point, I also recommend outline: 10px solid red when checking the focus order

Collapse
 
moopet profile image
Ben Sinclair

Ironically, yellow isn't very easy to see against the most common background colour (white). I'd go with a border as well provided it doesn't mess up the box sizing.

Collapse
 
keltroth profile image
Django Janny

You're right about the color, I choose yellow totally randomly ! Maybe not the best one ;)
And I preferred background-color over border precisely because it does not mess with box sizing ;)