Images | University of Montevallo

Overview

For sighted users, images are processed instantly. A photo of a red dress tells them its color, style, and even fabric texture without words. For someone who cannot see the image, the same information must be delivered through text. Images serve as cues for people with visual impairments, including those with low vision or other conditions, to orient themselves within the content.

Images must have text alternatives that describe the information or function represented by them. Without alt text, the screen reader might just say “image” or read the file name, which provides little to no value.

Make Images Accessible

Alt text is not just a line of words added for search engines. It is a bridge between visual information and written language. Good alt text describes the content and purpose of an image so that someone who cannot see it still understands its meaning.

For example:

Bad Alt Text: “UniversityLake07_aGreen_800x533”
Good Alt Text: “Student paddling in a kayak at the University Lake”

Alt text is not meant to be a place to stuff keywords, write full paragraphs, or add irrelevant details. Its main job is to describe the image accurately and concisely.

There are two different approaches to adding ALT Text to the images in WordPress:

Directly from the media library, we can fill in the Alternative Text field under the image details as shown below.
We can also add alt text directly in the web page we are editing. Hover the image and click on the top-corner pencil icon to access the Edit Image mode. Add or update the Alt Text field and click Update Image button to save your changes.

Image Categories

To provide an accurate alternative text, it’s important to understand the image’s purpose. Some of these categories are informative, decorative, functional, maps, and images of text.

Informative Images

Informative images convey a simple concept or information that can be expressed in a short phrase or sentence. The text alternative should convey the meaning or content that is displayed visually, which typically isn’t a literal description of the image.

Images as labels

In this example, the icons illustrate the contact information. The alt text for images should describe a label role and not the literal image description.

Office of Admissions

Reynolds Hall, Station 6030
Montevallo, AL 35115
(205) 665-6030

admissions@montevallo.edu

Good Alt Text: “Contact”
Bad Alt text: “purple contact card icon”

Good Alt Text: “Phone”
Bad Alt Text: “Purple handheld phone with text bubble”

Good Alt Text: “Email”
Bad Alt Text: “Purple closed envelope”

Images as supplementary information

In the example listed below, the image supplements the information presented in the paragraph. A short alt text is sufficient to describe the displayed image but is not included in the text.

Fraternity and Sorority Life & Student Organizations

There’s a reason fraternities and sororities call their members “brothers” and “sisters”: when you join a Greek organization, you’ll create bonds that will feel like family and friendships that will last a lifetime.

Good Alt Text: “Greek sorority and fraternity members smiling for a group portrait”

Bad Alt Text: “Group of students”

Images conveying emotion

Depending on the content or intended message, alternative text can be used to convey sentiment. In this case, we shouldn’t try to describe the students or action but rather the emotion to reaffirm the content.

This Web Accessibility guide is intended to assist the University of Montevallo Community, including content owners, managers, faculty, and staff, to build ADA-compliant web content.

One female student showing a male student something on her phone.

Good Alt Text:”we believe in the same web experience for all”

Bad Alt Text:”students looking at phone”

Images as file format

Decorative Images

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.

Functional Images

Functional images are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image.

For instance, as shown in examples below, the text alternative should be “print this page” rather than “(image of a) printer”, “search” rather than “magnifying lens” or “Example.com homepage” rather than “Example.com logo”.

Images of Text

Images of text display text that is intended to be read. With the current CSS capabilities in most web browsers, it is good design practice to use actual text that is styled with CSS rather than image-based text presentation. Genuine text is much more flexible than images: It can be resized without losing clarity, and background and text colors can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized. In those rare situations where images of text must be used, the text alternative must contain the same text presented in the image.

What to check for?

Choosing appropriate text alternatives:
Imagine that you’re reading the web page aloud over the phone to someone who needs to understand the page. This should help you decide what (if any) information or function the images have. If they appear to have no informative value and aren’t links or buttons, it’s probably safe to treat them as decorative.
Prioritize information in text alternative:
Aim to put the most important information at the beginning.
Length of the text alternative:
The alt text should be the most concise description possible of the image’s purpose. If anything more than a short phrase or sentence is needed, it would be better to use one of the long description methods discussed in complex images.
Responsive design:
Icons with text labels will often drop the text labels when viewed on smaller screens. Ensure that icons are readable at that size, understandable without text, and have text descriptions.
Punctuation within alt attributes:
- As for any text, using punctuation in the text alternative makes the information easier to understand. In particular, remember to add space characters in the alt text when there’s no space character between the image and adjacent text, to avoid having words running together when they are read by a screen reader.
- If you use a null (empty) text alternative (alt="") to hide decorative images, make sure that there is no space character in between the quotes. If a space character is present, the image may not be effectively hidden from assistive technologies. For instance, some screen readers will still announce the presence of an image if a space character is put between the quotes.
Superfluous information in the text alternative:

Benefits

People using screen readers: The text alternative can be read aloud or rendered as Braille
People using speech input software: Users can put the focus on a button or linked image with a single voice command
People browsing speech-enabled websites: The text alternative can be read aloud
Mobile web users: Images can be turned off, especially for data roaming
Search engine optimization: Images become indexable by search engines

References:

Web Accessibility Initiative | Images Tutorial