Best practices for writing good alt text

Best practices for writing good alt text. Read more about how to write an alternative description to the image that boosts your accessibility and SEO.

The alt attribute provides an alternative description for a non-text element¹ and normally is not presented to the user but will be available under certain circumstances. The following is the most general guideline to follow while creating an alternate text:

Consider how you would read the page including the image to someone over the phone without mentioning that there is an image. Generally, a good place to start when creating the alternative text is whatever you intend to say in place of the image.

Supplemental information

Note: use title with caution as some screen readers don’t read the title attribute by default.

Usage scenarios

Providing an alternative description in an alt attribute is important for following reasons:

• When the image cannot be loaded then the alt text value is displayed in its place. Example scenarios:
  • Unreachable on the server.
  • Invalid URL.
  • The image itself is invalid, e.g. the image was served, but the structure is invalid so the browser can’t recognize it as the image and therefore can’t display it.
  • The image is type of unsupported.
• When the image is loaded on a slow connection then an alt text will be visible while waiting for the image.
• Text-only browser is being used.
• The content of the page is being read out by a hands-free automobile voice web browser.
• The alt text improves the accessibility of a page. Screen readers or Braille devices are frequently used by visually impaired people to read text on websites. When these devices encounter a non-text element that has no alt text associated with it, the user has no way of knowing what the element represents, or if it is important to the content of the page. To explain the meaning of the non-text elements to the user, include text explanations of them on the page.
• Some users choose to browse the web without any graphics (saving bandwidth, minimizing distraction, or privacy reasons). These users will see the alt description instead of the image.
• The alt text is useful for SEO as search engines utilize it to comprehend what an image is about and by that it is used by search engines to return search results.
• In case the image is used as a link or button, the alt text conveys the purpose of the link or button.

Example code

Basic code of the image may look like that:

<img src="small-female-black-cat.jpg" alt="Small female black cat" width="1000" height="600"/>

Here’s an example of displaying the alt description in place of an unavailable image (attribute src points to a non-existent image):

<img src="unavailable-image.jpg" alt="Example render when the source of the image is not available" width="1000" height="600"/>

Best practices for writing good alt text

Words that are crucial to understanding the content should be included in the alt text. However, writing a good alternative description isn’t always an easy task and we believe that practicing is the way to get a description better and better.

Here are some suggestions that can be taken while writing the alt description:

1. Describe what the image contains, including text that’s part of the image.
2. Description in an alt is very important for SEO and is the key contributing search engine ranking factor. You can use the top keyword or two but use it carefully. Search engines can’t recognize contextually unhelpful alt text and there is a risk of being penalized for keyword stuffing, such as by Google.

   See the example of how the image and its alt text are being presented on Brave Image Search results:

   
3. Avoid using images as a background when the image is relevant to the subject of the page. The background image isn’t crawled and indexed and typically just one image is used for the background-image property regardless of the device screen width or resolution which effectively impacts the loading and rendering performance.
4. Avoid using the random filename (e.g. P044123.jpg) in favor of using a short description of what the image is about (e.g. stock-photo-beautiful-view-to-swiss-alps.jpg). The filename can give search engines clues about the subject matter of the image. Note: if you localize your images, make sure you translate the filenames, too.
5. Do not start description from Image of, Picture of or Icon. For example, screen readers automatically spells the word Image.
6. When an anchor element <a> that creates a hyperlink, or a button element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of the link or button.
7. Charts, diagrams, graphs, maps, and illustrations should be threat as complex images and have two-part text alternatives to be able to understand the details being conveyed. The brief description is the first part, used to describe the image and, if necessary, to point out where the extended explanation may be found. The long description, the second part, is a written description of the important details seen in the image. Example:

   <figure role="group">
       <img
           src="remediation-progress-timeline-chart.png"
           alt="Bar chart showing the progress of fixing issues for the last 12 months">
       <figcaption>
           <a href="remediation-progress-timeline-chart.html">Example.com site progress of fixing issues for the last 12 months text description of the bar chart</a>
       </figcaption>
   </figure>
   

8. Use an empty alt attribute (alt="") and the screen reader will skip the image altogether. This is often called a decorative image² or background.