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)

anevins12 profile image
Andrew Nevins

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

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.

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 ;)

50 CLI Tools You Can't Live Without

>> Check out this classic DEV post <<