How to write and add alt text to your images for inclusivity
The wonderful world of the internet is full of tools to help everyone belong. Alt text is one of them.
Adding alt text to your images is an easy way to help promote inclusivity and make your content more accessible to people using a screen reader.
What is alt text?
Also known as an ‘alt tag’ or an ‘alt description’, alt text is the written copy embedded into an image that describes what the image shows.
Alt text is read aloud by screen reading tools to describe an image to vision-impaired users. It’s also shown when an image fails to load.
Alt text is a little different to an image description. An image description is generally an accompanying piece of text with further detail of the image. For example, if you have a complex image of a graph or chart, you might provide an additional detailed description.
For the purpose of this blog, we’ll be talking about alt text.
Quick sidebar: what is a screen reader?
Screen readers are a type of assistive technology.
Vision Australia explains that screen reading tech translates all the content of a page (written text, images, menu options) for it to be read aloud.
There are lots of different kinds of screen readers, – Apple has Voiceover, Android has TalkBack – but their main function remains the same.
Alt text helps make your content more accessible to all
By adding alt text to images, people who experience your content with a screen reader can still get the whole picture.
At Belong, our purpose is to make our world a more inclusive place. That's why we're making our websites, apps, products and content accessible, so that our internet and mobile services can be used by as many people as possible.
Check out our accessibility and inclusion page for more information on our commitment to accessibility.
Writing alt text
When writing alt text, you want to ensure it captures the essence of the image, and conveys meaning, without making the experience of listening a chore.
Be specific and concise. Describe the content of the image without excess editorialization (kind of like a tweet).
That being said, be descriptive – it's about giving people an equal experience, so the things to focus on are the things that make it equally understood if you can’t see it.
Context is important! Where the image appears influences the level of specificity you should give. (We’ve included an example below.)
Don’t start with ‘picture of’ or ‘image of’ (unless an embedded or framed image is its own part of the content).
Include key text that’s actually in the image.
Check spelling and grammar (screen readers will have to read aloud your typo).
Alt text examples
Let's give crafting alt text a whirl! For example, you might upload the following image:
By itself, this image, might be described as ‘a small robot character.’ Considering the context of this blog post, you might instead write the alt text as: ‘A colourful screen-reader character smiles with big love heart-shaped eyes.’
How to add alt text online
Most web-platforms allow you to embed alt text into an image as part of the upload process (socials media, web pages, emails).
We’ve put together a quick guide of how to add alt text on a few major platforms. These platforms love to freshen things up on the reg, so we’ve also linked to official ‘help’ pages in case something has changed.
Facebook: When you upload a photo, click the three dots in the top right-hand corner. Then, select ‘Edit alt text’ and describe what the photo is showing. Find detailed instructions at Facebook Support.
Instagram: When you upload a photo, scroll down to ‘Advanced settings’ to fill out the alt text. Find detailed instructions at Instagram Support.
Twitter: As you compose your tweet, select ‘Attach photo’. Then click ‘Add description’ to enter the alt text. Find detailed instructions at Twitter Support.
LinkedIn: As you create your post, select ‘Add description’ in the top right-hand corner. Enter your alt text. Find detailed instructions at LinkedIn Support.
Outlook: Right-click any image you’ve embedded and select ‘Edit Alt Text’. A box will appear to the right for you to enter your alt text. Find detailed instructions at Microsoft Support.
How to edit alt text online
Sometimes we need to hit the edit button. Whether it’s a typo, or you just forgot to enter the alt text as you were uploading, some platforms do allow you to edit the alt text.
Facebook: Go to the post you’d like to edit and tap on the photo. Tap the three dots in the top right-hand corner. Select ‘Edit alt text.’ You might see automatically generated alt text in bold. Select ‘Override generated alt text’ and enter your alt text in the box. Select ‘Save’. Find detailed instructions for Facebook alt text at Facebook Support.
Instagram: Go to the image you’d like to edit. Tap the three dots in the top right-hand corner. Select ‘Edit’ and then ‘Edit alt text’. Fill out the alt text box and select ‘Done’. Find detailed instructions at Instagram Support.
Twitter: Unfortunately, Twitter doesn’t currently enable any editing on live posts, including the alt text.
LinkedIn: Go to the post you’d like to edit. Tap the three dots in the top right-hand corner and select ‘Edit update.’ A text box will appear over the image for you to edit the alt text. Find detailed instructions at LinkedIn Support.
It feels good when everyone can access your content 👏 Give alt text a go today!