Body
Overview
Images, by default, are not accessible to people who are unable to see them. Images on the web need to have meaningful text descriptions that describe what is presented on the image. The correct approach for image descriptions depends on the complexity of the image presented.
Alternative (Alt) Text
In most cases, uploaded images should use the Alternate Text field, to define alternative (alt) text of the image. Alternative text is not visible on the page, but allows users of screen readers to have the image described to them in a few words. Alternative text is appropriate for icons, photographs, and most other common images.
Alt Text Best Practices
- Keep it short. Alt text should be 125 characters or fewer.
- Avoid prefacing the description with Photo of, Image of, etc. Screen readers announce the type of content before reading the alt text.
- Context matters. Don't just describe the image, but describe the image in the context of the page. The screen reader will already be able to read the standard text on the page, so focus on what information is specific to the image.
Examples of Good Alt Text
- Professor Elaine Ramirez demonstrating water filtration techniques
- UO students cheering after a touchdown
- Espresso shot on a wood table
Examples of Poor Alt Text
- Photo of a sports fan
- img_2020_01_23_62351661324
- coffee
When you upload an image in Drupal, you can highlight the image and then select the Image icon, or right-click on the image itself and select Image Properties from the menu. Add the alt text to the Alternate Text field.
In the following example, the image has alt text of An Image Properties dialog box showing the Alternative Text field.
Decorative Images
Some images are purely decorative, they provide visual interest but do not contain any meaningful content. In this case, either leave the Alternate text field blank or add an empty alt text string: alt="" in the Source editor.
This tells screen readers to ignore the image entirely. It's important to give these images an empty alt text value, or else the screen reader may fall back to reading the file name of the image.
Complex Images
Some images cannot be sufficiently described within an alt text field.
You might have an infographic or chart on your page that requires a more thorough explanation. Similar to how you add alt text, select your image within the rich text editor and choose the Image button. Navigate to the Advanced tab and note the Long Description URL field or you can use the Long Description longdesc attribute tag in the Source editor.
Instead of entering the lengthy description of the complex image, you add a URL link to another page, or to the HTML id on the current page, that describes the image is greater detail. If the long description is on the current page, you can hide it from appearing on the page using CSS.
This gives the user an opportunity to decide if they want to learn more about the complex image, it doesn’t force them to listen to a long description.
Images of Text
Whenever possible, avoid using images of text.
Seek to use a version of that same image that does not use any text, and include the text as a separate element that overlays the image. There are multiple reasons this is the preferred method:
- The text on the image may be too long for the alt text attribute.
- The text cannot be resized if it's part of the image itself. If the entire image shrinks, the text shrinks accordingly. People who resize their browser text can't do this if the text is part of the image itself.
- It's difficult to verify sufficient color contrast between text and background if they are all part of the same image.
Logos
Logos are an exception to this rule. Logos frequently include very specific lockups of imagery and text, and can be flagged as decorative items.