Fancy focus styles causing a problem in some browsers
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:
working, for instance, with
content: " "attr(title);
<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.
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.