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:
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.
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.
You'll see it if you use Blake's Suckerfish Part deux. Try clicking on any of the dropdown links in Firefox or IE6. While Opera also acts weird with focus, I think it was ok. Gecko was the main problem. I originally tried the element:focus:hover thing with his menu and was happy that it worked. I dunno why I didn't think of it then with this. I just used it for Teh Evil Popup I was forced to create... focusing on the popup (or its close button) now can also give title text. Yay.
Not stupid, just tangled in code. Now that you've posted the solution, I don't have to go hunting for it later when I have the same problem.
content: " " attr(title);
Duh. : )