WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Image replacement and WCAG2.0

for

From: Simius Puer
Date: Nov 11, 2009 5:00AM

Technically I don't think there is any reason in the WCAG 2 that you
*must*not do this. Most modern browser now re-size the whole page,
not just the
text so that is less of an issue.

As long as you meet the following guidelines then you should be okay - at
least on paper.

Guideline 1.1 : Provide text alternatives for all non-text content
- as you suggest, alt tags should be sufficient
Guideline 1.3 : Ensure that information and structure can be separated from
presentation
- again, if you use the correct semantic mark-up then the structure is
there
Guideline 1.4 : Make it easy to distinguish foreground information from its
background
- you should always check foreground/background contrast but this one is
often over-looked by people using images of text rather than the real thing
(also the guideline regarding non-flashing content).

As to whether it is a god idea or not is another matter.

Argument for:

- it allows you to closer control over the exact design.

Arguments against:

- You are removing the users ability to over-ride foreground/background
colours
- accessibility issues: not strictly a fail as such, but it won't
necessarily be well received
- Zooming the screen may have greater undesirable effects
- design issue: test carefully using a wide-range of browser if you use
this route...they don't all "magnify" the same way
- Putting text from headers into alt text reduces its weighting in search
engines
- SEO issues: your SERPs (search engine page results) will suffer
- If you use images for headers then you are increasing the number of
page elements + document size
- usability issue: increasing download time and page rendering time -
potentially upsetting visitors on slower connections.

Unless there is a very specific and compelling reason for using images in
the headers I'd suggest looking at CSS controlled text. A good CSS designer
can make text look pretty damn impressive without the need to resort to
using images.

Hope that helps