We have noticed that a significant number of the images across our courses do not have alt text. Part of this is a lack of awareness and training on our end, but we have also been looking at whether there might be anything that Canvas could to to better support or encourage alt text when images are added to a course.
Also, a note on screen reader behavior from WebAIM on Designing for Screen Reader Compatibility: "Screen readers ignore images without alternative text and say nothing, but users can set their preferences to read the file name."
I am questioning the default behavior of adding the file name into the alt text, but wanted to get the opinions of others before submitting it as a feature request.
Here is a discussion alt text generated from filename can be harmful for screen reader users regarding a similar issue from Rails that states:
alttext based on filename creates naïve descriptions that can do more harm than good"
The Functional Accessibility Evaluator tool has a ruleset that says:
"The source filename of the image should not be included because generally it is not useful information."
A Wordpress post describing how they used to insert the image title or file name as alt text and how they removed it to improve accessibility:
"The intent of the fallbacks were to ensure each image included alternative text. In practice however, this fallback behavior often resulted in poor user experiences for people using screen readers."
While automatically adding the file name as alt text may sometimes be helpful, it can also be less helpful that doing nothing. In addition, users can generally set their assistive technology to read the file name if that is the desired behavior. However, if the change were made to not automatically insert the file name into the alt text, there is the question of what to do.
I understand that the Canvas is working on adding the option to indicate whether an image is decorative per this issue: Alt Text "Decorative Image" Option in Rich Content Editor.
With that available, I think the best option would be too require the user to either add alt text or indicate the image is decorative. I would recommend this approach and lead to the most accessible content. However, it does put some added work on the content author that would require some discussion.
If that isn't doable, there are a couple of other options for when a user doesn't
The W3C provides some guidance provides some guidance for markup creators when alt text isn't available:
alt attribute to the empty string, under the assumption that the image is a purely decorative image that doesn't add any information but is still specific to the surrounding content, or omit the
altattribute altogether, under the assumption that the image is a key part of the content.
See further direction at 18.104.22.168.21 Guidance for markup generators.
What are your thoughts or recommendations on how to handle alt text in Canvas?
Kind of a related question: I have images throughout the course that I either didn't include Alt text for or put something generic like "banner." As I'm now being told to change the "banner" to the name of the course (it's just extra decorative content) and to add text to the decorative images (e.g., "compass" if I'm using the picture of a compass in part of a discussion of navigation," or "hammer & tools" if I'm using that to set off a Tip), that means I have to go through every single page and make the change.
(And, BTW: I have to do it in HTML as, if I make the change with the Embed Image tool, it messes up the dimensions.)
Is there any way to make the change globally without having to go through every page?
Thanks in Advance!
It's a great point, @christopher_phi . The filename-as-alt-text has always irked me, too, for the reasons you've outlined above. I think there's a misconception in the community that file names will always be descriptive, but frequently, filenames have to perform other functions (like pointing to their location), and they usually aren't long enough to be meaningful descriptions.
A blank alt text would indeed indicate a decorative image, but some images *are* decorative, and it irks some screen reader users to have those read out. Not all users though - so I'm interested that @harrispa1 has been asked to add descriptions of decorative compasses and hammers. I always hide icons unless they have a functional purpose - like a gear might be a button for 'settings', in which case I would put 'click here for settings' rather than 'gear'. I'm not sure that there's a way to change things throughout in Canvas, sadly. If you have a tool like grep you can do it offline, but Canvas has yet to implement any kind of global find+replace. There might be an Idea for that, though?
The Canvas accessibility checker has been an improvement on this area. I wonder if a blank alt text + the accessibility checker would be a good way forward?
Icons usually do serve some purpose though, and that's what should be conveyed in the alt text. Your example of the image of a gear and alt text of "settings" is spot on. I also often use the example of the magnifying glass, which should have alt text like "search" rather than "image of a magnifying glass." So the hammer & tools would be "tool tip." Likewise, I am not a fan of putting the word "banner" as alt text though I know a lot of folks do that. The purpose of the banner image is usually to engage students with the course space, so putting the course name as alt text is a great way to replicate the experience for a non sighted user.
The accessibility checker in the rich text editor will flag images that have file extension for alt text so that is an easy way to correct those. It also picks up empty alt text if the image has not been marked as decorative. If someone has a lot of decorative images on a page, I often ask them to think about their purpose -- are they really necessary for anyone? Maybe they clutter up the page for sighted users?
Totally. If you really wouldn't use an alt text, is it a useful image? I have definitely seen LMS pages get cluttered with stock photos. The only ones where I'm on the fence are, say, photographs for case scenarios. I reckon they humanise our fictional cases and make it easier to empathise. But then, if I were using a screen reader, would I want a description of their face? Maybe a description of their expression, or the emotions conveyed? My dream is for my uni to pay a focus group of screen reader users to answer questions like this.
I would say in the case of images accompanying scenarios, those are not decorative, because as you say they are meant to personalize the text. If the text says "Mary is an adult learner who has never taken online classes before" and the image is of a middle aged woman sitting at a computer with a worried look on her face -- that's the alt text:
"a middle aged woman sits at a computer with a worried look on her face"
The bottom line is that you want to have the non sighted user have the equivalent experience as the sighted one. So if the image serves the purpose to convey empathy for them, it needs alt text to do the same for the non sighted user. 🙂
At University of Maryland, we created this graphic ti help instructors (and web designers/developers) understand basic online accessibility needs. Feel free to use: https://itaccessibility.umd.edu/sites/default/files/AccessibilityHandout2-6-19.pdf