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?

 The term “ALT tag” is common shorthand that references the alternative or ALT attribute within the image (IMG) tag. Now if you’ve never worked with the code of a website all these terms might seem overwhelming. To better assist in understanding, we’ve added an image with an example of what the ALT text for this image would be below.

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.

 Below we have compiled a list of guidelines on how to properly create optimized ALT text.

 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.

 When creating these text alternatives, relevant keywords can be added to also boost position in search engine results. Once people find this out, many think “well why don’t I just put all my relevant keywords in my text alternatives to get the most out of my alt text?” This strategy may seem great in theory, but it’s called “keyword-stuffing” and can lead to unhelpful descriptive text. When adding descriptive text to elements of your site, make sure it paints a picture of the media and throw in relevant keywords when appropriate.

 ALT text increases usability for everyone

 Alt text provides a written description of what the image is and the purpose it serves on the website. It allows blind or visually impaired the ability to be read a description of the image. It also appears when an image cannot load and shows all users what the image is supposed to be. Therefore, it creates usability for everyone, not just disabled users and is a necessary step to increase the usability of your website.

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.

 Need more information on why Alt-Text is important? Read our blog post “Web Accessible Images: Where to start”.

Source:

http://accessibility.psu.edu/images/imageshtml/