Reading this
blog post about designing fancy tooltips with CSS3 tricks, I did my usual first-step test: hit the tab key and see what happens. Disappointingly, and yet expectedly (I’ve been in this business for too long, it seems…): nothing happened, apparently, when I reached the first icon
.
No caret (that’s the technical term for the outlining rectangle around clickable stuff, displayed by default by the browser) around the icon. And no fancy tooltip either. Indeed you are able to tab through the icons, but you have no visual cues about where the focus currently is. Plus, you don’t get the benefit of the tooltips, since they are not triggered.Looking at the HTML code, it should have worked, though: a perfectly acceptable unordered list of links, all good for keyboard usage. But the problem lied in the CSS.The usual suspects were there: outline:none, and :hover being alone, without its cousin :focus to cater for sighted keyboard users.Sighted keyboard-only users are generally users with motor impairments that prevent them from using a mouse. So they use alternative devices such as headsticks, mouthsticks, eye-controlled or speech-controlled devices. Or simply a standard keyboard, which remains more usable than a mouse, for people who find it difficult to point with a mouse. To fully understand what all this means, check out
Webaim’s excellent recap on assistive technology for motor-disabled people using the web. And I can only quote Webaim about why this all boils down to serving keyboard functionalities:
Most assistive technologies for people with motor disabilities either work through the keyboard or emulate the functionality of the keyboard.
Beyond the 7% of people identified as having severe dexterity difficulties, it’s also a matter of concerns for some power-users, who feel restrained by a mouse (that tenth of a second it takes to reach the mouse means a lot to them, at the end of the day).
So, basically, those two missing features (the visual cue, and the displaying of the tooltip), make this effect nearly impossible to use with a keyboard. Too bad, as it is essential to access the resources it links to. Both could be provided easily, though:
- do not suppress the outline (via the outline:none declaration). Outlines are extremely useful, modern browsers handle them very well, so, please, just leave them alone. And if you want, you can style them at will.
- use the :focus pseudo-class whenever you use :hover. Simple, and it does the job perfectly well. In this case, just add
.tt-wrapper li a:focus span at the same level as .tt-wrapper li a:hover span
For more info about :focus, check Nomensa’s blog.
With these two little changes, that will take about 18 seconds to make (hence the title), you have a much better product, that is: more universally usable than before. The only prerequisite to that: knowing what it means to not use a mouse as your pointing device of choice. And yes, a tiny little bit of CSS knowledge. But, hey, was it so hard after all?
Thanks for your article, great explanation. Could you please tell me what I need to do for this tooltip to work on ipads?