Adding alt text to course images

[JoshAllenCC]

We are working on a course template and want to provide faculty with pre-sized banners. Is there a way to add alt text to course images so faculty don't have to do it later? Or is the only way to add alt text through the accessibility checker once you've added it to a page, etc.? 

[Chris_Hofer · Accepted solution]

Hi @JoshAllenCC ...

As far as I know, "alt" text can only be added to images after those images are added to Canvas content pages.  When editing a content page in a course, you can click on the image, and there should be an "Image Options" box that appear.  Select "Image Options", and a slide-out from the right side of the screen will appear.  You can then add a description to the "Alt Text" text box at the top of that slide-out.  Now, if you were developing a template page that had some images/banners on it that everyone would be using, you'd want to make sure that those images within the template page had the appropriate "Alt Text" text filled in...so that anyone who uses that template page doesn't have to fill in the text every time.

I'm actually doing something similar with a course right now using DesignPLUS from Cidi Labs.  I've got some templates in a course I'm re-vamping for an instructor, and a couple of my template pages have common images that are used throughout the course.  So, I made sure that each of the images on the page had "Alt Text" so that I don't have to keep adding it over and over again.

I'm not sure if this completely answers your question, but hopefully it gives you some ideas moving forward.  Sing out if you have any other questions about this...thanks!

[dbrace]

For native Canvas functionality, what @Chris_Hofer described can be found in the  How do I manage alt text and display options for images embedded in the Rich Content Editor? - Inst... guide.

-Doug

[JoshAllenCC]

Thanks for confirming what I thought. Yes, I've added alt text to images we've used in template, but for the additional options that will just be in the course files, I'll just include a document with already-created alt text so they just need to copy/paste. I appreciate the reply.

[Gabriel33]

The default alt text seems to be the image's filename.

So one option may be to make the filename be the desired alt text.
The main issue with that is that the file extension (jpg, svg...) will stay in the alt text unless removed manually (or via a script). Perhaps a custom JavaScript on the account can clear those?

[JoshAllenCC]

That might be an option. Even if the accessibility checker flagged the extension, it's probably easier to delete out the extension than copy/paste from a different document. The downside I could see is that the current name is meant to be a quick descriptor, so the faculty member has an idea of what it is. The alt text is much longer and may be more difficult to understand when just doing a quick glance. Thanks for the thought!

[dbrace]

Something to consider related to this and I quote Northwestern University and a page they have put together at https://sites.northwestern.edu/spsdl/accessibility/alt-text-key-concepts.

Do not leave the file name as the alt text on an image.

By default, Canvas fills in the file name as the alt text when uploading an image. The file name alone is not an acceptable version of alt text. Delete the file name and either enter the correct alt text or mark the image as decorative. Otherwise, Pope Tech will flag it as “suspicious alt text” if you forget to change it when you upload the image.

"Pope Tech" is a third-party tool.

https://canvas.northwestern.edu/courses/1580/pages/pope-tech

https://blog.pope.tech/2022/04/14/canvas-lms-integration-resources

The How do I use the Accessibility Checker in the Rich Content Editor? - Instructure Community - 618238  guide also references this in the top portion.

-Doug

[JoshAllenCC]

Interesting - I hadn't considered that, but great to know. Thank you for sharing!

[Gabriel33]

I did not recommend leaving the alt text as the original file name. I recommended writing in the alt text as the file name, which is very different, the opposite in fact.

What I interpret that guide as saying, is that while something like "banner2023v5b.jpg" may be an acceptable file name in some system, that is not a good alt text, and I am not suggesting the OP do that.
I am recommending instead to have the filename changed to something descriptive before uploading, such as "Main entrance of University with students joyfully walking on a perfect sunny day.jpg".

The ".jpg" at the end is still an issue, but it is much easier to clean it.
PopeTech, which is just a simple script, will likely flag it, but it doesn't flag it if you wrongly write "image of car" instead, and it gives just a basic alert (not an error) to tables posted as images, which is the same level of caution it gives to posting an announcement with a single sentence in it missing a header. So it's decisions on alerts/warnings are not something to be taken as a guide on how to do accessibility.

[dbrace]

@Gabriel33, I may be misunderstanding what you say but whether the file name is the same as the alt text or the alt text is the same as the file name, that ends up having the same outcome (unless manual steps are taken, as I describe). Accessibility checkers check to see if the two are exactly same and if they are, it gets flagged.

I confirmed this by uploading new pictures into a Canvas page.  One file is named "screenshot001.png" and the other file is named "this is a screenshot of my second monitor.png". For both files, I did not change the automatically generated alt text that Canvas provides, which is the name of the file.  The accessibility checker in Canvas flagged both pictures.

For the second flagged "issue", if I manually remove the file extension at the end of the alt text field (in this case, a PNG file) the flagged issue is cleared up because the file name and the alt text are no longer exactly same.

I believe that is what you were talking about (while, at least in my opinion, not as clear) when you said "The ".jpg" at the end is still an issue, but it is much easier to clean it.".

I hope that clears that up for what we were both saying and for anyone else looking for a way to name pictures and deal with alt text.

-Doug