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.