Even though digital transformation is progressing rapidly, many online businesses still lag behind in making their websites accessible to people with disabilities. This is partly due to a lack of awareness or technical knowledge of different accessibility issues and how to solve them.
In this article, we will cover one of the most common accessibility barriers — providing alternative text descriptions for images. When done correctly, alt text can paint a complete picture for people who cannot perceive images visually. Unfortunately, many content creators and developers forget to provide alt text or write something that doesn’t quite hit the mark.
So, what exactly is Image Alt Text, and how should you integrate it into your website?
What is Alt Text?
Image alt text, also called image alternative text descriptions, is the written copy that appears in place of an image on a website if the image fails to load on a user’s screen. This text can also help screen-reading tools describe images to visually impaired users and allows search engines to better crawl your website.
Alt text should be brief but vivid enough to clarify the image’s content to someone listening to the description. This includes any information contained within graphs or charts. Well-written alt text doesn’t just describe a photo but also communicates its purpose and context.
But how do you add alt text to images?
How to Add Alt Text to Your Images?
Image Alt Text is the descriptive text that is included in a website’s foundational HTML code to describe an image on a webpage.
However, adding Alt Text to images varies slightly depending on your web-building platform. Generally, when you upload a photo, there should be an ‘Alt Text’ or ‘Alt Description’ field where you can input your description.
For HTML users, you can add Alt Text to an image by including the ‘alt’ attribute within the ‘img’ tag:
<img src="example.jpg" alt="A description of the image">Suppose you use a Content Management System (CMS) like WordPress. In that case, there’s a designated field for image optimization where you can create and change the image’s alt text.
When Should I Use Alt Text?
According to the World Wide Web Consortium (W3C), all images must have a text alternative that describes their function or the information they represent. However, that doesn’t mean every image should be treated the same.
Follow these rules when writing alt text:
1. Images of Text
Does the image contain text?
If readable text is presented within an image, the text alternative must contain every word in the image. However, it’s essential to mention images with text should be avoided, except in the case of logos.
2. Functional Images
Is the image used in a link or a button, and would it be hard to understand the function if it wasn’t there?
Suppose an image is used as a link or button. In that case, the alt text must describe the functionality and destination, if it doesn’t already from the text or graphical content. For instance, a button to “download in App Store” image link would have an alternative text description stating: “Click here to download the Bittrex app on the App Store.”
3. Informative Images
Does the image contribute meaning to the current page or context?
Informative images are images or illustrations that convey vital information to the context of information surrounding them. The text alternative for these images should include the image’s essential information. The description should be colloquial as if you are explaining it to someone sitting next to you. For example, suppose an image is of a truck driving. In that case, the alternative text should state: “A truck driving over rough terrain”.
However, complex images such as infographics or diagrams used to convey data or detailed information should have a complete text equivalent to the data or information provided in the infographic or chart.
4. Decorative Images
Is the image purely decorative or not intended for the user?
If an image’s only purpose is to add visual decoration, it does not require alt text. However, the image must then be explicitly marked as presentational so that it is ignored by screen reading software. It must still have an alt attribute, so give it “null” alt text, which is an alt attribute with no value, as seen below:
<img src=”../img.jpg” alt=”” />Need help with how to treat a specific image? The W3C has developed an alt text decision tree to help you determine the right approach depending on the image’s purpose.
Image Alt Text Best Practices
Ultimately, image alt text needs to be specific and representative of the topic it supports. Just adding alt text isn’t enough. It’s essential to ensure it’s effective.
Here are some best practices to follow:
Describe an Image and Be Specific
Alt Text should accurately represent the content and function of an image. Use both the image’s subject and context to guide you. For example, instead of writing “dog” for an image, use a more specific description such as “A golden retriever playing fetch in the park.”
Avoid Redundancy
It might seem like a helpful cue, but remember not to include phrases like “picture of” or “image of” in your alt text. Screen readers and Search Engines will know from the preceding HTML tag to announce the alt text as an image. Including these phrases in your description will only disrupt the user’s experience and waste valuable characters.
Write for People, Not Search Engines
Many content creators make the mistake of trying to stuff keywords into their site’s alt text. While it’s true that alt text can contribute to SEO, your priority should be accessibility and user experience. If you can naturally fold a keyword into your alt text, excellent. But don’t fall into the trap of treating alt text like an SEO tool.
Review for Spelling Errors and Punctuation
Like all website content, proper punctuation makes information easier to understand. Ensure that your alt text is free of mistakes for a professional and clear description.
In addition, when hiding decorative images, you should be aware of spacing when using a null or empty alt text. If there is a space between the quotes, assistive technologies may still pick it up as alt text, confusing the user.
Image Alt Text Example
Alt text that doesn’t appropriately describe the image and its purpose could prove detrimental or puzzling to website users relying on assistive technology.
Follow alt-text best practices, and you’ll get a feel for what needs to be said. A more detailed description may be beneficial. However, there are instances when it can be redundant. Consider the example below.
Bad Alt Text
<img src= "example.jpg" alt="a city's bridge at night">The line of alt text above is technically descriptive — but it does not describe the image in a meaningful way for the user. Yes, the photo above shows a city’s bridge, and it is night. But this is also a picture of Cleveland, Ohio — and the Detroit-Superior Bridge. These are essential specifics that your users might need to comprehend the image if it’s on, say, a blog post about Cleveland landmarks.
Good Alt Text
With context in mind, a better alt text for this image might be:
<img src= "example.jpg" alt="Cleveland Ohio's Detroit-Superior Bridge at night">Why is Image Alt Text Important?
We’ve already alluded to several reasons why image alt text is essential. However, understanding these reasons will help you write the best alt text possible for your users. Below we’ll look at the significant reasons image alt text is essential.
Web Accessibility and User Experience
Image alt tags allow screen reader users to understand what is happening on a webpage besides the written basic text. Images may be the only form of instruction for some websites or other digital assets. Without alt text, these users may miss out on the information conveyed through images, affecting their overall site experience. It is, therefore, a key component in meeting the World Wide Web Consortium (WCAG) success criteria for image alternative text descriptions.
Ignoring these standards could lead to potential legal consequences due to non-compliance with the Americans with Disabilities Act (ADA). Such non-compliance limits your website’s audience reach and could result in lawsuits or hefty fines. Hence, incorporating alt text in your website design is an inclusive practice and a legal imperative.
Search Engine Optimization
Search engines like Google, unable to visually understand images, rely on Alt Text to determine their content. This information helps them provide relevant results for image searches, significantly boosting your website’s visibility.
However, while Alt Text can contribute to SEO, it should not be used to manipulate search rankings by overstuffing keywords. Google can penalize such practices, leading to a decrease in your overall SEO performance.
Learn more about Web Accessibility and SEO Optimization: A Powerhouse Combination.
Take the Next Steps Toward Accessibility
In a digital era where inclusivity and accessibility are of utmost importance, alt text is a vital tool for website owners and developers. If, until now, you were not aware of the importance of image alt text, don’t stress! You can add these elements at any time to increase the accessibility of your website.
If you’d like to talk further about your web accessibility initiative, Schedule a Complimentary ADA Strategy Briefing with the experts at 216digital. We will help you take the steps towards web accessibility on your terms by developing a strategy to integrate WCAG 2.1 compliance into your development roadmap.
Remember, alt text is not just an option—it’s an essential step in building a successful and accessible online presence.