Hallo all,
I thought I would be totally awesome, but it’s backfiring (doesn’t it usually?).
Currently, in browsers, a user only has access to title attributes when they mouse over something. Keyboarders get nix.
I found this neat bit of CSS that seemed to do what I wanted without JS:
a[title]:focus:after {
content: " "attr(title);
}
working, for instance, with
<a href=“foo” title=“FOO”><img src=“foo.jpg” alt=“foo”></a>
where, upon focussing on an anchor who has a title attribute, the keyboarder gets to see the text in the title attribute. I was stoked to find a non-JS solution.
This was great, because the guy I’m working for love icons, which are terrible for usability. The languages are represented by flags, which are ridiculous for a number of reasons (Belgians will of course have to choose either a Dutch flag or a French flag depending on which language they speak), so I was very careful with alt text etc. Still, when there are images, if you’re keyboarding, some title text would really, really help.
The problem? Certain browsers (namely Gecko but Opera will do it too) put focus on things which are clicked. The result seems to be that one must click on the flags twice to get them to do anything. Chrome and Safari, who don’t do this (why Stu Nichols’ click-dropdowns don’t work in those browsers), are fine.
I ran into something similar when dealing with onclick and onfocus events in Javascript recently. The solution I got from Raffles, to set a delay on focus events, isn’t really an option here. This needs to work for non-JS as well (I’m open to an elegant JS solution for showing titles onfocus on anchors though… I didn’t know if I really wanted to do the whole rich tooltips thing though).
So I’m here to ask, must I abandon this CSS code, or is there some way I don’t know about to get around this issue?
If there isn’t a practical and accessible way around this, I’ll have to remove it.
