How to Add Alternative and Title Text to Images
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.
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 <img> 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.
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!