SPS Distance Learning Blog

Including alt-text on images is one of the most basic requirements for web accessibility. Alt-text is a brief description of the information conveyed by the image and allows blind and low-vision users to fully engage with all content on a web page. For simple images, writing alt-text is easy. An image of the Chicago skyline, for example, could have alt-text reading “The Chicago downtown skyline, which includes the Willis Tower and Hancock building, at sunrise.” Pretty straightforward, right?

But in online education, not all images are so simple. When teaching courses on subjects such as global health, predictive analytics, or medical health informatics, faculty often use charts, graphs, and maps as crucial learning tools. However, these are still images that must have an alt-text description to meet accessibility standards. But when looking at a complex image, the task of describing all the information it conveys can seem daunting. The following are some tips and guidelines for how to make writing alt-text for charts, graphs, and maps much less intimidating.

Context

Context is vital when writing any alt-text. While alt-text is usually defined as a description of an image, it is more accurate to say that it is a description of the information contained within an image. So when writing alt-text, no matter what the image is, think first about why you’re including the image at all. What information do you want students to take away from it? In the above image of the Chicago skyline, I left out information such as the position of the photographer (south of the Loop, on the lake) and the positions of the most notable buildings. It’s up to the faculty to determine if that is information that is important for the students to know.

Similarly, when dealing with complex images, think about what information students need to take from it. Sometimes, students don’t need to know every detail about the image. For example, take a look at the map below, which shows the percent change in population across the United States by state and decade, from 1980 to 2010:

Percentage Change in Population by State and Decade:
1980–1990 to 2000–2010

This image conveys a great deal of information–but what do your students need to know? Context is key.

Be Brief

Related to context, it is generally advised to keep alt-text descriptions as brief as possible. The National Center for Accessible Media (NCAM) points out that if the surrounding text conveys the same information that readers are expected to take from the image, then adding a detailed description of the image would be redundant.

Data First

Focus on the data or information, and not the actual appearance of the image. For example, compare the following two alt-text descriptions of the above map.

This image shows three maps of the United States. The first map covers 1980 to 1990, the second 1990 to 2000, and the last covers 2000 to 2010. Dark green states saw a percent change in population of 25% or more, green states saw a percent change in population of 10% to 24.9%, light green states saw a percent change in population of 0% to 9.9%, and purple states saw a percent change in population of less than 0%.

This image shows three maps of the United States. The first map covers 1980 to 1990, the second 1990 to 2000, and the last covers 2000 to 2010. States of note are California’s decline from over 25% growth from 1980 to 1990 to growth of zero to 9.9% in 2010, Michigan’s decline into negative growth in 2010, Washington D.C.’s positive growth for the first time in 2010, and Texas’s consistent population growth (in the 10 to 24.9% range from 1980 to 2010).

Both sets of alt-text describe the image. However, the second one clearly works as a substitute for the image and conveys important information, while the first could not be understood without being able to see the image itself.

Be Clear

Be as clear as possible when describing the image. If a student has to listen to a description multiple times to understand it, then the overall goal of accessibility has not been met. Some ways to increase clarity include using clear, simple language; converting flowcharts and process diagrams into nested lists; using captions and labels on tables; and taking a linear, drill-down approach to the information. NCAM offers many examples of how to write and structure alt-text for these types of images on their website.

Give Students Control

By using headings, captions, and clearly labeled links, you can give blind and low-vision students more control over what information they receive and when. Headings and captions that provide a clear title for the image are a quick way for students to get an idea of what the image is. This gives them the option of listening to or reading the full alt-text description, or to skip over it if they decide they don’t need it. Similarly, for longer descriptions that are linked on a separate page, make sure that the link leading to the long description gives a similarly clear preview of what students will be reading. For example, which seems more useful?

Click here for image description.

or

Bulleted list of population map listing change over time state-by-state.  

Students may feel they do not need such a detailed description of the map and opt to skip the long description–or at the very least, they will be prepared for the lengthy list that awaits them on the other side of the link.

Think Outside the Image

One piece of advice that I often give faculty struggling with alt-text is to imagine how they would convey the information in the image to students if the image weren’t an option. Imagine that you could only communicate via text. How would you share the information with your students? What would you need to say? If you start there, you’re on the right path towards writing good, useful alt-text for your students.