Forum Discussion
eLearning Alt Text Help
Hi! Can you help me with something? I've sent a similar message to a few of my instructional designer friends, but thought I'd post it here as well.
I have a question regarding adding alt text to images in eLearnings and other mediums. I cannot seem to find a consistent answer. So, I’m hoping you can help me.
I typically use Articulate Rise for our eLearnings and sometimes Articulate Storyline. I have added alt text to all of our eLearnings/trainings. But I have found a few resources that say how I've have my alt text is incorrect. I cannot seem to find a consistent answer and would prefer not to go back through all of our eLearn ings and update them to find out later the alt text is still incorrect. Here's what I've found:
- Alt text for logos should read: alt="_____ Logo" where others say to just have it read: "_____ Logo", and others say it should read: _____ Logo without quotations. If the logo is added for decorative purposes only then you should leave the alt text blank.
I've watched the alt text webinar available on E-Learning Heroes and it say:
- For decorative images, alt text should be nulled out (e.g., alt="" or ""). The alt text should not be left blank.
Which is the correct way to post alt text for logos?
Also, should alt text read: alt="_______" or just "________" (with the description of the image in between the quotes)?
This shouldn't be this confusing, but I cannot find a consistent rule about this.
Thanks for your help!
Anne
4 Replies
Thank you, JenLynnRusso . This helps a lot! I will make sure my eLearnings' alt text matches what you've indicated above.
Rise
- Decorative: leave alt text field blank
- Alt text: Add phrase in alt text field, no quotes
Storyline
- Decorative: uncheck "Object is visible to accessibility tools"
- Alt text: Check "Object is visible to accessibility tools", and add phrase in Alternative Text field
Thanks again!
Anne
So the phrase "alt=" is HTML code. This is where the webinars you watched are correct: the alt text for an image should not be left blank and the "alt=" tag should either be alt="" or alt="[phrase]"
- alt="" <-- this means the image is purely decorative and the screen reader will not read the alt text back.
Example:
<img src="images/divider-line.png" alt="">- alt="phrase" <-- the phrase here is what you want the screen reader to read back to the learner. Generally, it should be 150 characters or fewer, including spaces
Example:
<img src="images/training-dashboard.png" alt="Training dashboard showing course progress and completion status">In this case, the screen reader will announce "Image: training dashboard showing course progress and completion status."
- No alt text? Your webinar advised against not having alt text in your HTML due to the behavior of the screen reader. Here is what would happen if you had an image without alt text.
Example:
<img src="images/training-dashboard.png">The screen reader would then announce "Image..." And your learner would be confused because it would just end there!
For Rise and Storyline, it's different. You do not include the "alt=" phrase. Here is how you handle alt text for each:
Rise
- Decorative: leave alt text field blank
- Alt text: Add phrase in alt text field, no quotes
Storyline
- Decorative: uncheck "Object is visible to accessibility tools"
- Alt text: Check "Object is visible to accessibility tools", and add phrase in Alternative Text field
Let me know if you'd like me to review anything (make sure to tag me so I get notified), happy to help!
I just use Storyline to automatically generate all alt-text, even if I'm just using Rise, I paste the images into Storyline, then copy the text. I figured the SL generation would be in the correct format.
Thank you, Chris-Hurst . I never thought about using Storyline as a resource like this.
Thanks again!
Anne
