Images and Alt Text / A11y Idaho

1. Introductions and WCAG Framework (0:00-9:18)
2. Alt Text Detail and Workarounds (10:19-24:00)
3. Decorative vs. Informative Examples (24:37-27:37)
4. Complex Images and Images with Text (27:37-48:27)

Laurie Berry: For today and as I mentioned, welcome to the first guided training for Ally Idaho. And today’s topic is on images. And Sukha, myself, and our other person who is unable to join (Laine) — she and I are all, or we all, have some examples of images that we’ve encountered in our work and, uh, kind of our thought process as we take to- to think these through.

And a brief introduction on Laine. She is a mother, a wife, a certified professional in web accessibility, a disability advocate and for the blind, and she- her strengths are that she is an activator, an ideator, and is adaptable and strategic and restorative. So this is a little bit about Laine. She’s unfortunately unable to join us for today, but she is another part of our group that we work together with for these Ally Idaho components or offerings.

And a little bit about me, as I mentioned, I’m an instructional designer, but I’m also really an accessibility advocate in the roles that I’ve had, and a creative collaborator. So trying to find ways to think through what the best possible way to do something is, or to design something. Some of my strengths are that I bring -that I have- online course and web design knowledge, some user experience knowledge I bring into it as well, trying to think through the best experience for the user of all users, and trying to take a learner centered design approach in the work that I do.

And Sukha, I know you introduced yourself briefly, but let’s just for the record.

Sukha Worob: I’m Sukha. This- the image on screen is me a number of years ago with a lot less gray hair in front of a piece of artwork that’s part of a series that I completed years ago, I’m still working through. I’m an artist and educator, dad and a husband. Strengths, I would say memorizing shortcuts and recently killing sourdough starter, generally baking sourdough, but I’ve been doing a lot more killing than baking recently.

My background? I came to accessibility from a very winding path. Started out with In Home supports way back when I was at the tail end of high school. And then it really kind of came to bear when I was teaching graphic design at the high school in Bozeman, and I started noticing a lot of where universal design really kind of becomes a reality, especially during Covid, I was noticing that I had two students that required captioning for videos, so I was captioning all of my videos, and noticing that 99% of my students were using the captions.

So that was a spot where it really became apparent to me that when we designed for accessibility, we’re really designing for everybody. And I always started my graphic design classes with the discussion on the redesign from an architectural standpoint of Gallaudet University, which is a wonderful story. A podcast called 99% Invisible goes over that and really discusses how, you know, when they design specifically for that population at Gallaudet University, how they found that the design actually provided a really wonderful space for everybody.

So that’s the way that I come at it. Images, specifically, I am an artist, and so I have a vested interest in images and the way we think about and interpret images, and that’s a lot what I think about when I am generating alt text.

Laurie Berry: Thanks for sharing Sukha. And we just wanted to provide some guidance, or where the guidelines come in for some of the the work that we’re discussing today on images. And these are all grounded in the Web Consortium accessibility guidelines that we have. And these fall under guidelines 1.1.1 and 1.4.5 which are ensuring that web content is accessible to everyone with disabilities.

• Guideline 1.1.1 requires that all non-text, like images, videos and audio all have a text alternative, or what we might call alt text, or captions or transcripts.
• Guideline 1.4.5 says that the images of text should be avoided unless the visual appearance is essential, like a logo.

For image evaluation, all images to evaluate use a tool such as JAWS or NVDA, a screen reader to locate the image on a page and determine whether or not it’s meaningful. Or is it simply visual, like decorative?. In other words, like eye candy– something that’s really just there for appearance only, but doesn’t add any contextual context around it.

If the image is a CAPTCHA—we want to make sure that an alternate form is available.

If it’s determined that an image is just decorative, we can either put “as decorative” in the box (like in a Word document) or if you’re using HTML, you can just leave the quotes as closed (null alt text), and so it won’t announce to a screen reader that there is an image there.

Sukha Worob: That point I think is a big part of what we’re going to talk about. And I’m sad about not having Laine here because, you know, Laine has lived experience of navigating web pages and documents that provide too much and not enough alt text. One of the things that I think about really consistently is how much responsibility we have as content creators. Because we’re making choices for people about… how much of the description, and essentially forcing people into listening to that.

• (Discussing Laine’s example of a cat image) The short description is: “Two cats cuddle in a cat bed“. The moderate detailed description, in my mind, is significant detail.
• I’m reminded of NASA and some of the descriptions that NASA was writing for the images that were coming in from some of their newer telescope images… they are incredibly beautifully written.

Mike: The description there that Laine gave… was actually developed using AI. I believe Laine used Chat GPT to develop that description for that.

Sukha Worob: Yeah, and I think that’s interesting to know that background Mike. I have been using Chat GPT and a little bit of Gemini and a little bit of Copilot specifically for- I get a lot of documents that have charts in there. An alt text of “chart of ABC data” is a perfect example of where compliance versus user experience versus context really kind of mash together. Knowing that there’s a chart there of ABC data gives me absolutely nothing.

• I have 240 characters in my head for the length of alt text.

Laurie Berry: It’s characters, I believe. Sometimes we’re limited by the number of characters that we can actually input into the alt text. What I might do if I want a longer description is I would put it in the caption underneath the image. I know Canvas LMS, it does really hold everyone to that character limit.

Sukha Worob: Alt text is non navigable by heading. If you’re alt text is significantly long, it repeats the word image as it goes through, so you get this kind of disruption. I have a pretty minimalist approach to alt text… I probably mark more things decorative than a lot of other people feel comfortable with.

• For generative AI, I initially got a long description, and I followed that up by saying: “can you please make the content more objective, more succinct, and can you set it to read at a fifth grade reading level?“.
• When describing charts, the best practice is to set up the tags so that they are in a table format with table headers and data cells. The end user gets a data table association which gives them the exact same information.

Mike Gibson (via chat): As a screen reader user, my personal preference is less equals more on image descriptions.

Laurie Berry: I just wanted to share a second example -and this kind of portrays back over to the decorative versus an informative image.

• The example shown (a picture of someone kneeling in soil next to descriptive text) was determined to be decorative because it is identified and described in the surrounding text.

Sukha Worob: This one has an interesting thing, though, that I struggle with… the image is marked as decorative, but directly underneath the image there’s a caption that says “image source”. This causes some issues because we’ve marked the images decorative, so someone using a screen reader is not going to know that there’s an image there. However, directly after not hearing that an image is there, somebody using a screen reader is going to hear “image source, Planet Green“.

• I tend towards, you know- a lot of textbooks will say “Image 1.1“. In those situations… the alt text that I will give the image is “Image 1.1: description to follow“.

Addressing Complex Graphics and Images of Text

Sukha Worob: (Speaking about a complex infographic) The alt text was: “young girl with a camera“. The context in this training doesn’t rely on that image at all.

• The previous guidance was: “If there’s an image, it needs alt text”. And then the nuance comes in: is it a decorative image or not?
• The biggest question when I am remediating documents is cognitive load.

Sean: I’m curious about the fact that there’s like this- I’m going to call it a dangling caption. What I’m really wondering is: if I caption something in, say Word… how does a screen reader- does it know that that’s a caption for the image?

Sukha Worob: Programmatically, when you’re in a PDF, you can absolutely mark something specifically as a caption.

• The downside for that is sometimes it can provide a lot of extra content on the page.

Sean: What I’m looking at right here suggests that if the image doesn’t- if there’s no alt text, and nothing gets said about the image, well, now there’s just this young girl with a camera that’s kind of hanging-

Sukha Worob: Absolutely, there’s no context.

Sukha Worob: (Speaking about the authoring tool Rise) If the default is left and this little checkbox is “set to enable zoom image on click,” what you hear is all of the text content on the page, and then nothing about an image. So you just hear the text content, and then you hear zoom image. Somebody who’s purely navigating that with the screen reader is going to hear ‘zoom image’ without knowing that there’s any image.

Solution for Images of Text: I will crop this image so that it’s just the image of the frog and the toad. Likely that will get marked as decorative. And then the text that is in there will get set as probably a heading level two… and then the text that’s underneath there will get set as live text. That work is well worthwhile to take and just mark that image as decorative and provide the text in there.

Final Example (Image of Text): This is an image of a mouse and a frog playing in a sandcastle. The alt text for this image was super long. The reason the alt text was this long was because all of that text was flattened in the image.