How to get the most out of the Alt attribute?

Image source: Pexels.com Photo by Kindel Media

Back in 1999, W3C published its Web Content Accessibility Guidelines 1.0 to explain how to make content more accessible for users with disabilities. One of these guidelines was to “Provide equivalent alternatives to auditory and visual content.” That meant any web page including images (or movies, sounds, applets, etc.) should include equivalent information to its visual or auditory content. “Alt” is short for Alternative text.

Today the ALT text should be used for all images, graphical bullets, and graphical horizontal rules.

Let’s dive into examples straight away. Have a look at the image that I have found at The Art Gallery of New South Wales website:

How would you describe it to a friend who cannot see it?

• Would you describe the environment?
• Would you describe the colors in the image?
• Would you describe the mood of the person in the photo?
• Would you describe the details — what is the person wearing, what is the colour of the mobility scooter?
• Would you describe the person’s age or ethnicity? Their gender?

For sighted users, the picture says a thousand things at once. If chosen right, it will support the story that the rest of the website page is telling us. Non-sighted users will need that “alt” description to understand the same story that sighted users are getting intuitively. You, as the author, have a tool to tell your story to everyone.

In most cases, it is necessary to add an Alt description.

So when exactly do you need the Alt attribute, when you don’t need it, how to write it, and what are the additional benefits of using the correct Alt text?

Like most web accessibility features Alt text not only provides a better user experience to users with disabilities — it provides a better UX to all users.

There could be a situation when a user, say, is sitting in the airport and the internet connection is so low, that the image can’t be uploaded. Imagine their frustration if they see something like that:

…and then the following text:

“Attention! Your boarding gate has been changed. To find your gate follow the instructions on the images above”

Hint: Never assume that every single person that is visiting your website has the ability to see images that you post.

When you don’t need a description?

Let’s come back to the image with the person on the mobility schooter again.

As I have mentioned earlier, this his image was taken from The Art Gallery of New South Wales website.

For this article I have described this image in greater detail, to support my point of view for those, who can’t see the photo.

However, on The Art Gallery of New South Wales website, it is described as alt = “mobility scooter”. Underneath the image, they are telling about their mobility scooter hiring service.

We have wheelchairs and mobility scooters available for use within the Gallery without charge. Wheelchairs are located behind the ground floor ticketing and information desk and rear Gallery entrance. For mobility scooters, ask at the ticketing and information desk or book in advance.

Think of your non-signed users and their experience.

Keep in mind that some screenreaders will stop reading the description after 125 characters.

Here is another example from the Art Gallery website, but this time we would not need Alt description because the painting was already described in the detail underneath the image.

Victoria Atkinson

Trent mango tree, all the colours of the rainbow, portrait of Trent Zimmerman

acrylic on canvas

Atkinson is an artist at Studio A, a social enterprise in Sydney that supports professional artists with intellectual disability. Atkinson included a mango tree to her painting to add something ‘special’ for Zimmerman. ‘I also painted a dog kennel for Trent’s dog Simba to sleep in.’ Trent and I are both Rainbow Love,’ she says, referring to their sexual identity. She chose bright yellow for the background to make the painting ‘happy’ and to radiate a good attitude, like Trent’. ‘I love using colours because it makes my heart happy.’

Any information about the image, such as image source, copyright information, etc should be placed in the caption text below the image, not in the Alt text.

From the developer’s perspective no Alt description should be written as empty ( <alt= “” >). In this case, the image won’t be mentioned by a screen reader and non-signed users won’t even know there’s an image on the page. This would be useful for decorative elements like background shapes etc. Make sure there is no space between quotation marks ( <alt=” “>) because if you leave the space character, some screen readers will announce “image with no description” leaving its user wondering what was that mysterious image.

What not to describe in Alt text

There are some things that should be left out of image descriptions. These include:

• Descriptions of colours- no need to describe what pink looks like
• Obvious details such as a car has wheels
• Details that are not the focus of the picture
• Overly poetic descriptions
• Emoji

What if your image is clickable?

Let’s say your logo looks very much like an apple. On your web website your logo is clickable and it serves as a shortcut to the home page. In this case, the Alt text should announce the destination and not describe the logo (“apple”).

Code example if Logo is clickable:

<a href=”http://www.mysite.com"> <img src=”my_logo_apple.png” alt=”Home Page”> </a>

or

In case we use an icon of a cog to designate a settings page, alt attribute should describe the destination rather than the contents of an icon. Code example in case an image of a cog representing the settings page is clickable:

<a href=”http://www.mysite.com/settings"><img src=”cog icon.png” alt=”Settings page”></a>

The screen reader would say “home page,” which is the destination.

Difference between Alt and Description element

The Description element <desc> provides an accessible, long-text description of any graphics element. While Alt text is usually 125 characters or less to ensure compatibility for popular screen readers, image descriptions can be longer, but it is still recommended keeping them the length of a tweet, or about 280 characters.

Alt and Figcaption.

The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element.

The caption is always visible to everybody, not only blind people.

Do you need to supply an image with an alt attribute if used within a figure with a figcaption?

Yes, you would still need to write something in the Alt attribute, because using an empty alt attribute will hide the image from a screen reader. In other words, if you use an empty alt followed by a figcaption, it will not announce that an image preceded by the figcaption. It will just read the figcaption out of context. Experienced screen reader users say that it’s not a huge issue for them. But the ideal scenario would be if Alt and Figcaption complete each other. Let’s have a look at the example.

Code:

<figure>

<img src=”/media/cc0-images/digby_webster.jpg”

alt=” A person with short brown hair and light skin stands in front of a salon hang of paintings. There are 8 people around them.”>

<figcaption>Artist Digby Webster leads an access program and workshop </figcaption>

</figure>

Image and the description was taken from the Art Gallery of NSW website.

Alt attribute for SVG images

Here is the technical question: SVGs don’t accept the alt attribute, so how can one provide alternative text for these graphics?

Since this SVG does not contain any visible text that describes the graphic, we need to add the alternative text (invisible) by:

• Inside the <svg>, add:
• <title>A short title of the SVG</title>
• must be the first child of its parent element
• it will be used as a tooltip as the pointing device moves over it
• a description <desc >can be added if needed

According to the W3C specification, we shouldn’t have to do anything extra for SVGs beyond providing the <title> and possibly a <desc> because they should be available to the accessibility devices and applications.

AI-generated Alt description

Recently automatic Alt text is being integrated into different websites. While this is an awesome feature, it isn’t always the most accurate. For example, automatic alt text is great when there is a photo of a green apple on the white table, but it has a big trouble with abstract paintings. Take away: If you trust robot to write the description for you, make sure you also agree with what text it has generated.

Bonus advantage of using Alt description

Alt attribute is great for the SEO. Alt text turns images into hyperlinked search results that appear in Google images, Bing images, etc. Using correctly it will boost your website visibility by search engines and help more people to find your page.

Have a look at the image below.

Image source: pexels.com photo by Oladimeji Ajegbile.

You can describe it as “a person in glasses and big headphones is laying on their back, eyes closed. A laptop is opened next to them”. Although for the SEO purposes I would stress that in the image we can see a person who has low vision, and he might be using the screen reader right now, listening to the accessible web page description.

If I write “Screen reader user is listening to the Alt image description” this blog post will stand a greater chance of appearing in image search results.

It shouldn’t be a daunting task. Have fun describing your images via alt tags and make Alt text help you to tell your story. Just make sure that the Alt description is still serving its main purpose.

Summary

Always assume that some percentage of users that are visiting your website has not the ability to see images that you post.

That is why an Alt tag should be used for all images and all graphical elements. Although in some cases the description is not needed or even not recommended.

Last but not least. It is always a great idea to test your website with the screen reader. You can try this free online tool:

https://www.tpgi.com/basic-screen-reader-commands-for-accessibility-testing/

Thank you for reading this far. I hope you found this post useful. If you believe that I got something wrong, or if you have a bit of advice on how I can improve the user’s experience on this page, please reach out to me on Twitter https://twitter.com/stacha_cl

Sources I have used to write this article:

• https://accessibility.psu.edu/images/imageshtml/
• https://css-tricks.com/accessible-svgs/
• https://html.spec.whatwg.org/multipage/embedded-content.html#alt-text
• https://webaim.org/techniques/alttext/
• https://www.perkins.org/resource/how-write-alt-text-and-image-descriptions-visually-impaired/
• https://www.artgallery.nsw.gov.au
• https://www.pexels.com