I love using imagery to bring content to life, and I’m so grateful for the plethora of free resources available these days. In this post, I will highlight image tips and resources with considerations not only for aesthetics but also for accessibility and DEISA∞.
Image Tips from @ONE
Watch this Byte-Sized Canvas video from @ONE’s Helen Graves for three tips when using images in Canvas.
Video Summary:
Tip 1 (0:50) – Insert images properly. When adding images to your course, do so via the Rich Content Editor to avoid issues when copying (importing) content to another course.
Tip 2 (1:09) – Be aware of image size. Use a larger size for images that are the focal point of a page. Use a smaller size for images intended to add visual interest only.
Tip 3 (2:00) – Make the image responsive. Pixels are not responsive, so use the HTML editor to use use a percentage of the page instead. BONUS TIP – Add image padding for accessibility. I promise you’ll only need to go in to HTML mode briefly for a couple quick edits.
(NOTE: If using images with a lot of text, such as infographics or graphic organizers, be sure to provide a text-only version for accessibility.)
More Image Accessibility Tips
Add Alternative Text (Alt Text)
Including alternative text for images allows students who use screen readers to hear the instructional purpose of the image. Alt text can vary depending on the context in which an image is used; therefore, the same image can have different alt text in two different courses depending on what the image is meant to convey in each course. Alt text should concisely describe the instructional context. Complex images, such as graphs and charts, that require more than a brief description require more than alt text. See Alt Text for Complex Graphs or Charts and When a Long Image Description is Needed in our Faculty Accessibility Center for more on how to make these types of images accessible. Images may be marked as decorative if they are being used simply for aesthetic purposes.
Check Color Contrast
Sufficient color contrast allows low-vision and colorblind learners to accurately see image information. I like using WebAIM’s Color Contrast Checker, but there are many others out there; some are even built into the tool, like Cidi Labs Design Tools. See Color Checking in Cidi Labs for more on using this color contrast feature.
Where To Find Images
Design & Image Resources
I love free. Don’t you? Our Canvas Faculty Center (CFC) includes a Design Resources for Professors page with Design and Image Resources. Here, you’ll find links to sites with free, high-quality photos, graphics, icons, stickers, and illustrations. As with many free tools, some of these sites have options to upgrade to a paid version or purchase individual images, but they do include images that are 100% free.
(NOTE: Checking color contrast is especially important if using Canva, one of the sites on the Design and Image Resources page, because there is no built-in color contrast checker.)
DEISA-Focused Collections
Because representation matters, I make a concerted effort to look for diverse images when selecting instructional images that include people. Also on the Design Resources for Professors page are links to collections with a DEISA focus. These are super helpful as it can be rather time consuming to find a wide array of diverse images on the standard, free image sites.
(NOTE: DEISA stands for Diversity, Equity, Inclusion, Social Justice, and Anti-Racism and is the Diversity, Equity, and Inclusion (DEI) term used at Mt. SAC.)
Have you used any of these tips or resources? Do you have others to share? Comment below!