dw_dev | new accessibility css for developers

new accessibility css for developers

Sometimes -- very rarely, but sometimes -- there needs to be text made available to screenreaders, but hidden from people using standard, CSS-aware visual browsers. In general, this is something that should be avoided, but there are valid use cases. For example, tag clouds, in which the size of the typeface is (usually) invisible to screenreaders and people using text-only browsers, but that typeface size includes semantic information. Hiding text from everyone except for CSS-unaware browsers makes it possible to reveal that information to screenreaders and text-only browsers without providing redundant information to visual browsers.

lj_base.css contains a new class, "invisible".

.invisible {
position:absolute;
left:-10000px;
top:auto;
}

Using this class will make text visible for screenreaders and CSS-unaware browsers, but hidden from everyone using CSS. Use this sparingly!

Example: <span class ="invisible">Nobody with CSS turned on can see me!</span>

Flat | Top-Level Comments Only

I'm not a CSS expert, (or an accessibility expert), so I'm probably miçssing something, but why not use display: none for that class?

Most screenreaders respect display: none. Which is useful in other ways, but does mean that you can't write one universal bit of CSS which will work for screenreaders and CSS-unaware browsers. (As a general rule I usually think that people who are using CSS-unaware browsers know what they're doing and understand the consequences, and I say that as somebody who occasionally has to turn off CSS in order to browse.)

Because then it doesn't show up to most screenreaders, either.

More similar tips from WebAIM. Any comments on the differences between their "hidden" class and your "invisible", or the rest of that article?

I swiped the CSS from them. :D Seriously, there were some minor mods to make it work but otherwise it's their CSS in the first place. I renamed it so people wouldn't confuse with visibility: hidden.