cancel
Showing results for 
Search instead for 
Did you mean: 
christopher_phi
Adventurer

Alt Text Behavior

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.

Current Situation

  1. Currently when you add an image to a page using the "Insert/Edit Image" functionality from the Rich Text Editor (RTE) you are given the option to add alt text to the image.
  2. If you do not add an image then Canvas has modified the default behavior of the RTE to put the name of the image in as the alt text.
  3. If you delete the file name from the alt text field that automatically populates then it appears to completely remove the alt attribute from the img tag.

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."

Recommendation/ Discussion

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:

"Autogenerated alt text 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.

Alternatives

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

  1. Leave the alt attribute off. This would then support the option allowed by HTML5 to be able to add
  2. Leave the alt text as blank. Not great as this would give the false impression that the image is decorative.

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 alt attribute altogether, under the assumption that the image is a key part of the content.

See further direction at 4.7.1.1.21 Guidance for markup generators.

What are your thoughts or recommendations on how to handle alt text in Canvas?

14 Replies
harrispa1
Learner

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!

ashleya2
Surveyor

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