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

Discussion (3)

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 Author

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

Collapse
anevins12 profile image
Andrew Nevins

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