WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hiding Legends

for

From: Moore, Michael
Date: Oct 16, 2008 12:50PM

If I understand Dean correctly, he is employing image replacement to
provide a text alternative for a legend that is provided to visual users
through an image that is delivered through CSS.

Here are the problems that I see with that and most other image
replacement techniques.

1. If for some reason, bandwidth, aggressive add blocking, or a missing
file, the CSS file but not the image is delivered to the user, the text
is lost.

2. If the user is using a screen magnifier, browser magnification, or
operating system magnification, it is very likely that the image of text
will be unreadable due to pixilation. This can be mitigated with SFIR
but at a cost of complex implementation and bandwidth.

3. If the user requires a larger font size, the content delivered
through the image will not be enlarged with the rest of the text.

4. Frequently, though perhaps not in this context, color and contrast
are an issue within text delivered as an image.

The picture that Dean may be missing is that accessibility is not
synonymous with screen reader compatibility. This is a very common
misconception, and understandable since many of us use a screen reader
as one of our testing or demonstration tools.

My opinion is that images should only be used to deliver text in limited
circumstances. Acceptable examples: Logo's, advertising slogans, and in
limited circumstances navigation bars and headings. In all cases the
images should be tested to ensure that they do not become seriously
pixilated under moderate magnification, I test at 5X, the font should be
at least 2X the size of the body text on the page, and the contrast
ratio should be at least 5:1 between the foreground and background of
the image. I realize that frequently the company logo will not meet this
requirement and is non-negotiable, I also feel that alt="" is usually
appropriate for the logo anyway.

When placing an image of text on a page as a background using CSS, the
first question that you need to ask yourself is "Self, would my client,
his customer, or I care if that image was missing?" If your answer is
no, what the heck, drop it in. Otherwise use real text (preferred) or an
image with an alt attribute that delivers the text.

Mike