Last spring, UIUC announced that we were moving from Compass2g (Blackboard) to Canvas this academic year.  So, I've been exploring Canvas over the summer and decided to jump in and move my course to Canvas this fall.  My plan is to share tips about developing courses in Canvas along the way.

Since I have to manually move my content, my goals for this semester are to have a paperless lab and the content is also accessible for all students in my lab.  For the latter, I am going to draw from the UDL guidelines and the IT Accessibility 101 course provided by the Division of Disability Resources and Educational Services at Illinois. 

My first course in Canvas will be BIOE415: Biomedical Instrumentation Lab.  I'm organizing each lab into a module with background information and the experiment instructions.  Therefore a lot of my content is getting transferred to pages that are just webpages and you can edit the HTML if you know what you are doing.

My first tip is about how to add figure captions to images on pages in Canvas.  It is easy if you know HTML, but not if you are trying to search for how to do it on Canvas pages.

I converted the introduction material for each lab from a file that needed to be downloaded to a page within Canvas.  There were figures, tables, and equations as you might expect for introductory material for an engineering lab.  I've figured out tables and captions, but I also wanted to add captions and numbers to the figures.  When searching for Canvas + figure + caption you get a lot of well-intentioned hacks like putting the figure into a table without borders.  However, that messes up screen readers. 

Since I have been editing webpages for over 20 years, I'm fairly comfortable with HTML, so I started looking for HTML solutions that are not specific to Canvas since you can edit the HTML for each Canvas page, but not the CSS.  There is a beautiful solution, the figure tag.  I started by using the GUI in Canvas to add my image and alt text (more on this in a later post).  If you use the GUI to insert an image into Canvas, the HTML will look like this:

<p><img src="https://canvas.illinois.edu/courses/13778/files/1847663/preview" alt="Fig.1. Schematic of a LED Circuit. A 3V battery in series with the LED and a 10K&Omega; resistor.  " data-api-endpoint="https://canvas.illinois.edu/api/v1/courses/13778/files/1847663" data-api-returntype="File" /></p>

To take advantage of the figure tag and caption, replace the paragraph (p) tags with the figure tag and add a figure caption with the figcaption tags. Like this:

<figure><img src="https://canvas.illinois.edu/courses/13778/files/1847663/preview" alt="Fig.1. Schematic of a LED Circuit. A 3V battery in series with the LED and a 10K&Omega; resistor.  " data-api-endpoint="https://canvas.illinois.edu/api/v1/courses/13778/files/1847663" data-api-returntype="File" /> 

    <figcaption>Figure 1 - Schematic of a LED Circuit</figcaption>

</figure>

It renders like this:

I plan to continue to share more tips throughout the semester. If you have specific questions about instructional labs and Canvas, reach out on Twitter or my Contact page.