For those who have studied web site accessibility, this is probably old hat. Admittedly, I haven’t spent enough time thinking about accessibility, so this is one of those things I didn’t even realize until recently. So shame on me. :)
Let’s say you have the following page, with various elements, starting with maybe a form field:
If you start with keyboard focus on the search input, then use the tab key to cycle through the elements, you’ll notice that the “focus” of the cursor goes from search field, to “Dummy link 1” (skipping the heading and paragraphs), to “Dummy link 2”, etc. To make it clear what’s focused, I’ve added a background color using the
Okay, simple enough. But what if you want to cycle through all the elements on the page? Easy, you just add
tabindex attributes in the HTML to any element you want to receive focus:
Now when you cycle through the elements with the tab key, all the elements receive focus, including all the paragraphs, with the background color added for each.
But notice another thing that happens: Any of those elements will receive focus styles even if you click on them with the mouse.
This means you can do something like the following demo. This is as a pure CSS game called “Find the Kitten”:
This uses the same technique as the previous demo, changing styles on focus, but with the
tabindex values added to all the elements, the boxes are clickable.
With a little more creativity, and combining this with other new CSS features, this could make for some interesting effects.
I should stress that the techniques I’m using here are experimental and you should do some research on
:focus before you go crazy adding all sorts of elements on your pages that change styles when clicked/focused.
Again, this concept is probably not new to most experienced developers who have studied accessibility, but I thought it was interesting enough to write about.