How To add Proper Image Alt Tags In WordPress Website [Best guide 2022]

In this tutorial we will learn how To add Proper Image Alt Tags In WordPress 6.0.

Optimizing image alt tags can do more than improve your WordPress site’s SEO in fact, even more, important is the fact that it can, and will, make your content more accessible to every user who visits your site.

It’s often said that “an image is worth a thousand words.” But how do you describe those images in your alt tags? Do you need a thousand words? Do you even need to use image alt tags?

We look at how to optimize alt tags for SEO and accessibility and show you how to write perfect image alt tags in WordPress.

More Than Meets the Eye

When we think about “alt tags” (you do think about them, right?), rarely do we venture beyond imagining alt attributes as something that benefits our site’s SEO. Well … there’s a lot more to these puppies than meets the seeing eye! Alternative text also plays an important role in web accessibility, as we shall soon see.

Picture This

You’ve set up, configured, and optimized a WordPress site for your own use or for a client.

Your site needs content. A good content strategy is to ensure that all the elements on your page appeal to human readers and search engines.

Adding the right images to content can help to attract more readers, encourage them to stay longer on your page, and strengthen your message. We also want to make sure, however, that these images will help you rank higher in image search results and improve the accessibility of your website.

What are alt tags?

An “alt tag” or alt attribute is an alternative text used to describe an image or what the image represents if the image can’t be displayed for some reason (such as a slow connection or an error in the src attribute), or if users can’t view it because of visual impairment, surfing the web with images turned off, etc.

This alternative text information is useful for humans using screen readers when browsing the web, as these will read out the alt tag image text and make your image accessible, and for improving image SEO, as alt tags help search engines figure out the context of images in the page content and get these properly indexed for search results when users search online for images.

Alt Tags vs Title Tags

While both attributes use alternative text to improve how images are used in your content, an alt attribute should describe what the image represents to help users understand what the image is doing on the page (i.e. its purpose), while a title attribute is used to show a tooltip when you hover over the image.

Here is what the complete syntax of an HTML image tag looks like:

<img src=“image.jpg” alt=“image description” title=“image tooltip”>

You can add alternative text as soon as you upload images into WordPress via the Media Library.

And when editing images (you can also add a title tag to your image during the editing process).

Now that we have covered the basics of alt tags, let’s look at the types of images we will normally add to the content and the guidelines for using alternative text with different types of images.

To help put things in context, we’ll create an example post in WordPress and apply “best practice” guidelines for using alt tags with different types of images to try and achieve the best outcome for search results and accessibility.

Before we decide what to do with the image on this post, let’s take a look at best practice guidelines for optimizing images using alt attributes.

Using Alt Tags For WordPress SEO

The basic guidelines for the alternative text attribute are as follows:

  • The text should describe the image if the image contains information.
  • The text should explain where the link goes if the image is inside an <a> element.
  • Use alt=”” if the image is only for decoration.

Google’s image best practices say that when choosing alt text for your images, you should focus on creating useful, information-rich content that uses keywords appropriately in the context of your page content. It also warns against engaging in the dark art of ‘keyword stuffing’ by filling alt attributes with keywords, as this results in a negative user experience and may cause your site to be seen as spam.

In fact, here’s what the former head of the webspam team at Google, Matt Cutts, had to say about using Alt tags to improve your site’s search results.

According to Google, then, here’s the relationship between using alt tags and the image below.

  • Bad (missing alt text): <img src=”puppy.jpg”/>
  • Bad (keyword stuffing): <img src=”puppy.jpg” alt=”puppy dog pup pups puppies doggies pups litter puppies dog chihuahua puppies dog training puppy training cute puppy”/>
  • Better: <img src=”puppy.jpg” alt=”puppy”/>
  • Best: <img src=”puppy.jpg” alt=”chihuahua dog puppy in backyard”/>
See also  Does your domain name extension have an influence on your seo results ? [2022]

If the image is purely decorative, however, no alt tags should be used.

Hence,

<img src=”puppy.jpg” alt=””/>

While the above seems fairly straightforward, when you take into account questions of accessibility, things can start to become a little bit more confusing.

This brings us to the different types of images that we can use in our content.

Different Types Of Images You Can Use In WordPress

If figuring out what alternative text you should use with which type of image starts driving you barking mad, just download the PDF Cheatsheet we’ve put together below and use it as a rough guide when optimizing your images.

WordPress lets you add all kinds of images to posts, pages, and custom post types. According to the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG), images fall into the following categories for accessibility purposes:

Informative Images

These are images used for representing concepts and information graphically, like pictures, photos, and illustrations.

Informative images can be used to:

  • Label other information (e.g. a picture, image, or icon of a telephone or email for contact details)
  • Supplement other information (e.g. explain something contained in the image)
  • Convey success information (e.g. provide instructions depicted in the image)
  • Convey an impression, expression, or emotion (e.g. a picture of a happy family accompanying content or information about a family-friendly product)
  • Convey file format (e.g. PDF or ZIP file icons)

The suggested approach to using alt tags with informative images is to include at least a short description conveying the essential information presented by the image.

<p> <img src=”mobile-phone.png” alt=”Telephone:”> 0123 456 7890 </p>

Decorative Images

Examples of decorative images include images that:

  • Are used as part of the page design (e.g. borders, section dividers, etc.)
  • Are used as part of a text link (e.g. to draw the user’s attention to a clickable link or enlarge the clickable area).
  • Have an adjacent text alternative (i.e. text displayed next to the picture is sufficient to explain why the image is there).
  • Are used purely to create ambiance or improve the look of the page (i.e. “eye candy”).

The consensus seems to be that when an image serves no purpose, or when its only purpose is to add visual decoration to the page instead of conveying important information that would help readers to understand the page, then it’s best to provide a full-text alternative (i.e. <img src=”image.jpg” alt=””>).

A perfect example of a decorative image that serves absolutely no purpose!

An image with an empty alt attribute will be skipped over by assistive technologies like screen readers.

Note, however, that an image could be interpreted as being informative, decorative, or something else depending on the context it is used. The decision is up to the author’s judgment and their reason for including the image on the page.

Dr. Freud is mentioned in the content as someone who ‘did not underestimate the power of early love.’ While Dr. Freud’s somber stare into the camera lends the article an air of credibility and authority, is his photograph informative or purely decorative?

How would we consciously (or subconsciously) optimize this image with accessibility in mind? Do we leave readers guessing what Freud’s motive is for being in our post? Do we let things slip?

If we decide that the image is decorative, the guidelines suggest leaving the alt tag empty. Screen readers would then skip the image and visually impaired readers may not be made aware of Sigmund’s significant contribution.

  • Decorative: <img src=”sigmund-freud.jpg” alt=””/>

If we decide the image is informative, then we must say something in the alt tags to explain the image.

  • Informative: <img src=”sigmund-freud.jpg” alt=”Dr Sigmund Freud recognized the significance of early love.”/>

Alternatively, we might decide that the image is decorative, but we will make Dr. Freud’s recognition of the validity of “the proverbial durability of first loves” salient to all users, including visually impaired readers, by combining text in image attributes such as the img alt tag and image caption field.

Adding alt tags to images is hard work. But one day, in retrospect, the years of struggle will strike you as the most beautiful.

Functional Images

Functional images don’t convey information … they are used to initiate actions.

Examples of functional images include clickable buttons, links, and other interactive elements, such as a printer icon to represent the print function or a button to submit a form.

The text alternative for functional images, then, should convey the desired action you want to elicit from your reader (i.e. the purpose of the image), instead of providing just an image description.

See also  Marketing numérique des PME avec SEO et PPC

For example, for the button image shown below, the text alternative should be something like “click button to find love” instead of “image of a clickable button”.

An image of a functional image depicting a clickable button for dysfunctional people who haven’t clicked with anyone yet!

Because functional images are essential to the functionality of the content, missing or empty alt values create problems for screen reader users. Assistive technologies like screen readers normally announce the image file name, the image URL, or the URL for the link destination, so if the alt tag is missing, users will have difficulty understanding the action that will be initiated by the image.

Images of Text

Images can often display text that is meant to be read. In this case, the alt tag should include the words used in the image.

This image contains white text meant to be read.

<p> <img src=”relationship-banner.png” alt=”For professional counseling to discuss relationship issues, call 0123 456 7890:”> 0123 456 7890 </p>

Accessibility guidelines suggest avoiding the inclusion of readable text in images unless the image is a logo. Instead, you can style text with CSS3 and use embedded fonts rather than depicting text as an image.

If you have to depict numerical expressions using images because of the difficulty of presenting equations and special mathematical symbols with HTML, then make sure the alt tag provides sufficient information for readers to be able to do the math.

Wait … is that last digit meant to be a six or a nine?

Here is how you could write the alternative text for this image:

<img src=”0dot6666recurring.png” alt=”0.6666 recurring. (The recurrence is indicated by a line over the ‘6’ in the fourth decimal place)”>

Complex Images

Complex images such as graphs, charts, maps, diagrams, and illustrations often contain more information than can be conveyed in a short phrase or sentence and may require long and detailed text descriptions.

Complex images used to be simple before SEO and web accessibility were put on the map.

Accessibility guidelines provide various approaches for making long description information in complex images available to programs like web browsers and search engines (e.g. using HTML5 elements like <figure> and <figcaption> and assistive attributes such as longdesc and aria-described).

One approach you can use when adding a complex image to your content is to include the long description on the same web page as the image and refer to its location in the alt attribute.

Here is the alternative text that we could use for our example graph using this approach:

<img src=”love-hiatus.png” alt=” Line chart showing rates of young couples taking relationship breaks since 1988. Described under the heading Does First Love Last?”>

When using alt attributes for complex images, make sure to provide clear and accurate location information in the alternative text field to help users find the content more easily.

Groups of Images

When multiple images are used to represent one piece of information, only one of those images needs an alt tag to describe the entire group. The other images should have a null (empty) alt attribute so that they will be ignored by assistive technology.

An example of this is using a group of star icons to represent a rating.

I know what you’re all thinking … how did this cute little puppy get such a paw star rating?

Here’s how the alt tags for the star icons used in the example above would look like:

Rating:

<img src=”star-full.png” alt=”3.5 out of 5 stars”>

<img src=”star-full.png” alt=””>

<img src=”star-full.png” alt=””>

<img src=”star-half.png” alt=””>

<img src=”star-empty.png” alt=””>`

Of course, you can just use a plugin to add star rating images in WordPress, but you get the picture!

If a group of images is used to represent a collection or thematically related images, then you should add a text alternative describing each image and its relationship to the group.

Huh … what?

Here let me break it down into simple steps.

Here we have a group of images being used to represent a collection of thematically related images …

It’s an image gallery of dog pics, for the pup’s sake!

Note that if you insert images into WordPress posts or pages using an image gallery, you will not be able to view the alt tags of your images on the content editor screen …

However, if you view the source code of your published post or page, (right-click on the post and select Ctrl + U if using Windows & Google Chrome web browser, or Option + Cmd + U with iOS & Safari) …

You will see that WordPress includes all attributes in the content’s HTML using the correct markup structures …

And there’s our text alternative describing each image and its relationship to the group!

See also  How to promote your newsletter in 6 steps ?

Image Maps

If images with multiple clickable areas (hotspots) are used, you should provide an overall context for the set of links and alternative text for each individual clickable area of the image describing the purpose or destination of the link.

Typical uses for image maps include organizational charts linking to pages with individual profile information and interactive images with hotspot areas, highlight sections, descriptions, links, etc.

There are various plugins you can use to create image maps in WordPress. Just search for “interactive image” in the ‘Add Plugins’ screen of your admin area (Go to ‘Plugins’ > ‘Add New’).

Alt Tag Tips For Better SEO & Web Accessibility

Images can improve your search results, help make content easier to understand for people with cognitive and learning disabilities and provide cues to visually impaired users, but they can also create barriers if they’re not optimized for accessibility.

In addition to making your content more indexable for search engines, accessible images benefit people using screen readers and speech-enabled websites (text alternative can be read aloud or rendered as Braille), people using speech input software, and mobile web users browsing sites with images turned off (especially for data-roaming).

Here are some useful tips that will improve your SEO and make your content more accessible when adding alt tags to images:

  • If you’re not sure about the type of image you’re adding to your content, refer to this alt decision tree.
  • If your image has no purpose, leave the alt tag blank.
  • Keep your alternative text as concise as possible and put the most important information at the beginning.
  • Use punctuation in the text alternative to make the information easier to understand.
  • Add space characters in the alt text when there’s no space character between the image and adjacent text to avoid words running together when read by a screen reader (e.g. alt=”Board of directors and related staff: “).
  • If you use a null (empty) text alternative (alt=””) to hide decorative images, remove any space characters inside the quotes, as some assistive technologies will announce the presence of an image if space characters are detected between the quotes marks.
  • You don’t need to include words like “image”, “icon”, or “picture” in the alt text, as those who can see will know this and screen readers will announce the presence of an image. Unless it’s important to distinguish between paintings, photographs, illustrations, etc., best practices recommend avoiding the more generic use of the terms in alternative text.
  • Go through each image on your web page to determine if the alternative text is appropriate. As you do this, imagine reading the web page aloud to someone who is visually impaired and needs to understand your content. This will help you judge the alt text information in context and decide what (if any) function or purpose the images serve.

Getting everything right on this page is so doggone tiring!

Check Your Alt Texts

After you’re done adding content to your posts or pages, there are checks you can make to assess the accessibility of your web pages.

There are also tools you can use to perform automated tests to check if any alt text is missing on a page.

For example, you can use the WAVE web accessibility evaluation tool to check alt text with any browser …

Just type the website address in the field, click the button and your web page will display in the browser with icons and tags and a summary report section.

If an alt tag is detected, a green icon will display for that image. Click on icons to view more information…

A green icon means that an image alt tag has been detected. Who’s a good boy?

If an alt tag is missing for an image on your page (not null or empty … missing!), you will see a red icon…

A red icon means that an image alt tag is missing. Where’s the ball gone?

Go through the report section and click on icons on the page to view the alt attribute information…

Fix any issues on your page, then republish and refresh the tool to make sure everything is ok. Rinse and repeat until every issue on the page has been fixed.

One last thing …

Optimizing your images for SEO and web accessibility takes dogged determination. Take the time to craft a proper alt text for every image you add to a post or a page on your site. Site users, sight-challenged users, and search engines will thank you for it!

source

If you liked this article, please subscribe to our reddit community to discuss it. You can also find us on Twitter and Facebook.

5/5 - (1 vote)
SAKHRI Mohamed
SAKHRI Mohamed

The blog of a computer enthusiast who shares news, tutorials, tips, online tools and software for Windows, macOS, Linux, Web designer and Video games.

Articles: 3732

Leave a Reply

Your email address will not be published.