[ARCHIVED] Alt Text Behavior

[christopher_phi]

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?

[Chris_Hofer]

Hi  @christopher_phi ...

If you take a look at this Feature Idea, https://community.canvaslms.com/ideas/5912-images-easier-way-to-add-alt-text" modifiedtitle="true" t..., you'll see that it's received many votes and is already on Instructure's "Product Radar" ... so they are aware of the need to find an easier way to add alt text to images.  I would suggest that you add your comments explaining why this is important to you and/or vote for that idea.

You also linked to https://community.canvaslms.com/ideas/9138-alt-text-decorative-image-option-in-rich-content-editor" ......which is also a Feature Idea that came up in my search results when finding the first link I provided.  Regarding the link you provided, however...as I look at it, it's only been suggested as an idea.  Typically, if Instructure is working on a project/idea, they will mark it with an "In Development" label, and the idea may receive a response from someone at Instructure.  So, I don't know if they are/are not "working on adding the option to indicate whether an image is decorative per this issue".  I would have to defer to the folks at Instructure.

Anyway...take a look at that first link.  It might address some of the things you wrote about above.  Hope this helps!

[christopher_phi]

Thanks  @Chris_Hofer ‌, those links are helpful. I have posted a link to this discussion from that feature idea. 

On the decorative alt text option I've heard that work is happening from an Instructure employee - I will encourage that person to update that feature idea. 

[tbunag]

Another challenge is that many accessibility checkers can only check to "see" if there is alt text, not the quality of the alt text.  I haven't tested any of these against the auto-generated alt text in Canvas yet, but I would love to hear from anyone that has.  How do accessibility checkers handle these?

[christopher_phi]

Great question  @tbunag ‌, I think there is a lot of possibility on evaluating the quality of the alt text, but I'm not aware of any accessibility checkers that are doing that right now. There are some checks that look at whether the alt text is the same as the file name or even those that identify if there is text in the image not present in the alt text. 

[holly_smythe]

We have not migrated to Canvas yet, but will be doing so within the next year.  In our current LMS, we recommended (and they implemented in their editor) that the alt text box be empty - no filename.  However, anyone uploading an image is either required to type text into the "alt text box" or check the "decorative only" checkbox.  File names are NOT alt text.  All images need to have either alt text or "" (for a decorative image).  Canvas can be an excellent LMS if it includes tools that help us with accessibility - because it is the right thing to do and it is the law.

[christopher_phi]

Thanks  @holly_smythe ‌, I love the idea of requiring alt text or indicating "decorative only" checkbox. 

[Hildi_Pardo]

Hi,

I have a different issue.   We are about to finish our first year of using Canvas.  And I have an extremely frustrated World Geography teacher who just found at that students can point at an image on a quiz and get the answer to the question, because Canvas is automatically adding the file name as the alt text.      She's got numerous quizzes with hundreds of questions that include images and she had no idea Canvas was doing this (adding the alt text).    

Given this situation I think it would be better, as stated above, that the file name not be added automatically, but that Canvas require you to type alt text OR select for decorative image.

I don't suppose there is a quick/easy way for her to globally remove the alt text from all her quiz questions now? 

[tbunag]

Do you have the UDOIT tool or another accessibility checker available?  For UDOIT, when I run a check, it catches all the images where the alt text is the file name and prompts me to fix it.  Since it checks an entire course at once, it could allow for fixing all the alt text at one time. 

I'd also suggest faculty not include the answer in file names for images they plan on adding to quizzes and exams, since there may be other ways for students to view the file name, other than through alt text.  It takes more technical knowledge, and I haven't tested it in Canvas, but it is something to consider.

[Hildi_Pardo]

Hi Tara, 

We do not have that UDOIT tool (or other checker, other than the one built-into Canvas on the rich-text-editor).  I'll have to look into this.  It looks like it's free (?)

That is good advice on the naming of the files.  Thank you!

[harrispa1]

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]

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?

[sbj]

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?

[ashleya2]

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.

[sbj]

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