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;
}
Oldest comments (3)
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.
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 ;)
Good point, I also recommend
outline: 10px solid redwhen checking the focus order