The amount of information we can access on the internet is often taken for granted by people who do not encounter barriers to accessing these resources. However, for people with visual impairments who use devices like screen readers, the internet can be a very different place. Image alt text on websites can help mitigate some accessibility barriers, by providing context for people who use assistive devices (like screen readers) while browsing the web. Adding alt text to images ensures accessibility for all visitors to your website, and is the foundation of a good website.
Screen readers help site visitors with visual disabilities interact with digital content by announcing the text and images on a page. However, this technology is only as helpful as a website’s structure and available text allows it to be. If a visual part of a website, such as an image, does not have an alternative text description to provide context, a screen reader will skip over it or read out its file name. This means a user may never know an image exists, and they are certain to lose out on valuable or even critical information.
What is Alt Text in HTML?
Alt text is the commonly used abbreviated form of the term “alternative text.” This is the descriptive text included in a website’s foundational Hypertext Markup Language (HTML) code to describe an image on a webpage. You may sometimes see image alt text being referred to as “alt attributes” or “alt tags.” If you aren’t familiar with these terms, you’re probably wondering, “what is an alt attribute or an alt tag?” This is text that provides context for people who use screen readers and other assistive technology. It can also be useful for search engine optimization (SEO) to generate leads through image searches and increase keyword density on your webpage, although that isn’t its primary purpose.
What is Alt Text for Images, and Why is it Important?
For screen reader users, image alt tags allow them to know and understand what is happening on a webpage other than the basic text that is written. This doesn’t refer to simple flourishes or backgrounds, but rather to important or interesting information that is being presented in an image format. For some websites or other digital assets, images may be the only form of instructions given. Not having access to them means not being able to use the site or app at all. Think of visual buttons, or image-based screens.
Sometimes, images provide more information about the particular topic being discussed in the text: for example, a data visualization such as a bar chart, a topographical map of a country, or a photo of traffic flow in a city. This information would be completely inaccessible to people with visual impairments using a screen reader if a website did not include image alt tags and alt pictures.
Alternative text for images also allows for better search engine optimization. For SEO, alt text is extremely significant to keep in mind. Google scans img alt tags to get a better understanding of the context of a webpage, and ranks them accordingly in the search results. This means that a website that uses these tags will rank higher in search results, and gain more traffic because of its greater alt text accessibility.
Image alt text is vital to your website as a way to offer full and equal accessibility to all your site visitors, but it is also valuable for your website’s search ranking to drive traffic to you.
When You Should Use Image Alt Text
Alt text for images should be used for visual elements on websites such as:
- Informative Images, which typically convey information in images and illustrations. The text alternative for these images should hold the image’s essential information.
- Decorative Images usually don’t convey information, but rather only provide visual decoration to a webpage. This type of image is written as “null” in the alt text (alt=”-“), which means that screen readers won’t waste users’ time by announcing it. A good example of a decorative image would be a flower or flourish in the corner of a page, or a background image.
- Functional Images are used as a button or link and the text alternative should describe the functionality of clicking the image, rather than what the image is. For example, an image of a floppy disk representing the “save” function should be given an alt text including the word “Save” rather than “floppy disk icon”.
- Images of Text should be avoided if at all possible, except when included in a logo. When used, the image alt text should include the same words as the image.
- Complex Images such as infographics or diagrams should have alt text that describes the information provided in the images.
- Groups of Images that convey one message should have alt text that describes the information for the group of images, not just a single image.
- Image Maps with multiple clickable areas should be described with a group alt text that gives the overall context of the map. Any clickable area should also have its own individual alternative text that describes the destination of the link and its purpose.
If you’re unsure whether an image falls into one of these categories, check out W3C’s “Alt Decision Tree” to help you decide.
5 Ways to Write Image Alt Text
Adding image alt attributes to your images is rarely a long or complicated process and doesn’t have to be intimidating. There are actually some apps and services that will help you go through your website, alerting you when there is an image that should be tagged, so that takes some effort out of the process. This is especially useful for websites with many pages.
Some alt-text best practices by Microsoft and the W3C include:
1. Select appropriate alt text that prioritizes information
Determine what function or information an image is trying to convey to ensure that you are choosing the appropriate text alternatives with the most important information.
Don’t assign a random, vague, or ambiguous alternative text description for an image simply to avoid scanner alerts or to increase your accessibility score. This could lead to confusion and frustration for a screen reader user. Accessibility is rooted in providing meaningful and functional alternative means of usability. Poor or random alt text descriptions can be arguably worse than having no alt text at all.
2. Limit the length of your alt text
Ensure that your alt text is concise. A simple short phrase or sentence is all that’s needed here, unless it is a complex image that requires more explanation.
3. Implement good design
Icons with text often lose their text when viewed on smaller screens. Prevent this by ensuring that icons are understandable without text, but also have text descriptions.
4. Use proper punctuation
Using proper punctuation makes information easier to understand. You should particularly look out for word spacing to avoid words running together when read by a screen reader.
When hiding decorative images, you should also be aware of your spacing when using a null (empty) alt text (alt=”“). If a space is used between the quotes, assistive technologies may still pick it up as alt text and it may become confusing.
5. Don’t use unnecessary words or information
To describe an object or image, be sure to outline the subject in detail within the setting, point out any actions or interactions, and other relevant information. There is no need to include words like “image” or “icon” because it is announced by screen readers.
Don’t use file names or URLs in the alt text. This can become confusing to a person using a screen reader, and doesn’t provide useful information that provides context.
Examples of when image alt text is (and isn’t) helpful
Alt text that doesn’t adequately describe the image and its purpose can be unhelpful or even confusing for website visitors using assistive technology.
Follow alt text best practices, and you’ll start to get a feel for what needs to be said. Sometimes, more descriptive language is a good thing. In other cases, it’s simply unnecessary. Keep in mind that assistive tech users won’t want to sit through a long and meaningless description that isn’t relevant.
Remember, context is relevant. So in some cases, you do want to mention the breed or size of the dog. In other cases, such as a news story, it might not be important for the viewer. In every case, try to keep it as brief as possible.
Alt text A: A dog in a forest.
In the above example, the alt text does not describe the image in a way that gives the user useful information.
With context in mind, a good example of alt text for a children’s story book might be:
Alt text B: Katie, a large golden retriever, looks over her shoulder down the forest path, sensing danger.
Improve Your Websites Overall Accessibility
If until now, you had not thought (or known) about the importance of image alt text, don’t stress! You can retroactively add these elements at any time to increase the accessibility of your website.
UserWay’s solution can help your website by offering web accessibility scanning to give you a sense of how your website conforms to WCAG and ADA guidelines. And, it can give you (or your team) insight into where remediations are needed.
Our AI-powered accessibility widget can also be implemented on your site to allow your users the freedom to customize their view of your site to suit their unique accessibility needs. Installing UserWay’s widget is a straightforward and seamless process.
To get started, request a UserWay demo or start your free trial of our widget today!
How can UserWay’s widget help me implement alt text into my website?
UserWay’s AI-powered widget can help you add alt text to the images on your website, or automatically mark images as “decorative” so they are ignored by screen readers, using constantly-developing machine learning.
Our image-recognition software provides high-accuracy alt text and descriptions for images or other non-text website elements. Site administrators can approve or change this text to ensure accuracy.
For more information on how to use this feature, check out our how-to guide for adding alt images to your website with the UserWay widget.
FAQ
What is an alt attribute and why is it important?
Alt text attributes provide the context for an image, such as how it relates to the rest of a web page or document, and how it enhances the information. This text is read aloud to users using screen readers, and is indexed by search engines. Not only is alt text important for your users to be able to access your website’s content, it also improves your site’s search engine optimization (SEO).
When should I not use alt text?
Alt text should not be used for decorative images that exist purely for design purposes, such as stock images included for visual effect. These images don’t provide any context or content and may be confusing when read aloud with a screen reader. Decorative images should have the text alt=”” so that screen readers know to skip this section.
What is the difference between alt text and image description?
Although they may sound similar, alt text and image descriptions are not the same thing. Image descriptions are more detailed than alt text, and tend to be longer. Whereas alt text should be kept to 125 characters or less, image descriptions can be as long as about 280 characters. Alt text provides a brief context for an average image, but an image description will provide more information when necessary, such as when there is a detailed chart, graph, map, or other image that requires more than the usual short text. For example, a map of the United States listing each state and some related data would not fit into an alt text tag. Image descriptions are sometimes linked, rather than set in the image tag itself. It’s an excellent idea to simply add a real text description that’s visible to everyone in the main text, or as a caption near the image, whenever possible.
