Webinar Video | Text Alternatives for Graphs & Other Complex Images

Alright.

So hi everyone, I’m Marc De Jesus I am a Digital Accessibility Specialist here at Accessible Web.

Thank you all for joining today’s webinar on Text Alternatives for Graphs and Other Complex Images.

Today, we will be focusing primarily on writing image descriptions for complex images and not so much on the code implementation or strategies for accomplishing image descriptions.

So just a quick overview of text alternatives a text alternative or alt text is a textual description that provides the essential information conveyed by visual content or non-text elements such as images or videos.

Text is considered as the most flexible form of web content because text can be converted into other senses. There are tools individuals can use to resize text making it adaptable for users with different visual needs.

It can be magnified or changed to different fonts without distorting the content.

Additionally, changing the color of the text can be done to meet appropriate contrast to view the text.

Text is also compatible with assistive technologies for instance screen readers which render text and read it aloud converting it into audio.

In terms of user impact, alt text is essential for people who are blind or have low vision and rely on screen readers.

However, alternative text can help users with cognitive disabilities who may struggle to interpret complex visuals.

But it is also useful for individuals who may want or need additional support in understanding content so text alternatives are truly beneficial for all.

So what is considered as a complex image then?

Complex images carry a significant amount of information far more than can be expressed in a brief phrase

or sentence.

So, in this case, this could be a graph, a map, or diagrams.

When writing a good image description, we want to try our best to use plain language, meaning try to keep image description short and simple while conveying the meaning and significant details of the image.

Good image descriptions should be objective and neutral.

We want to stick with factual descriptions rather than interpretations or subjective opinions unless the purpose is to convey a particular perspective.

You don’t really need to include every possible detail of an image or of image.

You want to aim to keep content concise or comprehensive. So while we do want to be brief, we must not leave out important information.

Avoid using overly technical terms that can confuse users, and steer clear of lengthy, repetitive descriptions as these may be challenging to digest.

Focus on the key details ensuring content of that leads to understanding without including unnecessary information.

Some key considerations for complex images are first and foremost, what is the image intended to convey?

It is important to understand the message, data, or concept that the image is communicating before crafting out a text alternative.

Following this, you want to think about, what type of format must convey the same information.

Depending on the complexity of the image, there are different ways to present the text alternative.

For simple images, a brief description of only one or two sentences would suffice.

You may need something more structured, so in that case, something like list or numbered list, which helps break down information into digestible parts, or if you want information in a particular order. In some cases, one or more paragraphs might be the best way to describe content that contains a lot of detail that cannot be described in a couple of sentences or chronologically.

Once you determine the format, we want to consider how the text alternatives will be presented.

For simple images again, the description can be included as an alt attribute.

We should only try to use the alt attribute when we want to write up a very, very short description.

You may want to place the text on the same page of the image, allowing all users to access the description without navigating away, but also place the content on a different page and provide a text link to guide users to a more detailed description.

All these methods for presenting alternative images are conforming, so we should focus on choosing the approach that offers the best user experience.

Getting into some examples here, so we’re going to start with the graph.

So on this slide, we have a screenshot that was taken from our ramp platform of a line graph having a trend of issues decreasing over time.

This graph shows the amount of violations over the course of four days, and there are also four lines in the graph representing the different severity levels.

So what is this graph intended to convey? This graph aims to illustrate the specific data points and changes over time.

They want you to understand the trend of what’s happening with the accessibility violations on the page from June 10, 2024 to june 14, 2024.

Is it trending upwards or downwards? To present this complex image, we have a couple of options.

First, we could create a table, or alternatively, we could provide a written summary of trends.

While each approach is effective, each offers different insights, and users may find one more helpful than the other, depending on their respective needs.

A data table provides an alternative way to present complex information that may be more understandable compared to describing every detail of the image.

This screenshot beside the graph is a data table, which is the approach we’ve taken to describe this graph.

The same information displayed in the graph is represented here, but in table format, the initial start to end date, the severity levels, as well as the amount of accessibility violations that are present. There’s also a column for the total amount of violations.

So what you just can pull from this table is that from initial start date of June 10, 2024 there are a total of 24 violations. And as they grew closer to the end date of june 14, 2024 the amount of total violations decreases to one, meaning that over time, the trend, or the amount of accessibility issues, is decreasing.

The next example we have here is a map, and this map was taken from Google Maps, and it is displaying a walking direction from Calahan Park to Accessible Web office in Vermont.

So what does this map intend to convey?

It is conveying the relative position of the location and a route between locations.

So a common approach for this type of complex image is a list of written instructions, so something like head west on local street, toward Hayward Street, focus on terrace, turn left onto Pine Street, turn right, and continue onto lakeside.

This text alternative of a list of instructions gives you a text version of how to navigate this route in your current location to your desired destination.

There’s also a lot of additional information as well, but it would not be useful to include it in the list of instructions due to cognitive overload.

Our last example we have here is a screenshot of a diagram from ResearchGate.

So it is a diagram on the layout of a basketball half court. And this half court set here is illustrating basketball positions in the half court, and a few locations on the court.

This diagram is intended to tell users the layout of the basketball half court, highlighting specific key areas where players could typically position offense or defense. Some approaches to present this diagram could be as a paragraph of this position and its location on the court, or we could use a bullet list of details.

For example, we could say something like this diagram represents the same basketball half court.

It includes key features such as a three point line forming arc on one side of the court for the other, with a three point line center within the within the cave, or rectangular area underneath the basket.

We choose to take the bullet list route so we could say something like key locations, corner located at the far left of the three point line near the sideline and baseline, the block found on the right side near the basket close to the baseline in the low Coast area.

Since both of these methods are conforming, I think about what will provide the best user experience and which options help users understand the information most effectively.

Lastly, how can we help? So we have a suite of tools that can help with detecting alternative text. However while testing text alternatives for complex images it would be more appropriate to test this manually.

So it is best be best to focus on our consulting and accessibility audits.

Accessibility specialists will be able to assist in testing for complex images and come up with a solution to achieve an appropriate image description.

We also offer VPAT, which would document all non-text content on your pages as conforming to

accessibility standards.

Thank you all for taking time to join us for this webinar. I just want to open up the floor for open discussion.

So if you have any questions or thoughts, please feel free to share them.