This post begins a series of posts on how to use the alt attribute with images in a variety of different scenarios. Not all images on a web page are the same. The purpose of the image on a webpage page will determine how to use the alt attribute. One key point to remember is that every image must have an alt attribute.
In future posts, I will discuss the alt attribute used with the following types of images:
-
Informational images
Informational images typically provide additional content/meaning to the other content on the page. It is not necessarily a literal description of the image -
Decorative images
Decorative images are used to make the website page more visually attractive, but they do not add any additional content information to the viewer -
Functional images
Functional images are used typically with buttons, links or other interactive elements to perform an action such as going to another page, printing something, opening something etc. -
Images consisting of only text
Images consisting only of text can be problematic for users of screen readers. In addition, these image often cause distortions in the text making it hard to read if the image is resized -
Complex images
Complex images contain substantial information and include graphs and charts, diagrams, illustrations, and maps showing locations (such as a campus map) -
Groups of images
Groups of images are often used together to represent one piece of information such as images from a single school event - Image maps
Image maps are somewhat like Complex images but add the additional feature of being clickable. The image is generally divided into selectable regions that allow users to click within the region for more information
Hopefully, this series will clear up a lot of the misconceptions about how to use the alt attribute with images that have been observed in many of the site.