Optimising images for accessibility

When we talk about optimising a website for your target audience, that includes helping visually impaired people navigate your site with ease.
Last updated: July 8, 2022

A lot is said about the importance of brand diversity, and how greater inclusion can help increase customer engagement. Yet, a lot of business owners forget that being inclusive also means optimising their website’s content for visually impaired users.

When we talk about optimising a website for your target audience, that includes helping visually impaired people navigate your site with ease. Adding alt tags to your website’s images is a great way to start. 

Unfortunately, there’s a huge misconception that not including any images can be better for these users. That’s untrue, because visually impaired people can read images – as long as you help them do it.

In this article, we’ll walk you through what an alt tag is, how you can add it to an image, edit it, and update your alt tags so as to make them more accessible to visually impaired users.

What is an Alt Tag? And why is it useful?

Also referred to as an “alt description,” alt tags (or alternative tags) are lines of text that act as alternatives to images, when said images aren’t visible to users.

Although they can also add context to an image that couldn’t be loaded due to a slow connection, alt tags are extremely useful for people who use screen readers. Screen readers will read through alt tags out loud and, when well-written, alt tags will describe the contents of the image to a person who’s unable to see that image.

Whilst the primary goal of informative alt tags is to assist your visitors, the descriptions are also great for search engine visibility. Because web crawlers don’t read images or videos, a verbal description of the high-quality images you’re using will help crawlers make sense of what your page is about.

Where to Find Alt Tags?

You can find alt tags on a page by right-clicking an image on a website, then clicking “Inspect”.

On the right side of the page, an HTML inspection of that exact image will pop up. The alt text for that image will be inside the img alt attribute, which reads <img alt = “image file name” alt = “image file alt description”/>. 

You can also know whether an image has an alt tag by using a screen reader application. By clicking on the image, the screen reader will read its respective alt tag out loud.

How to Edit Alt Tags?

If you’re using WordPress, you can easily add or edit your alt tags by going to your dashboard. Once you’re there, you’re going to click on “Pages,” and go to the page (or pages) you want to add alt tags to.

Next, you’re going to click “edit,” and your page will pop up, ready to be edited. All you have to do now is click on the images where you want to include alt tags, and click on the pencil icon to edit it.

A window titled “Image Details” should pop up. Just under “Caption,” you’ll find a field titled “Alternative Text.” That’s the place where you’ll want to include your alt tag. When you’re done, hit “Update,” and your changes should be saved.

What to include in alt tags?

An alt tag should succinctly, yet accurately describe the contents of an image, so your visually impaired users can better visualise it. As an example, the image below could be described as follows:

“A group of digital marketers seated around a coffee table during a meeting.”

(Photo credits to Jason Goodman, source: Unsplash)

Here are a few additional better practices for your alt tags:

  • Use capital letters to start sentences, and periods to finish sentences.
  • Use correct grammar for easy readability.
  • Use the main keyword phrase for the page, but make sure it doesn’t compromise the accurate description of the image.
  • Don’t start your alt tag with the words “Picture of (something).” Simply describe what’s in the picture.
  • Avoid using any symbols, as those will also be read out loud.

Scanning For Missing Alt Tags

Individually looking for missing alt tags on your website can be time-consuming. The good news is, free tools like Alt Tag Checker will scan specific pages for alt tags, including the ones that are empty.

All you have to do is enter the valid URL for the page you’d like to scan, and the tool will provide an alt tag report for that specific page.

Wrapping Up

When adding alt tags to your website’s images, it’s a good thing to be thinking about higher search engine rankings. However, it’s important to keep in mind the real reason why you’re doing it: to help visually impaired visitors browse your website without any trouble.

Now, take a look at your own website. How can you improve your current alt tags? And where can you include them?

Duncan Isaksen-Loxton

Educated as a web developer, with over 20 years of internet based work and experience, Duncan is a Google Workspace Certified Collaboration Engineer and a WordPress expert.

Leave a Comment

Login
Log in below to access your courses.
Log In With Google
Forgot Password
Enter your email address or username and we’ll send you instructions to reset your password.