Making Accessible Websites for the United Nations

Page Design: Visual Elements

Use Markup Rather Than Images

WAI Definition (Checkpoint 3.1)

When an appropriate markup language exists, use markup rather than images to convey information.

Explanation

Avoid using images to display text, for example in a navigation menu. Use HTML styled with CSS instead.

Rationale

Visually-impaired users may have more difficulties to read text in an image because it cannot be altered to fit user preferences: font size cannot be increased; the level of contrast cannot be modified.

Furthermore, an image does not convey structural information. If an image is used to display a title, a blind user will not know that this particular image is to be considered as a title because it will not be enclosed in a heading tag (<h1>, <h2>).

Technique

Use CSS to format text in HTML.

Designers who must use an image to display text to achieve a formatting effect that cannot be achieved with CSS alone should consider using the technique described below. It hides equivalent HTML text behind the image. Note that this technique is not supported under certain configurations. This technique should only be used for title banners, not for navigational elements.

Example

CSS
#hiddentitle, #hiddentitle span {
  margin: 0;
  padding: 0;
  background-image: url(images/idptop.jpg);
  background-repeat: no-repeat;
  height: 135px;
}
#hiddentitle span {margin-bottom: -75px;}
HTML
<div id="banner">
  <h1 id="hiddentitle"><span></span>International Day of Peace, Portal 2007</h1>
</div>

Validation

Test

Using the Firefox Web Developer's Toolbar (plugin):
Go to Images > Disable Images > All images

Success Criteria

Check that all the text in the page is still visible with all images disabled.