For those of you unfamiliar with alt tags, alternative tags are added to the code that places an image on the web page. They are used to describe the image to someone who is blind and uses screen reader software to read the web page to them. They can also be used to add key words for search engine optimization. They don’t show on the page unless the image is not there for some reason, for example, an email before the recipient chooses to download the images. Adding alternative tags to images is a very basic and one of the easiest ways to improve accessibility to your site, but just what those alt tags should say is one of the more complicated things. I have been reading the accessibility guidelines that are spelled out on the
webaim.org site, but even that information is conflicted.
There are three types of images that are used on websites. One is purely decorative and conveys no meaning, such as patterns or rounded corners. Generally, it is a good practice to make these types of images background images since it cuts down on the page clutter and eliminates the need for an alt tag. The second is an image that conveys a very clear meaning and important information, such as a logo. These types of images absolutely must have an alt tag that spells out what the image is saying to the sighted visitor. The third type is images that are used to add appeal and to convey a subtle meaning, such as “we are a friendly company.”
Webaim.org uses the ubiquitous photo of the smiling woman as an example. This is the type that is trickiest to alt tag properly.
While the writers at Webaim feel it is best not tag these with a description, their own survey reveals a different opinion. Webaim suggests that this type of image should include the alt tag in the code, but the place where the description would go should be blank.
http://webaim.org/articles/gonewild/ This is supposed to say “this image does not convey important information”. However, their survey reveals that visually impaired users would overwhelmingly rather be presented with a short description of what the photo is about.
http://webaim.org/projects/screenreadersurvey2/
This makes sense for many reasons. A blank tag could have been put in during development, waiting for content, and later forgotten. How would a non-sighted person know that they weren’t missing important information? It is better to offer too much information rather than not enough. Also, by leaving these tags blank, an important search engine optimization opportunity would be lost. However, when adding them for search engine optimization, please remember their original intention and be kind to the people reading the tags. Keep it brief and to the point.