'Alt' tags help users with visual impairments understand image-based content you use on your engagement pages. In this tutorial, you'll learn about 'alt' tags and how to use them to improve the accessibility and the user experience of your engagements.

Imagery is a great way to add interest to your engagements, efficiently communicate information and break-up long runs of text. However, people with vision impairments who rely on assistive technologies such as screen readers may have trouble interpreting your content isn't optimized correctly.

As many as two percent of the population is affected by blindness or vision impairment. Therefore, it's important that any critical information which is only conveyed through imagery can also be communicated to people with these disabilities.

Thankfully, the web (and the accessibility features of The HiVE) lets us achieve this, by following good practice, you can ensure everyone can experience your engagement sites equally.

What is an alt tag?

Screen readers are assistive technologies that help visually impaired people understand a webpage's structure and content by reading it out loud. They rely on tags used in the code to operate correctly. For example, a 'heading' tag is used to denote text as a heading, an 'image' tag is used to identify an image, and an 'alt' tag (or more specifically an alt attribute), is used to describe an element on the page such as an image.

Alt tags are required by the WCAG Web Accessibility Guidelines to ensure an acceptable user experience for people who rely on screen readers. Within the tags, website creators can add alternative text that will be read aloud to the user when they encounter an image.

Within the HTML code, an alt tag and alt text will look like this:

<img src="townmeeting.jpg" alt="Small group of people sitting around a meeting table">

When a screen reader user comes to the image in the code, the words 'Small group of people sitting around a meeting table' will be read to them. This lets them understand the content of the image without them having to see it.

Besides accessibility, alt tags provide a description to a user in case an image doesn't load properly. They also help search engines index content they otherwise couldn't see, so they show up in search queries.

Do I need to write alt text?

According to the WCAG guidelines, an alt tag is necessary for every image on your website. However, this doesn't mean that the alt text for the tag needs to be populated with alt text, only that the tag must be present within the code.

In some instances, it may be appropriate to leave alt text field empty. Specifically, you do not need to provide alt text in cases where the images are only decorative, and don't convey any content to the user.

For example, if you add an image that is a decorative pattern meant to visually embellish the page, you don't need to provide any alt text. Adding it anyway won't necessarily hurt anything, but technically it is not required.

For all images that are not decorative, you should provide alt text.

Tips for writing good alt tags

By default, all images in The HiVE contain an 'empty' alt tag. However, you are responsible for populating the alt text.

Here's our top three tips for writing good alt text for your images:

1. Be descriptive. Alt text is primarily there to provide a text-based description of the image for those who are unable to see them. Try to help your audience imagine the image content as vividly as possible.
2. Keep it (relatively) short. Bearing in mind the first tip, be careful not to provide too much detail. Most screen readers will cut off alt text at around 125 characters, so try to keep it is concise as possible.
3. Don't include "image of," "picture of," etc. People using screen readers will already understand that the content in focus is an image, so there is no reason to preface your description with these phrases.

Here's some practical examples of good and bad alt text:

Example 1

❌Bad

The concept plan

✔Good

Concept plan showing the two key areas of renewal. The first is north of Johnston Street and the second is south of Johnston street.

In this example, the first passage is far too short to provide any understanding of the image content to the user. The second passage provides enough detail to give the user an understanding of the map, including the basic geography of the location.

Example 2

❌Bad

An image of people sitting at the meeting table.

✔Good

Five people sitting at a meeting table, smiling and collaborating with each other.

In this example, the first passage, while somewhat descriptive, doesn't really help the user understand the emotion of the image. It also contains the redundant 'an image of' which isn't necessary as the screen reader will announce the image automatically. The second passage provides slightly more description and communicates more of the emotional context.