What are ALT Tags and Why do I Need Them?
- April 18, 2018
- / Adot Labs
- / learningcenter
When people start learning about web accessibility one recurring word they will see is “ALT tag”, but what exactly is an alt tag and what purpose does it serve?
As you can see from the underlined text, ALT text is simply the descriptive text of an image. It provides a detailed description of what the image is and the purpose so that blind or visually impaired users can hear the descriptive text using screen reader software. ALT text will also appear if an image fails to load so that users can read what the non-present images were supposed to be.
ALT text guidelines
1. If the image is used as a link, it should describe what the image is linking to.
2. Images used as spacers or in toolbars should have an empty ALT tag. This is because a screen reader will read every alt tag on the page.
3. If an alt tag serves no purpose other than decoration on the site, then the alt tag should be left blank, so screen readers do not read them to the user.
4. Although there is no official standard on how long alt text should be, many web accessibility experts suggest that alt tags are 125 characters or less. This recommended restriction is set because of the abilities of the most popular screen reader software JAWS. JAWS breaks up long pieces of text into 125 characters. If ALT text is longer than 125 characters, then the description read will be broken up and be confusing to users.
5. For charts and diagrams, an expanded explanation that is linked to the element should be provided. In these cases, it is acceptable for ALT text to be longer than 125 characters.
In summary, if you can close your eyes, have the alternative text read to you, and you can visualize the image, then you have good ALT text.
Not Recommended
< img src ="steak.png" alt="" >
or
The two situations above are not recommended when implementing alt text. The first example does not have any alt text at all and the second example uses the strategy of keyword stuffing (which is not suggested).
Adequate
< img src = "steak.png" alt="steak" >
The alt text for this example is only adequate because it does not describe everything in the photo and is the same as the title of the image. This does not create a good enough visual image for users to understand what the image is.
Improved
< img src = "steak.png" alt= “steak with grill marks on grill with fire surrounding it ">
This alt text is a good example of alternative text because it is very descriptive and allows the user to create a visual image of what the picture is; it’s a steak with grill marks on it on a grill with fire surrounding it!
ALT text boosts SEO
By providing text alternatives on your website you are helping search engine robots (spiders or crawlers) have a better understanding of the content your website offers. Search engine robots that have a better understanding of the content of a website get moved to a higher positioning in search engine results.
ALT text increases usability for everyone
Adding ALT text can be a cumbersome process, but it is a necessary one. It increases the usability of your website for everyone, it boosts your SEO and it’s just good business practice.
Source: