What is alt text?
Alternative text, more commonly known as alt text, is the text that users will hear if they are unable to view an image – an alternative option. Alt text is a short, written description of an image, which fully describes the image when the image cannot be viewed.
Alt text is such an important part of building an accessible website. They allow blind and visually impaired users to be able to ‘view’ images, and they allow users with bad internet or low data to be able to view a website without having to load images.
Alt text is what a screen reader or braille display will read out or display to users when they aren’t able to view the website, or would struggle to see certain parts of the site. It will also be displayed on the web page in place of the image for users with bad internet or low data. Alt text is easy to include, but also very easy to do badly.
Why should we use it?
The advantages of including alt text are two-fold – it’s good for accessibility, and it’s good for SEO. When we’re talking about alt text for accessibility purposes, there are five main groups of people that we should be considering:
- Visually impaired users
Screen readers and braille displays will read alt text in the place of images, allowing the content of your image to be accessed by users who are blind or visually impaired. - Users with learning disabilities
Some visually impaired users will be able to understand the basic meaning of the image from the context that the image is in, without needing to see the image. Users with learning difficulties can struggle to understand the meaning from the context and can miss out on information due to missing alt text. - Users with sensory processing disabilities
These users can be more sensitive to things in their environment, such as sights, sounds, and smells. An overly colourful image could be overwhelming to these users, so they sometimes use screen readers to navigate the web. - Users with bad internet connections
Not all users have amazing internet connections. Some users only have access to the most basic of internet connections, which often struggle to load images. - Users with low data
If a user is viewing your site on a mobile or tablet device, and they’re running out of data, they can turn on low data mode. This often stops their device from loading images and videos. Alt text gives these users context about the image that would be there.
SEO & Alt Text
From an SEO standpoint, search engine web scraping bots are effectively blind. They can’t see and process an image like a visually sighted user would, so they rely on alt text to provide meaning to the image. With no alt text or bad alt text, search engines struggle to find meaning for your images and will rank your website lower than if you have good alt text on your images.
Examples of good and bad alt text
Imagine that you’re a blind screen reader user. You’re tabbing through a website, to hear your screen reader say the following:
“Image. Logo.”
Does that tell you what you’d be seeing if you’re not visually impaired? Not even slightly. It doesn’t tell you what the logo looks like, what company the logo is for, or even the basic colours of the logo. Let’s try that again.
“Image. An image of the Code Institute logo.”
That’s definitely better, now we’re telling the user what the logo is, but it’s not very descriptive. In addition to that, the user is being told that it’s an image twice. A screen reader will read out ‘Image’ to tell the user that there is an image there, so there’s no need to include ‘An image of’ or ‘A picture of’ in alt text. With that in mind, let’s improve it even more.
“Image. The Code Institute logo, consisting of the words ‘Code Institute’, where the ‘o’ of the word ‘Code’ is a darkened orange circle, with a circular gap in the center. The word ‘institute’ is on the second line, also in dark orange.”
Much better! You now know which company the logo is for, you know what colour the logo is, and you know what it looks like. Despite being unable to visually see the logo, you can now ‘see’ the logo in your mind.
ARIA-label and ARIA-labelledby
ARIA stands for Accessible Rich Internet Applications. It supplements HTML to define ways to make web content more accessible to those who use assistive technologies.
We’ll start by looking into aria-labelledby. This is for use when an element has text, but without context, an assistive technology user would require more information. Let’s use a basic HTML ‘Continue’ button as our example.
We’ll take a look at the Accessibility Tree on Google’s DevTools for that continue button. If you want to find the Accessibility Tree yourself, go into Chrome Dev Tools, click the settings button, go into experiments, and tick the box for ‘Enable full accessibility tree view in the Elements panel’. Once you’ve enabled this, you can click the accessibility icon in the top right of your Elements panel to view the accessibility tree.
Below I’ve included a screenshot so that you can see what we’re showing to our assistive technology users. We can see what a screen reader would see – ‘button, Continue’. That’s not ideal, as it doesn’t provide any information to the user. What are we continuing with? While context can provide clues towards what the use of this button is, it doesn’t help users who choose to jump to the next interactable element.
In this case, we can either extend the text in the button to something like ‘Continue with your purchase’, or we can add an aria-labelledby. The decision behind this is often related to design – does extending the text in the element interfere with the design of the page?
In this scenario, our designer has asked us to not extend the content on the button, so we’re using aria-labelledby. So we add an element (in this case, we’ve used a span) that is hidden for users that don’t use assistive technology with an sr-only class. We then link that element to our button in a similar way to labels and form inputs – with an id.
Adding this aria-describedby gives more information for our element. You can see this in the accessibility tree, which shows the following:
Now let’s take a look at aria-label. This does the same as aria-labelledby, but for elements that have no text. Whether that’s an icon in a button, such as a dropdown menu burger icon, a colourful button, or just an icon by itself that has meaning, we want an aria-label for it. The syntax for this is simpler than aria-labelledby, as aria-label only required an attribute and a value to be added to the element, as shown below.
This can then be seen in the accessibility tree, and you can see how similar it is to the aria-labelledby results.
There’s just one downside to an aria-label – it won’t be translated by Google Translate, so for any non-English speaking users, this could cause issues. However, it’s much better than just having an icon! The ideal would be to have an icon with the text displayed next to it, but that’s not always the best choice design-wise, and compromises may need to be made. ARIA allows those compromises to happen, whilst still maintaining accessibility on your site.
With all that in mind, we do need to be careful when using ARIA. If you use it badly, you can ruin a user’s experience of your website, making it really confusing for assistive technology users, so make sure you’re only using it where necessary.
Abigail Harrison, Code Institute Student
A11y Accessibility Series
This article was written by Abigail Harrison, a Code Institute student. This is part of a series of articles on the subject of A11y, where Abigail covers the following topics.
Try our Free 5 Day Coding Challenge 
Take our full stack course 
