Photos and other images are inaccessible to individuals who are visually disabled or impaired and who rely on assistive technology, unless a description is provided for their screen readers to read. The best way to provide a description for most photos and images in the digital world is through the use of alternative (or “alt”) text. In Drupal Web Express a mechanism is available to add alt text to photos. In fact, it is not possible to add photos without supplying alt text. Users are prevented from uploading photos until the alt text is provided, unless the photo is to be placed in the background of a block and is purely decorative.
Alt text is a “behind-the-scenes” description of a photo. It’s not typically visible in a document or webpage; it is read out loud to visitors using screen reading software. When alt-text is provided for a photo, a screen reader user will typically hear “image” or “graphic”, followed by the alt-text (e.g., “graphic, CU Denver logo”). Screen reading technology is unable to interpret or describe photos and images, so visually disabled users will not be able to access the content if alt-text is not provided.
The guideline from the Web Content and Accessibility Guidelines (WCAG) that pertains to using alternative text for non-text content provides exceptions, however. Where non-text content that is not required to use alt-text is presented in webpages, this content follows the exception of decorative non-text components such as icons, form controls and other decorative uses such as background photos:
Types of Images
For user added photos and other images, alt-text is required in most cases in order to add them. Below are the types of images site editors can add to webpages with links to pages for more detail about how to manage creating accessible alternative text as far as when it's required to be provided and not required:
Informative Images
An informative image represents the content and informative context in which it appears. These types of photos are user added to webpages, news articles, text blocks, and other components in Web Express. There are different types of informative images as well and all are described in the WCAG tutorial for them. The text alternative should be at least a short description conveying the information presented by the image.
Decorative Images
These types of images serve the single purpose of adding visual decoration to webpages, rather than conveying informative content that is important to understanding the page. Decorative images are added to certain blocks in Web Express and no alt-text is required for them. This example appears at the top of the webpages in this website. WCAG Tutorial
Functional Images
Functional images are nearly always decorative with the exception that they are also normally linked to another webpage or provide other functions. The alt-text for these types of images should include content about the destination of the link or action and not a description of the content of the image. Other examples include such images as homepage icons or a button to submit a form. WCAG Tutorial
Complex Images
Complex images such as scientific diagrams and sophisticated charts convey interpretations of data or detailed information that usually an image can best represent. The text used to describe these for accessibility comes from a combination of the image caption, alt-text provided when uploaded, page content, and sometimes a link to a detailed description in another webpage. WCAG Tutorial
Images of Text
Readable text is sometimes presented within an image, such as this example of the Students for a Democratic Society logo. 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. The WCAG guideline includes exceptions for images that can be customized by viewers when viewing them or if they are essential, i.e., the functionality of which cannot be achieved with genuine text.