The Rules Of ALT » - HTML

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

The alt attribute is used to assign a text alternative to an img. The alternative text is used anytime the image is not rendered and by assistive technologies such as screen readers. In addition, search engines that offer image-based search capabilities rely on the alt text to determine the meaning of images. Providing alt values for images really isn’t optional, it’s something you absolutely should do if you’re a designer, developer, or webmaster. However, using the alt attribute properly is just as important as using it in the first place.

Contents

• 1 Guidelines for Proper Use of Alternative Text
  • 1.1 Always Provide Alternative Text
  • 1.2 Help Screen Readers Skip Over Aesthetic Images
  • 1.3 Duplicate the Message Conveyed by the Image
  • 1.4 Tell Visitors Where Linked Images Go
• 2 Special Cases
  • 2.1 Use 125 Characters or Less
  • 2.2 Provide a Short Summary for Images that Have Already Been Described
• 3 Points to Remember

Guidelines for Proper Use of Alternative Text

When used properly, text alternatives for visual elements mean that users who cannot view images can still make use of the full functionality of a website. However, when text alternatives aren’t used properly they can create confusion. Follow these simple rules to provide your website visitors with the best experience possible.

Always Provide Alternative Text

It might seem unnecessary to say this, but you should always add the alt attributed to every single image you use on a webpage. Even in some special cases where no text is provided, the alt attribute should still be present and left blank.

Help Screen Readers Skip Over Aesthetic Images

When a screen reader encounters an image without the alt attribute it will simply tell the website visitor “image”. This leaves the visitor wondering what information they may be missing. However, if the alternative text attribute is present but left empty, like this alt="", the screen reader understands that the image should be skipped entirely. Use this knowledge to tell assistive technologies like screen readers which images they should simply skip over. If you have images that are provided purely for design or aesthetic purposes – such an image used to render a horizontal bar – provide an empty alternative text attribute so that assistive technologies will know that they should ignore the image entirely.

Duplicate the Message Conveyed by the Image

What information does the image convey? Encapsulate that information in a brief statement and use that as the text alternative. The point of alt text is to convey the exact same meaning to a visitor who can’t see an image as the image itself conveys to a visitor that can see it. In cases where the image provides textual information simply provide the exact same text as the alt text.

Tell Visitors Where Linked Images Go

Images are often used as links to other websites. It may be the case that you are using button images for links, or you may simply link an image in an article to the source of the image. If you’re linking images to other websites use the image alternative text to tell users where the link goes.

Special Cases

By following the guidelines above, you’ll be providing better text alternatives than many common websites. While these guidelines will cover the vast majority of alternative text needs, there are a few special cases you should be aware of.

Use 125 Characters or Less

Many assistive technologies process text in 125-character chunks. Improve the experience of screen reader users by limiting your alternative text to 125 characters. If you can’t trim the alt text down to less than 125 characters, provide an extended description on a separate page and link to it. For example, if you have an image of a diagram that can’t be summarized in less than 125 characters, assign the image a short alternative text such as “diagram of something awesome” (but actually tell the visitor what awesome thing is shown in the diagram). There are two different ways you can supplement the short alternative text with an extended description that provides a lot more detail:

1. Immediately below the image, insert a link that says something like Extended Description of Awesome Diagram and link to a separate page with an extended description.
2. Immediately below or next to the image add an uppercase letter D and link it to the extended description on a separate page. This link is called a D-Link and a few accessibility experts advocate for its use, but we prefer and recommend the method described above.

Another way to provide an extended description in the past was to make use of the longdesc attribute. However, you should know that it’s been deprecated in HTML5, and is not a good way to provide an extended description any longer. Skip longdesc and use one of the two methods described above to provide an extended description of a complex image.

Provide a Short Summary for Images that Have Already Been Described

There will be times where you will use an image and describe it in the paragraph text on the page. For example, you might post a picture from a recent fishing trip and include in the paragraph text on the page a description of the image that is something like this “I had a great time fishing this past weekend and caught the 7-pound bass you see in the picture!” In a case like this, it’s still important to provide a text alternative to the image, but the text used can very short. In the case of our fishing example, good alt text might look something like this: alt="weekend fishing trip".

Points to Remember

Proper use of the alt attribute can be summarized with four key points:

• Always use the alt attribute, even if you leave it blank.
• Keep alternative text brief.
• Duplicate the information conveyed by the image.
• Tell visitors where linked images go.

Now you know how important it is to provide a text alternative for every image on your website. Better yet, you know how to use alternative text properly so that it is as effective as possible.

Jon PenlandJon is a freelance writer, travel enthusiast, husband and father. He writes about web technologies such as WordPress, HTML, and CSS.