Inspired Buddy

No alternative text for CSS background images

  • Writing by Rajveer
  • On February 28th, 2009 at 2:43 pm

Many people are doing their best to keep the web design/development world aware of accessibility. But I have been noticing lack of awareness about basic principles of web accessibility among the people who are best with design and development. I strongly believe there is a need of taking a fundamental approach to understand that even a good design can be criticized if basic rules of web design are ignored.

Use of alternate text on images and use of images as background is something that drives me crazy too often.

There’s an obvious reason as why the WCAG guidelines state that every image needs alternative text. We are using CSS background images a lot, so how should we do it?

A very simple thing we make complicated!

If there is an image that has some relation with the content of the document then it should only be presented by using an IMG element. Also the alt attribute should be used precisely to present the alternative text. If the image contains a lot of content then longdesc attribute should be used to link to a textual representation for the details. Although the use of longdesc been also completely ruined by people who don’t know what they’re doing.

CSS images are only for visual

Images is CSS are only for visual purpose which never require any alternative text, like gradients, layout design backgrounds, rounded corners, and etc. So we have to keep the content images always out of CSS boundary. CSS should be used to build the page design NOT the content.

Check the links below that explains it in detail:

Leave a Reply

If this is your first comment on Inspired Buddy then your comment will be held for moderation. So please do not repost if your comment does not appear immediately. I will remove any inappropriate or irrelevant comments.

PSD design to HTML, CSS, and CMS theme conversion