Make Canvas Catalog Accessible

(7)

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: https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc... 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:
260768_pastedImage_2.png 
 
 
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. 
260770_pastedImage_4.png
 
3. The top banner called Open Catalog is considered an image and we aren't suppose to have text for an image: 

260769_pastedImage_3.png

 

🔎 This idea has been archived. While this idea isn't open for comments, it is an important part of Instructure’s idea conversations and development process. Contributions like this are valuable as Instructure prioritizes work on new or existing features.

13 Comments
christopher_phi
Community Champion

Hello  @jsowalsk ‌, 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. 

jsowalsk
Community Champion

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.

Jessica

christopher_phi
Community Champion

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

  1. http://colorsafe.co/ 
  2. Accessible color palette builder 
  3. WebAIM: Color Contrast Checker  
jsowalsk
Community Champion

Wonderful, thank you for your assistance.

helenc
Community Novice

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

https://er.educause.edu/articles/2018/1/accessibility-a-shared-campus-responsibility-best-accomplish...

mark_b_jones
Community Novice

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

christopher_phi
Community Champion

 @jfenton ‌, 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

jfenton
Instructure Alumni
Instructure Alumni

Hi  @christopher_phi ‌! 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. 

christopher_phi
Community Champion

Thanks  @jfenton ‌, 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! 

bromanski
Community Participant

This feature is needed along with documentation on Catalog's accessibility. 

permey
Community Member

There needs to be a way to make the pdfs of the auto-generated certificates of completion be accessible to screenreaders.

#catalogenhancements #catalog enhancements #catalog

kmarengo
Community Participant

permey, I agree!! Accessibility is very important, Alt Text should be allowed for those who need to use a screen readers. This is an area that needs to be identified for compliance with accessibility needs. 

KristinL
Community Team
Community Team
Status changed to: Archived

As Instructure works on the different Catalog components, the team also makes sure that accessibility issues are fixed.