When & how to write alt text 📝

Alt text is ‘alternative text’ which screen readers and assistive technology use to describe a web image. It provides a non-visual explanation of what an image is, does or says, and therefore makes the page experience complete and accessible for all users.

As a useful aside, alt text also helps with your site SEO — to find out more about that, check out our blog on Alt Text & SEO 🔗

For now, here’s how and when to write alt text on your site:

1. When not to write alt text — decorative images

Firstly not all images need alt text. If an image is purely decorative, adding alt text to it will only clutter your page experience for screen readers. Examples of decorative images are:

1. A border, break image or purely visual design element that doesn’t add any actual information or context to the page content
2. An image that replicates text next to it — e.g. a photo of a team member with their name written underneath
3. An image used next to link text that isn’t part of the clickable link

For decorative images, you should ensure to enter a ‘null’ value so screen readers know to skip over the image.

Null values are entered as alt=”” — note with no space between the quote marks.

If you do not enter a null value, some screen readers will read out the title or dimensions of the image which can be irrelevant and confusing.

2. For everything else - how to write alt text

For all other image types on your site, writing good alt text is vital if you want to provide a good experience for all visitors. Some general principles are:

• Keep it succinct. Lengthy explanations will slow visitors down and some technologies will cut off reading at a certain character length.
• Be specific. The difference between ‘a singer on stage’ and ‘Beyoncé performing at the Superbowl’ is vast.
• Provide context. ‘A guide dog leads a visually impaired man across a busy crossing’ is more insightful than ‘A man and a dog cross a road’.
• Don’t add ‘image of’ or ‘picture of’ — just jump straight in.

For specific image types, here’s some additional guidance:

Icons & links

Graphics such as social links and contact buttons are considered functional images. Alt text for these should be descriptive of what action they do, e.g. ‘mail to hello@hexstud.io’ is more useful than ‘envelope icon’.

Logos

Logos are often decorative, unless they are a link in which case the above guidance should be followed.

Graphs & charts

Meaning is key when writing alt text for infographics; for example ‘graph shows a 50% increase in X year on year’ is more useful than ‘red bar at 10, blue bar at 20’. If you think a longer explanation may be useful for complex images, you may want to consider adding short and long alt text, the details of how to do so can be found here.

Images with text in them

Any images that have text within them should replicate that exact text as alt text so it can be read.

Multiple images

If you have photo collages or icons grouped together, it is recommended to add to a null value to all except one image. The alt text for that one image should then provide the meaning of the group.

How to know if you’ve written alt text correctly

The easiest way to check you’ve written alt text correctly is to try visiting your website with a screen reader. Depending on what device and browser you’re using, you’ve likely got screen reading software ready to use, so take a sample of your pages and experience it for yourself.

Hex Studio are a small creative studio who believe good design matters. For more information on how to ensure your website is accessible, check out our design that works guide 🔗 or drop us a line at hello@hexstud.io today.