A picture is worth a thousand words. In the digital sphere, images have become an integral part of the way we navigate the Internet and even communicate with each other. While text that describes these images, (a.k.a. alt text) is not new, it’s often ignored altogether. However, as content consumption becomes more image-focused, alt text is not only a crucial part of the complex SEO puzzle, but also has the power to ensure that images are accessible to all, regardless of their abilities or the technology they use. This blog will take a look at what alt text is and why it’s important that you utilise it.
- What is alt text?
- Why is alt text important?
- Different uses for alt text
- Tips for creating good alt text
What is alt text?
First things first, what is alt text? Alt text is a brief written description of an image that appears in place of the image if it fails to load on a webpage. It’s an important element in making search engines, and the entire web, more accessible.
Why is alt text important?
Accessibility
As we’ve already mentioned, alt text is a key component of web accessibility. Even as early as 1999, the World Wide Web Consortium emphasised the importance of making the web as accessible to every individual as possible. In its Web Content Accessibility Guidelines 1.0, one of the guidelines was: “Provide equivalent alternatives to auditory and visual content.”
Alt text is one way to ensure this. Screen readers read alt text out loud, providing an auditory experience for visually impaired users. Therefore, a website without any alt text can deter these users from using that website due to its poor user experience.
SEO Benefits
Alt text can also have an impact on your SERP rankings, as search engine crawlers use alt text to understand what the images on your website mean. Including descriptive, as well as relevant alt text, helps images appear in image search results, which in turn drives more traffic to your website.
According to Google’s developer guidelines, the search engine “uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image,” clearly indicating alt text’s role in SEO.
Better user experience
With the rise of voice-activated assistants such as Siri, Alexa and Google Assistant, optimising voice search content has become crucial to ensure that everyone who accesses your website has a great experience. Furthermore, when users perform voice searches, good alt text increases the chances of your images and website being recommended by these tools.
Alt text can also be beneficial to users with slow internet connections or those browsing in areas with poor internet connections. If someone is browsing in an area with limited bandwidth, images will automatically be disabled to save data. In such cases, alt text enables them to understand the context of the images without having to see the actual image. This not only boosts the usability of the website, but also encourages the user to stay on that website and refer back to it in the future.
Different uses for alt text
Clear image descriptions
We’ve already mentioned that alt text needs to be descriptive. This description should be short and straight to the point, without any keyword stuffing. Essentially, it needs to give the basic information of what an image is about. You should therefore write what you see and make no assumptions outside of what’s being presented in the image. For example, for an image of a dog playing fetch, simply add: “A small dog catching a ball in a park.”
Decorative images
Not all images require super detailed alt text, especially if they’re purely decorative. So, if the images on a particular webpage don’t add any significant context to the rest of the context, you can afford not to add any alt text to these images.
Functional images
These are images that serve a purpose, like a button or call-to-action. In this case, their alt-text should describe their function. For example, if you have a “Buy Now” button at the end of your content, its alt text should simply be “Buy Now.”
Informational graphics
If you’re including charts, diagrams and any other informational graphics, the alt text should summarise the key information presented in the graphic. In this way, you’re helping users understand what that graphic is about, without needing to actually see that graphic. So, if there’s a bar chart showing sales data, the alt text for that bar chart could be “A bar chart showing monthly sales figures with an increase in December.
What does alt text look like in HTML code?
It’s really easy to see what alt text looks like as part of a website’s overall code. If you’re using Google Chrome, simply go to any image on any website, right click and inspect. The HTML code pops up on your right hand side, and the image’s alt text should show up as part of the following code:
<img src=”image.jpg” alt=”A scenic view of a sunset over a mountain range”>
How can I add alt text to images on my site?
The good thing about alt text is that you don’t need to be a developer or HTML connoisseur to add alt text to your images. Thankfully, all the major content management systems (WordPress, Shopify, Squarespace etc) give you the option to add alt text as soon as you upload any images.
What are some key tips for good alt text?
Alt text should be clear, concise and descriptive, although not overly descriptive. In most cases, alt text should not exceed 125 characters, as many assistive technologies stop reading alt text after this length.
You can use keywords. However, make sure you add them in a way that feels and sounds natural, rather than adding them just for the sake of it. Eliminate any redundant phrases like “photo of” or “image of”, as well as photo credits and copyright information. Finally, keep in mind that context matters, so consider the image’s context within that webpage. The alt text should complement the rest of the content, rather than distract or detract from it.
What are some examples of good alt text?
Product images
Basic alt text: A blue cotton T-shirt.
Improved: Blue cotton T-shirt with a round neck and short sleeves.
Basic alt text: A pair of white running shoes.
Improved: White running shoes with red soles and black laces, suitable for both casual wear and athletics.
Event photos
Basic alt text: A keynote speaker at a conference.
Improved: Keynote speaker addressing an audience at a technology conference, standing on stage with a presentation screen behind.
Basic alt text: Attendees networking at a trade show.
Improved: Trade show attendees networking at a booth, exchanging business cards and discussing industry trends.
Infographics
Basic alt text: A pie chart showing market share.
Improved: Pie chart showing market share, with Company A at 45%, Company B at 30%, and Company C at 25%.
Basic alt text: A bar graph of annual sales.
Improved: Bar graph showing annual sales growth from 2019 to 2023, with a significant increase in 2022.
Wrapping up
When it comes to SEO, alt text is often side-lined. However, it’s a crucial component of any SEO strategy that wants to make the most of image search’s power to drive traffic. It also has the potential to enhance web accessibility. By incorporating alt text, you can ensure that every user who visits your website is catered for, feels welcome, and has an optimal experience that keeps them coming back for more.
