How to set the alt text in WordPress
Home / Blog / Articles / How to Add Alt Text to Images in WordPress

How to Add Alt Text to Images in WordPress

Images play an important role in website design. Without images, designs can be bland and boring to view.

So, how does a vision-impaired person view your website without being able to see images?

Have you thought about a Google bot or website crawler? How does it understand your page content?

Behind every image is an often overlooked crucial element: alt text. Alt text is a textual description of an image.

Every content image on your site should have alt text to ensure that every visitor gets the best possible user experience.

This article defines alt text and explains why it’s crucial for your website. It also shares some tips on crafting effective descriptions for your website images.

In addition, we will also show you how to add alt text to your images in WordPress, that is, from inside the media library and via popular page builder tools.

Let’s jump on it.

What is Alt Text?

Alt text is a HTML attribute of the image tag. It provides a description of an image’s content.

It serves as a substitute for the image when it cannot be displayed or accessed. The Alt attribute provides context and understanding of images to users who cannot view them visually.

Importance of Alt Text

  • Accessibility: Alt text is essential for making your website accessible to everyone. It ensures people using screen readers can understand images.
  • SEO Benefits: Search engines use alt text to help understand the content and relevance of images on a website. Good alt text will boost your site’s organic traffic referrals from search engines.

What is good Alt Text?

Good alt text is a short but informative description of an image. It helps people understand what an image is all about, especially those who can’t see the image itself.

Here is a good example of alt text on an image.

An illustration of good alt text for an image
An illustration of good alt text for an image

From the above example, here are some qualities of good alt text:

  • Clear and concise: The text addresses all objects and actions with a few words.
  • Descriptive: It further describes the colour of the boots and flowers, the nature of the floor etc
  • Keyword Relevance: For example, if this image appears in a “top 10 winter boots” blog post, this alt text potentially includes relevant keywords like “winter boots”.
  • Contextual (Matches the Content): The alt text directly describes the image and is relevant to the surrounding content. This text would work for a “top 10 winter boots” blog post, but not for a flower blog.
  • Accuracy: Describes the image content truthfully. It avoids misleading or irrelevant information.
  • Natural language: The descriptive text is clear and natural. Avoid complex or technical words.

5 Tips on Writing Good Alt Text

Writing good alt text involves providing a concise yet descriptive summary of the image’s content. Below are 5 tips on how to create helpful alt text:

  1. Describe the Who, Where, and What: Define the key elements, subjects, and actions represented in the image.
    • The Who: Is there a person in the image? Briefly describe them and their action.
    • The Where: Where is the image depicted? A beach, a conference room, or a specific location?
    • The What: What is the main subject of the image? Is it a product, a graph, or an action taking place?
  2. Consider Context: How does the image relate to the surrounding content? Your alt text should explain what the image is about in relation to the web page/blog post.
  3. 125 characters or less: Screen readers only read the first 125 characters of alt text. Keep your alt text short and concise.
  4. Avoid redundancy: Don’t use phrases like “image of” or “screenshot of“; screen readers and search engine bots already know they are dealing with an image.
  5. Avoid keyword stuffing: While incorporating relevant keywords is beneficial for SEO, avoid stuffing alt text with keywords. Search engine bots perceive this as spammy content.

Adding Alt Text in WordPress

Depending on your WordPress setup, you can add alt text to images in numerous ways. We’ll cover the most common four methods:

  1. Adding alt text from Media Libray
  2. Setting the alt text inside the Block Editor
  3. Alt text in Elementor
  4. Inside the Divi Image module.

1. Adding Alt Text inside the Media Library

Adding alt text in the Media Library works everywhere on your WordPress site. This method applies no matter which editor or page builder you use.

When you add alt text to an image from the media library, that description travels with the image. When you add an image to your website in a page editor, the alt text will automatically populate in the HTML.

To add alt text from the media library,

  • Inside the WordPress dashboard, go to the Media Library.
  • Click on an image to open the Attachment details dialog box.
  • Find the “Alternative Text” field and add the image description.
Adding the alt text from the media library
Adding the alt text from the media library

When you use this method, your images will utilise this alt text wherever you place them on your website.

2. Setting Alt Text in the Block Editor

If you are using the Gutenberg Block Editor, you can add alt text to your images using the default image block.

In contrast to the previous approach, adding alt text via the image block only applies to that specific instance(block). Should you decide to use the same image elsewhere on your website, the alt text will not reflect.

To add alt text inside the Block Editor

  • Select the image block inside the block editor.
  • Locate the “Alternative Text” field via the Block settings.
  • Fill in the image description.
  • Click Update or Publish to save the changes.
Adding the alt attribute in the block editor
Adding the alt attribute in the block editor

Alt text inside the Image Block takes priority.

If an image already has alt text from the media library, the latest description added from the block editor will take priority.

This lets you tailor the description to fit the specific context of where the image is used.

3. Alt Text in Elementor

For Elementor, you can follow the steps below to set alt text for your images.

  • Click on the image widget inside the Elementor editor.
  • Navigate to the “Content” tab of the widget.
  • Click on the image to launch the Attachment Details dialog box we saw in method 1.
  • Add the image description in the Alternative Text field.
  • Close the dialog to return to the editor.
  • Update to save the changes.
How to access the Attachment Details page in WordPress
How to access the Attachment Details page in WordPress

Under this method, the alt text is also added via Attachment details. This implies that its description will accompany the image wherever you use it on the site.

4. Inside the Divi Image Module.

For sites using Divi, you can use the Image module to set the alt text using the following steps.

  • Select the image module to which you want to add alt text inside the Divi Builder.
  • Switch to the “Advanced” settings tab.
  • Locate the “Image Alternative Text” field and enter your alt text.
  • Save the changes to apply the alt text to the image.
Adding the alt text in Divi
Adding the alt text in Divi

Alt text added in Divi’s Image Module only applies to that specific instance of the image ( and its module). If you use the same image elsewhere on your site, you need to add its alt text again.

The future of Alt Text: AI assistance is here

Adding alt text can be time-consuming, especially for websites with many images. Thankfully, the future of alt text is looking bright with the emergence of AI-powered tools.

AI tools can interpret images and generate alt-text suggestions. These will save time and effort.

Here are some popular AI tools that can help you with alt text creation:

  • Ahrefs AI Image Alt Text Generator: This free tool allows you to upload your image and receive multiple alt text suggestions with different tones (casual, formal).
  • AltText.ai: This tool also uses AI to generate alt text automatically. It offers integration with platforms, such as WordPress, which makes adding alt text to your site easy.

Caution!

AI tools can be helpful. They are far from perfect. You should review and edit AI alt text suggestions for accuracy. AI might not always capture how your image us used inside your content. Ensure the alt text aligns with your website’s content and design.

Final thoughts

This guide should help you better understand image alt text. We covered specific WordPress use case’s for editing alt text and how Good alt text will improve accessibility and SEO for your website.

Remember!

Alt text is not a caption. Captions are optional and provide additional information for sighted users.

If you need help with alt text or SEO for your website reach out to the team at MRK WP.

Frequently Asked Questions

What is Alt Text, and why is it important?

Alt text/alternative text, briefly describes an image.

Accessibility: Alt text helps screen readers understand the content of your images.
SEO: Search engines use alt text to help understand your images and how they are used in your website content.

How do I create effective alt text?

Alt text should describe the key elements, subjects, and actions depicted in the image. It should be within 125 characters. You should also avoid keyword stuffing.

Where can I add alt text to images in WordPress?

You can add alt text to images through various methods. This is dependent on the tools used on your WordPress site.

Here are three ways to add alt text to your image files:

Media Library: This works for most editors and page builders.
Block Editor: Image block within the default page editor for WordPress.
Page Builders (Divi/Elementor): Use their respective image modules/widgets.

Extra Image SEO Tips!

Discover extra tips to improve your site’s Image SEO.

Similar Posts