Free Canvas resources that combine accessibility and sustainability!

I started scheduling posts for my Instagram travel account because otherwise I never remember to post, and I might start doing that here, too, because I've been working on a lot of things and then never sharing them. 

I gave a conference presentation this past weekend for my state's language association entitled Building Systems for Sustainability (you can check it out here if you're interested).  I chose that topic because the last two years have been overwhelming for me, despite coming up on 30 years teaching (I started in 1999) and having a lot of materials developed. Last year in particular was so exhausting that it pushed me to explore new tools to try to make it easier to stay caught up. In the interest of actually publishing this post, I'm going to keep this short and try to do a series of posts talking about some of the different things I've been working on.

For today, let's talk about the Canvas homepage. At a workshop a few years ago, I saw one with buttons and thought that I'd like to make a Canvas homepage with buttons because it would be easier for my students to navigate. So I googled to figure out how to do that, found an online button generator, and generated 30ish buttons to link to each module in Canvas (10 evergreen modules and 20 weekly modules). 

In the spring semester, I realized my problem: I put dates on all of my module buttons, so I would need to generate new buttons and re-link them to all of the Canvas modules (20 images x 4 classes) every semester forever or get rid of the dates on the module buttons. I didn't care for either of those options. The first one would have taken way too long and used time that I didn't have, and the second one would have made my course harder to navigate. After my epiphany with the accordion menus (see my previous post), I realized I could probably do the same thing with buttons. So I took the HTML from my existing homepage and a screenshot, gave them to ChatGPT, and asked it to generate a code-based page that used HTML buttons instead of image buttons. Once again, it took a few rounds to get what I wanted, but here's the before and after:

Before

      

After

Admittedly, the image-based buttons had fancier features, like gradient coloring, that I couldn't easily reproduce with HTML. But the wonderful thing about my simpler buttons is that I can edit the module dates directly on the homepage instead of creating 20 new buttons every semester and re-linking them to my weekly modules. Better yet, I can copy the code, paste it into ChatGPT, provide the calendar for the semester, and have it update the dates for me.

I originally wanted colored buttons, but I had trouble finding colors I liked that provided enough contrast for the text to pass the accessibility checker. My solution was to use colored outlines around plain white buttons with black text. I still get the colors I want without sacrificing readability.

Does it look as nice as the fancy Canva graphics that you can buy on TPT? Clearly not. But it has some serious advantages: 

• I can edit right in the homepage without creating and uploading new images.
• It takes about 20 minutes to update dates on all of the module buttons if I type them out, and about 5 minutes if I give ChatGPT the code and dates and have it do it for me.
• For accessibility, this is a game-changer. Since the only image on my page is the banner, I don't have to spend tons of time tagging graphics as decorative or adding alt text. 
• I was using an invisible table to organize my image-based buttons, which can create accessibility problems for screen-reader users. The code-based formatting is responsive so if a screen is larger, there will be 3 buttons in one row, but if the screen is small it will reduce to one button per row. In addition to being accessible to screen readers, this is a huge advantage for everyone who uses my Canvas course because with my table-based layout, the text on the module buttons became so small that it was illegible on a a smaller screen because it always had the homepage laid out in a table grid.

As with my accordion menus, I've shared this homepage in Canvas Commons, as well as a Christmas-themed version. You can find it by clicking here or searching for me (Anita Saalfeld) in Canvas Commons. My goal is to continue to share my materials on a semi-regular basis, but since my latest hobby is apparently picking up new roles that require more executive function, we'll see how that goes. 😆