Using alt text properly
Table of Contents
alt attribute is meant to provide "alternate text" descriptions of images to help ensure people do not miss out on information conveyed by graphics.
Alternative text can help people using assistive technology, such as screen readers, or people who have images turned off on their mobile devices (to save data, for instance). Additionally, alt text can be useful to everyone in instances of poor Internet service, or your CDN of choice having a service hiccup (or attack), and images are slow or fail to load.
A few tips on how and when to use the
- Use the
altattribute for images that are used as more than decoration. The alternative text describes the primary purpose of an image and is rarely a detailed description of the image itself (unless, for example, the page is actually about a specific image).
- Make sure the description of the image is useful. For example, if the image is of a company's logo, the
altshould be the company's name. The word "logo" is not necessary or useful as part of the alternative text.
- Don't begin alternative text with "photo of..." or "picture of...". Assistive technologies already indicate the role of the element as an "image" or "graphic". Redundancy makes for poor user experiences.
- Don't put line breaks in
alttext. Doing so can cause awkward screen reader announcements. For instance, inserting the element's role "graphic" and unintended pauses prior to each line break.
- Use an empty
altattribute for any image that is decorative or not necessary for understanding the content of the page. For example, an image providing decoration to an article's heading could be hidden by giving the image an
- Using an image several times in a website doesn't necessarily mean the
altattribute will be the same for each instance. For example, a logo within a website's header often doubles a link back to the home page. In this example, the
altwould be useful as "Company's name - home". If that same logo were used in the footer of the site, next to the text "Company's name, copyright 20XX", then the logo would have an empty alt (
alt="") so as to not create a redundant announcement of the company's name.
- There may be other times where images are used within links, but are decorative to the visible label of the link. For example, if the image is an icon of a phone and part of a "contact" link, the
altcould be empty as the text of the link indicates what the icon represents.
This post was last updated on by Scott O'Hara.
- Alternative Text WebAIM 2018
- An alt Decision Tree W3C 2017
- Alt-texts: The Ultimate Guide Axess Lab 2017
- Considerations when writing alt text Shopify 2018