Images and graphics make content more pleasant and easier to understand for many people, and in particular for those with cognitive and learning disabilities. They serve as cues that are used by people with visual impairments, including people with low vision, to orient themselves in the content. However, images are used extensively on websites and can create major barriers when they are not accessible.
ADA Review Checklist
While reviewing images located on a page, make sure they have ALT text. When a visitor using a special screen reader or similar device visits your site, the ALT text will be read to them giving them an indication about what that image is. Listed below is a series of questions that will help you ensure your images are ADA compliant:
-
Are there any background graphics, watermarks, etc?
Remove background graphics, watermarks, etc.
-
Are there any images that are just text?
If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
-
Do all of the images have ALT text associated with them?
For images that are placed using the HTML WYSIWYG widget, confirm it has ALT text by selecting the image and then clicking the Image tool at the top of the editor. Check the Alternative Text field. Decorative or background images that have no other meaning on the page do not need to have ALT text... and this only distracts from the other content on the page. For images that are placed using the Image widget, edit the widget and verify if something has been entered in the ALT TAG field. For icons that are placed using either the Icon or the Icon widget group, check to see if anything has been entered in the Alternate Title/Label field.
Alternative text should be descriptive words/phrases that describe the image that it is for. Please note that there should not be any duplicates of Alternative Text on the same page. Graphical charts and graphs also need accompanying textual explanations in addition to Alternative Text.
-
Is the page a gallery module page or has a widget that uses that data, did you remember to add Alt information to the images in the galleries?
You can verify if an image in a gallery has an ALT tag while editing the gallery by clicking on the pencil icon under the image and select Edit Details from the options given and then check the ALT TEXT field.
Please note that the ALT text for an image that is placed in the Image field for News articles, Blog posts, People profiles, and Calendar events are not necessary for anything other than the detail page. This is due to the placement of the title and the image and how close they are making the alt tag redundant. For the detail page, the ALT tag for the image is created by using the title of that item.
Additional Resources