Incorrect implementation of alternate text is one of the biggest issues when it comes to accessibility. However, once you understand the reasoning behind alt text, everything falls into place and begins to make sense.
Alternate text is a concise description of an image designed to make documents more accessible to the hard of sight. Disabled visitors who come to your site will most likely be using assistive technology like screen readers which read the page out loud. In these scenarios, the software will read the alt text instead of the image. If the image contains important information, a person who is hard of sight will not get the full picture of the document they are reading.
Another less likely scenario in which alt text is used is if a user turns off images due to slow internet connection. The alt text will then be shown instead of the image.
While alt text is important, not every image needs alt text. When it comes to accessibility, images are put into two groups: decorative and informative.
Decorative images don’t necessarily need alt text as they could be purely for looks. An image is also considered decorative if it is repeating information that is already on the page. In that situation, adding alt text would be redundant.
On the other hand, informative images provide value to the reader and convey important information. This could be a graph, illustration, etc. The best way to determine if an image is informative is to remove it and see if you are missing information without the image. If you don’t get the full picture without it, alternative text is needed. Images that are links, buttons, or logos also require alt text.
When writing alt text, the goal is to answer the question “what information is this image conveying?”. In my personal experience, I look at the image and think what it is I’d want to know if I was hard of sight. We have the advantage of seeing the whole picture and knowing the context, so our job is to make sure that is portrayed.
If the image contains text, ensure all of the text is included in the alt text. For logos, the alt text should be the organization name. All in all, the alt text should be relatively short; usually a couple sentences will do. However, some images such as a chart or graph may require a long description. In these situations, imagine you are describing the image to someone on the phone. Using adjectives and concise imagery will help paint the picture. Describe what you see, but also avoid making too many assumptions.
When you are done writing the alternate text, have someone read over the document with the images replaced by the alt text. This should be a good judge of your work. If done right, alternate text can make a huge different for the hard of sight and provide accessibility to all.
Example of Alt Text