Beginning HTML5 and CSS3 For Dummies
Book image
Explore Book Buy On Amazon

Alternative text describes an image so those users who can’t see the images for some reason can access that text to find out more about the image. Adding alternative text (often referred to by developers as “alt text”) is a good practice because it accounts for the following types of users:

  • Visually impaired users who may not be able to see images and must rely on alternative text for a text-to-speech reader to read to them

  • Users who access the website from a phone browser with limited graphics capabilities

  • Users with slow Internet connections who choose not to display images

Some search engines and cataloging tools use alternative text to index images.

Most of your users will see your images, but be prepared for those who won’t. The HTML specifications require that you provide alternative text to describe each image on a web page. Use the alt attribute with the img element to add this information to your markup, like so:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Inside the Orchestra</title>
  </head>
  <body>
    <p>Among the different sections of the orchestra you will find:</p>
    <p><img src="09fg03-violin.jpg" alt="violin" title="violin"> Strings</p>
    <p><img src="09fg03-trumpet.jpg" alt="trumpet" title="trumpet"> Brass</p>
    <p><img src="09fg03-woodwinds.jpg" alt="clarinet and saxophone" 
        title="clarinet and saxophone"> Woodwinds</p>
  </body>
</html>

When browsers don’t display an image (or can’t, as with text-only browsers such as Lynx), they display alternative text instead, as shown in the figure.

image0.jpg

When browsers show an image, browsers — including Internet Explorer, Firefox, Chrome, Safari, and Opera — show title text as pop-up tips when you hover your mouse pointer over an image for a few seconds, as shown in this figure. This requires adding a title attribute to each

element, which is why it’s also included in the preceding markup.

Note: alt text is required for a page to validate, but title text is not required.

image1.jpg

This means you can use alternative text to describe the image to those who can’t see it and/or title text to provide useful (or amusing) information about the same image.

The W3C’s Web Accessibility Initiative (WAI) includes helpful tips for creating useful and usable alternatives to visual content at this site.

You may see suggestions to use alt text for so-called keyword stuffing from presumptive SEO experts. Search engines look for certain words in web pages and may sometimes use them to rank certain pages higher in their search results. Thus, some people take this to mean that using keywords in alt text improves page rankings. This is bogus. Don’t do it!

About This Article

This article is from the book:

About the book authors:

Ed Tittel is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling HTML For Dummies.

Chris Minnick runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including WebKit For Dummies.

This article can be found in the category: