Learn your responsibility in determining an image’s purpose to ensure a quality user experience for those using screen readers. Presented by Laurie Berry, Laine Amoureux, and Sukha with A11y Idaho.<\/p>\n\n\n\n
Webinar Runtime: 49:33<\/p>\n\n\n\n
If an image is just “eye candy<\/strong>” (visual styling), mark it as decorative (alt=””) to prevent screen readers from announcing unnecessary content.<\/p>\n\n\n\n Alt text is non-navigable (240-character limit is common). Overly long alt text is disruptive; a screen reader user advised: “less equals more.”<\/p>\n\n\n\n Do not <\/strong>use screenshots or images of text (e.g., infographics, org charts). This is inaccessible and must be corrected.<\/p>\n\n\n\n This training session discusses best practices for providing text alternatives for non-text content, grounded in Web Content Accessibility Guidelines (WCAG) 1.1.1 (text alternatives for non-text content) and 1.4.5 (avoiding images of text). <\/p>\n\n\n\n The core focus is on how content creators must take responsibility for determining an image’s purpose to ensure a quality user experience for those using screen readers.<\/p>\n\n\n\n Alt text is non-navigable and should be concise and objective<\/strong> (240 characters is often cited as a common limit). Overly long or repetitive alt text (e.g., listing all icons on a page) forces users to listen to unnecessary content, causing a poor experience. The consensus from a screen reader user is: “less equals more<\/strong>.”<\/p>\n\n\n\n Content creators must evaluate if an image is informative<\/strong> (conveys critical content) or decorative<\/strong> (visual styling\/eye candy). Decorative images should be marked with null alt text ( If an image requires more than 240 characters of description (e.g., complex data or detailed artistic images), the full description should be placed in a caption<\/strong> underneath the image. This “workaround” allows all users to access the full context without disrupting screen reader flow.<\/p>\n\n\n\n Images that contain text (like charts or inspirational quotes) should be avoided unless the visual style is essential (like a logo). The ideal solution is to convert the image text into live, semantic text<\/strong> (e.g., placing the chart data into a proper table<\/strong> with table headers) and marking the visual image as decorative.<\/p>\n\n\n\n Tools like JAWS<\/strong> or NVDA<\/strong> (screen readers) should be used to test images. Generative AI (e.g., ChatGPT)<\/strong> can be used as a starting point to create initial, objective descriptions for complex images (like charts or cosmic photos) before an author edits the text for conciseness and context.<\/p>\n\n\n\n Laurie Berry:<\/strong> For today and as I mentioned, welcome to the first guided training for Ally Idaho<\/sup>. And today’s topic is on images<\/sup>. And Sukha<\/strong>, myself, and our other person who is unable to join (Laine<\/strong>) \u2014 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<\/sup>.<\/p>\n\n\n\n And a brief introduction on Laine<\/strong>. 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<\/sup>. So this is a little bit about Laine<\/sup>. 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<\/sup>.<\/p>\n\n\n\n And a little bit about me, as I mentioned, I’m an instructional designer, but I’m also really an accessibility advocate<\/strong> in the roles that I’ve had, and a creative collaborator<\/strong><\/sup>. So trying to find ways to think through what the best possible way to do something is, or to design something<\/sup>. Some of my strengths are that I bring -that I have- online course and web design knowledge, some user experience<\/strong> 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<\/sup>.<\/p>\n\n\n\n And Sukha<\/strong>, I know you introduced yourself briefly, but let’s just for the record<\/sup>.<\/p>\n\n\n\n Sukha Worob:<\/strong> I’m Sukha<\/sup>. 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<\/sup>. I’m an artist and educator, dad and a husband<\/sup>. 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<\/sup>.<\/p>\n\n\n\n My background? I came to accessibility from a very winding path<\/sup>. Started out with In Home supports way back when I was at the tail end of high school<\/sup>. 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<\/strong> 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<\/strong><\/sup>.<\/p>\n\n\n\n So that was a spot where it really became apparent to me that when we designed for accessibility, we’re really designing for everybody<\/strong><\/sup>. And I always started my graphic design classes with the discussion on the redesign from an architectural standpoint of Gallaudet University<\/strong>, which is a wonderful story<\/sup>. A podcast called 99% Invisible<\/em> 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<\/sup>.<\/p>\n\n\n\n So that’s the way that I come at it<\/sup>. 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<\/strong><\/sup>.<\/p>\n\n\n\n Laurie Berry:<\/strong> Thanks for sharing Sukha<\/sup>. 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<\/sup>. And these are all grounded in the Web Consortium accessibility guidelines<\/strong> that we have<\/sup>. And these fall under guidelines 1.1.1<\/strong> and 1.4.5<\/strong> which are ensuring that web content is accessible to everyone with disabilities<\/sup>.<\/p>\n\n\n\n For image evaluation<\/strong>, all images to evaluate use a tool such as JAWS or NVDA, a screen reader<\/strong> to locate the image on a page and determine whether or not it’s meaningful<\/strong><\/sup>. Or is it simply visual, like decorative<\/strong>?<\/sup>. In other words, like eye candy<\/strong>– something that’s really just there for appearance only, but doesn’t add any contextual context around it<\/sup>.<\/p>\n\n\n\n If the image is a CAPTCHA<\/strong>\u2014we want to make sure that an alternate form is available<\/strong><\/sup>.<\/p>\n\n\n\n If it’s determined that an image is just decorative<\/strong>, we can either put “as decorative<\/strong>” 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)<\/strong>, and so it won’t announce to a screen reader that there is an image there<\/sup>.<\/p>\n\n\n\n Sukha Worob:<\/strong> That point I think is a big part of what we’re going to talk about<\/sup>. 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<\/strong><\/sup>. One of the things that I think about really consistently is how much responsibility we have as content creators<\/strong><\/sup>. Because we’re making choices for people about… how much of the description, and essentially forcing people into listening to that<\/strong><\/sup>.<\/p>\n\n\n\n Mike:<\/strong> The description there that Laine gave… was actually developed using AI<\/strong><\/sup>. I believe Laine used Chat GPT<\/strong> to develop that description for that<\/sup>.<\/p>\n\n\n\n Sukha Worob:<\/strong> Yeah, and I think that’s interesting to know that background Mike<\/sup>. I have been using Chat GPT<\/strong> and a little bit of Gemini<\/strong> and a little bit of Copilot<\/strong> specifically for- I get a lot of documents that have charts<\/strong> in there<\/sup>. An alt text of “chart of ABC data<\/strong>” is a perfect example of where compliance versus user experience versus context<\/strong> really kind of mash together<\/sup>. Knowing that there’s a chart there of ABC data gives me absolutely nothing<\/strong><\/sup>.<\/p>\n\n\n\n Laurie Berry:<\/strong> It’s characters<\/strong>, I believe<\/sup>. Sometimes we’re limited by the number of characters that we can actually input into the alt text<\/sup>. What I might do if I want a longer description is I would put it in the caption underneath the image<\/strong><\/sup>. I know Canvas LMS<\/strong>, it does really hold everyone to that character limit<\/strong><\/sup>.<\/p>\n\n\n\n Sukha Worob:<\/strong> Alt text is non navigable by heading<\/strong><\/sup>. If you’re alt text is significantly long, it repeats the word image<\/strong> as it goes through, so you get this kind of disruption<\/strong><\/sup>. I have a pretty minimalist approach to alt text<\/strong>… I probably mark more things decorative<\/strong> than a lot of other people feel comfortable with<\/sup>.<\/p>\n\n\n\n Mike Gibson (via chat):<\/strong> As a screen reader user, my personal preference is less equals more on image descriptions<\/strong><\/sup>.<\/p>\n\n\n\n Laurie Berry:<\/strong> I just wanted to share a second example -and this kind of portrays back over to the decorative versus an informative image<\/strong><\/sup>.<\/p>\n\n\n\n Sukha Worob:<\/strong> 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”<\/strong><\/sup>. 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<\/strong><\/sup>. However, directly after not hearing that an image is there, somebody using a screen reader is going to hear “image source, Planet Green<\/strong>“<\/sup>.<\/p>\n\n\n\n Sukha Worob:<\/strong> (Speaking about a complex infographic)<\/em> The alt text was: “young girl with a camera<\/strong>“<\/sup>. The context in this training doesn’t rely on that image at all<\/strong><\/sup>.<\/p>\n\n\n\n Sean:<\/strong> I’m curious about the fact that there’s like this- I’m going to call it a dangling caption<\/sup>. 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? <\/sup><\/p>\n\n\n\n Sukha Worob:<\/strong> Programmatically, when you’re in a PDF, you can absolutely mark something specifically as a caption<\/strong><\/sup>.<\/p>\n\n\n\n Sean:<\/strong> 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- <\/sup><\/p>\n\n\n\n Sukha Worob:<\/strong> Absolutely, there’s no context<\/strong><\/sup>.<\/p>\n\n\n\n Sukha Worob:<\/strong> (Speaking about the authoring tool Rise)<\/em> If the default is left and this little checkbox is “set to enable zoom image on click<\/strong>,” what you hear is all of the text content on the page, and then nothing about an image<\/sup>. So you just hear the text content, and then you hear Alt Text Length – Less is More<\/h3>\n\n\n\n
Images of Text – WCAG 1.4.5: Avoid<\/h3>\n\n\n\n
\n\n\n\nSummary and Annotated Outline<\/h2>\n\n\n\n
Images and Alt Text<\/h3>\n\n\n\n
Key Takeaways<\/h3>\n\n\n\n
Alt Text Purpose and Length<\/h4>\n\n\n\n
Decorative vs. Informative<\/h4>\n\n\n\n
alt=\"\"<\/code> in HTML or “as decorative” in Word\/PPT) to prevent screen readers from announcing them.<\/p>\n\n\n\nWorkarounds for Detail<\/h4>\n\n\n\n
Images of Text<\/h4>\n\n\n\n
Tools and AI<\/h4>\n\n\n\n
Want to jump to a specific section of the video? Here’s the Annotated Outline<\/summary>\n
\n
\n\n\n\nFull Text Transcript<\/h2>\n\n\n\n
Expand to access the full text transcript<\/summary>\n
\n
\n
\n
\n
\n
\n
\n\n\n\nAddressing Complex Graphics and Images of Text<\/h4>\n\n\n\n
\n
\n