\n

Using Alt Text in E-Learning #429: Challenge | Recap

\n

On the surface, writing alt text seems simple enough: Add text to on-screen images to verbally describe what's depicted in an image. Easy enough, right? 

\n

But the more you learn about accessibility guidelines, the more you recognize potential challenges with \"getting it right.\" For example, some terms and concepts that often confuse designers include:

\n

\n
• Functional vs. decorative images
\n
• \"Image of\" or \"Picture of\"
\n
• Captions vs. alt text
\n
• Complex images
\n
• Changing context of visuals
\n
• Limited space
\n

\n

If you're like most course designers, you're on your own accessibility journey and learning incrementally. One of the best ways to learn something is to teach it to others. This holds true whether you have years of experience or you’re just getting started. Tom calls that a 5-minute expert, and that’s what this week’s challenge is all about.

\n

Challenge of the Week

\n

This week, your challenge is to share an instructional example to help course designers learn more about alt text.

\n

Your example can be static or interactive. You can also consider combining this week’s challenge with an earlier challenge topic. I’ll update both recap posts with your entries this week. 

\n

Here are some topics that would work for this week’s challenge:

\n

\n
• Creating Tabs Interactions in E-Learning #401: Challenge | Recap
\n
• Microlearning in Rise 360 #407: Challenge | Recap
\n
• Interactive Video in E-Learning #414: Challenge | Recap
\n
• UsingGlossary Interactions in E-Learning #396: Challenge | Recap
\n
• Interactive Audio in E-Learning #405: Challenge | Recap
\n
• Using Accordion Interactions in E-Learning #403: Challenge | Recap
\n

\n

Upcoming Webinar

\n

Want to learn more about alt text? Check out the webinar Ginger is hosting next week on how to write effective alt text for e-learning. I’ll see if I can also nudge Ginger to reference your examples and include them in her session's resources.

\n

\n

How To Write Alt Text for E-Learning

\n

More Resources

\n

\n
• Storyline 360: Adding Alternate Text for Screen Readers
\n
• Rise 360: How to Add Alternative Text to Images
\n
• All About Accessibility
\n

\n

Share Your E-Learning Work

\n

\n
• Comments: Use the comments section below to link your published example and blog post.
\n
• Forums: Start a new thread and share a link to your published example.
\n
• Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
\n
• Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.
\n

\n

Last Week’s Challenge:

\n

Before you share your tips on alt text, check out the creative ways course designers use cinemagraphs and looping videos in e-learning:

\n

\n

Cinemagraph & Looping Video Examples RECAP #428: Challenge | Recap

\n

New to the E-Learning Challenges?

\n

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

\n

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 

\n

\n

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:  https://bit.ly/ElearningChallengeForm.

\n

Using Alt Text in E-Learning #429: Challenge | Recap

\n

On the surface, writing alt text seems simple enough: Add text to on-screen images to verbally describe what's depicted in an image. Easy enough, right? 

\n

But the more you learn about accessibility guidelines, the more you recognize potential challenges with \"getting it right.\" For example, some terms and concepts that often confuse designers include:

\n

\n
• Functional vs. decorative images
\n
• \"Image of\" or \"Picture of\"
\n
• Captions vs. alt text
\n
• Complex images
\n
• Changing context of visuals
\n
• Limited space
\n

\n

If you're like most course designers, you're on your own accessibility journey and learning incrementally. One of the best ways to learn something is to teach it to others. This holds true whether you have years of experience or you’re just getting started. Tom calls that a 5-minute expert, and that’s what this week’s challenge is all about.

\n

Challenge of the Week

\n

This week, your challenge is to share an instructional example to help course designers learn more about alt text.

\n

Your example can be static or interactive. You can also consider combining this week’s challenge with an earlier challenge topic. I’ll update both recap posts with your entries this week. 

\n

Here are some topics that would work for this week’s challenge:

\n

\n
• Creating Tabs Interactions in E-Learning #401: Challenge | Recap
\n
• Microlearning in Rise 360 #407: Challenge | Recap
\n
• Interactive Video in E-Learning #414: Challenge | Recap
\n
• UsingGlossary Interactions in E-Learning #396: Challenge | Recap
\n
• Interactive Audio in E-Learning #405: Challenge | Recap
\n
• Using Accordion Interactions in E-Learning #403: Challenge | Recap
\n

\n

Upcoming Webinar

\n

Want to learn more about alt text? Check out the webinar Ginger is hosting next week on how to write effective alt text for e-learning. I’ll see if I can also nudge Ginger to reference your examples and include them in her session's resources.

\n

\n

How To Write Alt Text for E-Learning

\n

More Resources

\n

\n
• Storyline 360: Adding Alternate Text for Screen Readers
\n
• Rise 360: How to Add Alternative Text to Images
\n
• All About Accessibility
\n

\n

Share Your E-Learning Work

\n

\n
• Comments: Use the comments section below to link your published example and blog post.
\n
• Forums: Start a new thread and share a link to your published example.
\n
• Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
\n
• Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.
\n

\n

Last Week’s Challenge:

\n

Before you share your tips on alt text, check out the creative ways course designers use cinemagraphs and looping videos in e-learning:

\n

\n

Cinemagraph & Looping Video Examples RECAP #428: Challenge | Recap

\n

New to the E-Learning Challenges?

\n

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

\n

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 

\n

\n

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:  https://bit.ly/ElearningChallengeForm.

I created a new one that is more on point for the actual challenge.

P.O.U.R.
https://360.articulate.com/review/content/c36ee894-53f2-40a1-8e83-48fe0c16b7c2/review

Well, not sure if this is the best example or not, but this is what I feel like is important. I may add text to speech on the slides, but I think I am done for a minute, lol.

https://360.articulate.com/review/content/aee4b5bc-852a-4e11-a796-a42a0ffa20fb/review

Now this challenge makes more sense to me LOL. I love your tabs slider.

Oh thank you! I really enjoyed your crochet video! I love to crochet, too, lol.

Alt Test Quiz--What Alt Text Would You Use?
Demo: https://jodisdemos.s3.amazonaws.com/429+Alt+Text/story.html

I confess I am lazy on writing alt text (and I had to miss Ginger's webinar today, but I'll watch it tomorrow). So I decided to challenge myself and write alt text that did a good job of describing a visual and adding context so the visual is more than \"decorative\". Let me know if you agree/disagree with my quiz answers. Thinking through the alt text examples took me longer than actually developing the slides for this demo.

This is great. Pitch perfect examples and questions. Just used this to facilitate a discussion on Alt Text with my team.

Really liked this example. Just one think (and it might just be me), but from a user point of view, I found the red continue buttons making me think I got it wrong.

Thank you for taking the time to give me that feedback. I was so focused on the text I wasn't thinking about color communication.

Bravo for this demo, Jodi. You've inspired me to do my own.

I followed the link to WCAG, very interesting. But, in my opinion, the image + alt text example is curiously not very relevant. According to the site, the best alt text should be: \"A distraught man hugs his daughter in front of the crumbling walls and scattered debris of their home destroyed by a tornado\". I didn't SEE it was a father and daughter, I can't SEE it. I didn't see that it was after a tornado, I didn't see that it was a tornado, I can't see it (it could have been an earthquake, a bombing, destruction for eviction, etc). So, in this example, there's a lot more information (contextual and especially emotional) in the alt text than in the image. Is it a good alt text? Does anyone have an opinion?

In that WCAG example it looks like the visual came with the context of a written news story in USA Today about a tornado outbreak. Perhaps that allows the alt text to refer to things we cannot see.

Sometimes, images may be decorative, but what if they add a visual tone? This is my alt text tip:

https://360.articulate.com/review/content/ef3ba993-306c-4452-86fb-4e527d89ef8a/review

For this challenge, I decided to make a video about how to add alt text to a Storyline project. Coworkers recently asked me about the accessibility of Storyline, so hopefully it can be a resource to others as well.
https://youtu.be/7XgP1NTGn7g

This is such great information!

Hello!

In a recent discussion with my team on this topic, we thought it was sad how Alt Text isn't widely used on social media, and how this could be improved.

But writing descriptive Alt Text for memes is tricky! Does over-explaining a meme kill the joke? Why should those who rely on Alt Text be left out?

MEME-INGFUL INTERACTIONS
https://bit.ly/elhc429

I think you took on a big challenge with this one! How do you describe something like a meme that is intended as an inside joke and maintain the humor of it? I'm not a big social media person so when I see memes I'm usually clueless to their meanings. You really got me thinking with this one. Thanks for sharing it!

Thanks Jodi. It's a tricky one, for sure. I'm not certain describing a meme with a robotic-sounding screen reader can ever have the same immediacy and impact as a purely visual meme. I listen to a lot of radio comedy, so I firmly believe humour can be achieved without visuals, though.

There have been attempts to subvert the Alt Text format for humour, using it to deliver a punchline. But this also relies on the visual setting up the joke. Understandably, this has drawn criticism for accessibility advocates.

https://www.wsj.com/articles/misuse-of-twitters-alt-text-feature-draws-criticism-from-accessibility-advocates-11657879200

\"Woman yelling at cat\" is one of my favorite memes. This was a really interesting concept to think about in context of elearning. When I think about times Ive most likely seen memes in training, its been at the beginning as a sort of icebreaker/introduction to a topic. im not sure if over explaining the meme would really add to the excitement of beginning the content, but im not sure what could replace it either, especially since a screen reader cant have a \"sarcastic tone\".

Thanks Hannah. It's true that a joke stops being funny if you have to explain it. As such, are memes impossible to alt text without killing the joke? I had a similar debate over on LinkedIn.

At a fundamental level, I think it's sad that visually impaired people may be excluded from enjoying memes. But as Jodi points out, they're often 'inside jokes' anyway, which exclude some people by design. You either get them, or you don't, often based on your familiarity with the pop culture they reference.

But I do think it would be entirely possible for screen readers to pick up a '[sarc]' tag in the future, and adjust the tone of its delivery accordingly. Just as WellSaid offers narration, promo and conversational tones.

So who knows? I hope memes can become more inclusive in future.

Popping in with a quick draft this morning regarding Alt Text in a context I normally do not see covered: Alt Text (and caption pairings) for one image used in three different contexts. I'm evoking my journalism training from 20+ years ago for this one.

If time allows, I'd love to provide some best practices and learnings about the other topics I listed, too. If not, I hope this suffices to help someone understand how Alt Text and captions can work together.

Rise Demo: https://360.articulate.com/review/content/aec4a622-6b64-435c-88ec-b4881cb5d399/review

Very interesting first part of your Rise, around different descriptions of the same image, Yvonne. I look forward to the other two parts.

These are really helpful examples of context affecting how we write Alt Text. Well done!

This is really informative, Yvonne. I like your tabs about context

Hello....I have recorded a screencast and used NVDA screen reader to demonstrate a simple example of ALT text: file: https://www.ashitandon.com//Storyline%20Files//ELH429/story.html

Bonjour Heroes.
I'm proposing a little demo to show, in a visual way, what's behind the images or shapes on the screen (hint: alt text). Each parts of the following 3 slides are mobile and reveal whether alt text is necessary, or not.
https://360.articulate.com/review/content/53926ca7-299a-4605-b79b-b04d7e76818e/review

This was a fun way to discover the alt text. I like how you included when no alt text was needed and the reasons why as well.

OK. All our efforts to make our customers' projects more accessible, with alt text, are remarkable. But has anyone ever studied their own e-learning module with a screen reader (like NVDA) in front of a really and totally black screen? I've done it a few times, and I confess I was completely lost after 5 minutes each time. So I do my best (with alt text and focus order, or with adapting overly complex interactive screens), but I'm never sure of the result. I haven't had any complaints either, but... Screen readers are so complex to set up (plus, the settings are different for each user). A complete black screen is so disturbing for a sighted person, and I'm not used to listening/seeing. I never feel I've done my job to the end. How do you do it?

I've done this too, Thierry, and it's quite a sobering experience.

I think the awful truth is that designing an accessible online learning experience, that meets everyone's needs 100% of the time is next to impossible.

Screen readers feel clunky because we take visuals so much for granted. I'd like to design something completely non-visual from scratch - I'm sure the end product would be a totally different experience, both to build and to use, than what we regularly produce in corporate L&D.

Yes Jonathan. My experience: I once participated in a debriefing on an e-learning module as an “expert capable of providing solutions” (Brrrrr!) for a module presenting problems created by another storyliner. The module had been controlled by a blind person and it was only 95% accessible, so we might as well say 0% according to him if it is not 100%. He was angry. I understand that he felt like he was wasting his time and that the people involved in the project hadn't tried hard enough. But his words were not kind.

I agree--I find using the screen reader disorienting. I sit in front of my computer with my eyes closed to see if I can follow what is happening. I have asked in the community for someone to share an example/file they feel is a good demonstration of what the experience should be, but no one has every taken up my request. I'd like to learn from a good example.

Yes Jodi. This would be a great asset. As I said, I'm not at all sure I have such a file among my accessible projects. There are companies specializing in this field. I must admit that when accessibility requests seem to me to want to respect all the standards in force (while customers do not even know exactly what constraints this represents, including for themselves), I sneak elsewhere.