text that only exists if css is enabled

Question

I have a website in which I provide tooltips for certain things using a hidden <span> tag and javascript to track various mouse events. It works excellently. This site somewhat caters towards people with vision issues, so I try to make things degrade as well as possible if there is no javascript or css and generally I would say that it is successful in this regard.

So my question is, is it possible for these <span> to only exist if css is being used? I have though about writing out the tooltips in javacsript on document load. But I was wondering if there is a better solution.

Answer 1

Perhaps you need to re-think the way you are providing tooltips. Could the content be contained in the title attribute of a semantically appropriate element?

EDIT: If you provide more info, someone might be able to suggest more of a solution. What sorts of elements are the tooltips popping up on? Images? Would the abbreviation tags be appropriate?

Quick Solution I just came up with: <span> has access to the core attributes, which include title, so you could include the tooltip text in the title, and use a javascript library like jQuery to display tooltips for all spans with a title.

Answer 2

A quick hack would be to color the text the same as the background (say, white on white) in html, and then use CSS to change the color back to something visible (black on white). Of course, this is only relevant for people able to see the text. Screen readers and such wouldn't see the text as hidden.

Answer 3

CSS is also used by screenreaders to help define which page elements are read or not. Screen readers will almost always ignore elements with display:none applied to them, so not using CSS is not a valid indicator of a screenreader's presence.

I would go with Chris' idea of using javascript to generate the tooltips based on a title (or alt) attribute.

You could use JS to ensure that tooltips are only displayed when valid styles are set, so if JS is enabled and CSS disabled you can treat the extra information differently (eg footnotes).

http://juicystudio.com/article/screen-readers-display-none.php http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/