WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: please test this method of identifying document icons with hyperlinks

for

From: Jon Mires
Date: Oct 4, 2011 2:48PM

You can just apply a class to it, if you have the CSS set up correctly:

Lorem ipsum <span class="word">(Word)</span>

then in your CSS:

.word {background: url('path-to-word-icon.png') no-repeat; text-indent:
-999em;}
/* you may also need to put an explicit width/height on this to match the
dimensions of your icon (and change the display), so it doesn't get cut off
*/

This shows the sighted users the Word icon, but lets the screen readers hear
the "(Word)" text. But, as Rick points out, a potential drawback is sighted
users get the icon only - no text.

Cheers,
Jon

Jon Mires
Center for Accessible Technology
Ed Roberts Campus
3075 Adeline St, Suite 220
Berkeley, CA 94703
<EMAIL REMOVED>
510-841-3224 x2017



On Tue, Oct 4, 2011 at 1:27 PM, Angela French < <EMAIL REMOVED> > wrote:

> Rick, when you say that "Word" could be replaced with a background image,
> do you mean something where two styles would be applied: one to make Word
> display:none, and another to apply the background image (as shown in this
> article: http://stopdesign.com/archive/2003/03/07/replace-text.html )? I
> don't believe this technique could be implemented in Contribute as I don't
> think it provides a means of applying two styles to one element. Or did you
> have some other method in mind for this replacement?
>
> Angela
>
>
> >I think your the examples will probably also be fine. I only suggest using
> the
> >file extension in the document name to make it clearer. Could also make
> the
> >document names the link and add the doc type in parens:
> >
> >Equipment Exemption Form (Word)
> >
> >Which may even be clearer. You could then style (Word) to be replaced with
> >a Word background image. Though that hides the text description of the
> >document type from sighted users leaving them only with an icon ...
> >
> >
> >
> >Rick
> >
> >
> >
> >
> >
> >
> >