Showing results for 
Search instead for 
Did you mean: 

Make Canvas Catalog Accessible

Make Canvas Catalog Accessible

At our university, we have a web accessibility policy in place for all external/public facing web pages and websites to become accessible. What this means is that the errors for accessibility need to be fixed. As a part of this effort, I am on a mission to have Canvas Catalog become accessible.

We have used a plugin for Chrome called Siteimprove Accessibility Checker: to check our Canvas Catalog website for accessibility. Well, this checker found errors which are out of our control to fix and it is on Instructure's end to fix them. Please vote this up since we know other Canvas Catalog users will have these type of issues.

The errors are:

1. Alt text on course cards and on the upper banner are missing:
2. Color contrast is insufficient for the bottom banner such as the grey/black. The same issue is for the dates on the course cards. 
3. The top banner called Open Catalog is considered an image and we aren't suppose to have text for an image: 


Learner II

Hello‌, thanks for bringing up these issues. Accessibility is very important and my experience has been that Canvas generally appreciates helping them identify areas where improvement is needed. I don't have access to the admin of Catalog, but I have a couple of follow up questions/ thoughts. 

  1. There is a valid argument that accessibility can/should be treated as a bug rather than a feature. I don't think it is bad to call out big ideas like this as a new feature request, but would also recommend that each of these be submitted as as bugs as well to make sure they are seen by the correct people internally. 
  2. From reading this page: How do I add a logo, CSS, JavaScript, or HTML file to customize a catalog?  I get the idea that you can customize the header and footer using images or custom HTML/CSS, is that right? If that is the case is it possible for you to add custom HTML rather than an image for your banner to solve that accessibility issue? 
  3. Related, if the footer can be customized with HTML and CSS then hopefully you could change the colors to have adequate color contrast from your end. 

All that said, there should definitely be the ability to add alt text to the course cards. If I'm misunderstanding how much can be customized from the admin level then I apologize. 

Community Advocate
Community Advocate

Hi Christopher,

Thank you for your thoughts.

To answer your questions:

1. I will also submit this as a bug. I submit this request to my CSM as well. Great idea!

2. In Catalog, you can customize the header and footer with HTML and CSS but it only goes so far and does not work the way it exactly should and that is why Instructure provided the upload image for the banner.

3. We will definitely try this but the hard part is choosing the right color for accessibility and to make it be aesthetically pleasing at the same time. There is not an array of colors to choose from in Catalog.

There are no settings in Catalog to add: alt tags, text size enlarger, and text to speech. These would be great additions as well.


Learner II

Thanks‌, that is helpful to understand. If you are interested, there are some great resources available to help you find accessible color palettes: 

  2. Accessible color palette builder 
  3. WebAIM: Color Contrast Checker  
Community Advocate
Community Advocate

Wonderful, thank you for your assistance.

Community Member

The latest on accessibility complaints in higher education. Sine qua non.

Community Member

We are having to apply for annual ADA compliance exceptions for Catalog.  This will get old quick.

Learner II‌, do you have any update on the current status of accessibility in Catalog and for any accessibility bugs where they fit on your Catalog roadmap


Hi‌! Thanks for you question. We are working to make Catalog more accessible, including an internal audit earlier this year. We've made progress, but we aren't all the way there yet, and we'll continue to make improvements in this area over the coming months. 

Regarding the specific issues that are called out in this post, we do have a ticket created to allow alternate text to be added to images that get uploaded to Catalog. The header and footer can be customized in the settings page, which should allow for sufficient contrast there. 

As always, we really appreciate feedback from the community, especially on such an important topic. 

Learner II

Thanks‌, it is great to hear that you are on top of this and working through those issues. If you could be sure to add those improvements to the release notes as they are made that would be super helpful to track the progress that is being made. Thanks!