Inclusive Visual Design
Design With Everyone in Mind
Before we get into the nitty gritty of design work, let's talk accessibility. Clemson instructors have a legal and moral obligation to provide courses that are accessible to everyone, so accessibility should factor into every step of your design process.
But why is it so crucial to consider accessibility during the design process? Why not just make everything accessible at the end, or wait until a student with documented disabilities enrolls in your course? If you've ever attempted to renovate a house (or if you've vicariously experienced the heartbreaks and headaches of home renovation via HGTV), then you've seen how difficult it can be to repair a cracked foundation, replace a faulty plumbing system, or bring all of the electrical wiring up to code. In many ways, retrofitting an existing course to meet accessibility guidelines is like renovating a hastily built house. The builder's shortcuts become the homeowner's headaches--but with course design, you're both the builder and the homeowner. Taking a proactive approach to accessibility during the design process will prevent foundation problems and code violations of the digital variety later on.
Fortunately, just as elevators in multi-story buildings benefit a variety of users, inclusive design practices benefit all learners, not just those with documented disabilities. Indeed, Universal Design for Learning (UDL) principles Links to an external site. aim to create courses that meet the needs of the widest possible spectrum of users.
Please note that because this course focuses exclusively on visual design, this page does not cover the full gamut of accessibility guidelines. For more on accessibility beyond visual design, consult our "down and dirty" guide to accessibility and course design (available in the Resources module for your reference).
Note: It's generally a good idea to present course content in small, digestible "chunks," but for the sake of convenience, we felt it best to include all accessibility-related information on a single page.
Headings
Visual design doesn't only refer to images: it also includes how you organize text. When laying out pages, use short, descriptive headings to label different levels of information. Headings should organize information into a hierarchy, from titles (Heading 1) to Main Section Headings (Heading 2) to Sub-Section Headings (Heading 3), and so forth.
This page features four different Heading levels.
Inclusive Visual Design (H1: Page Title)
Design With Everyone in Mind (H2: Main Section)
Headings (H3: Sub-Section)
Alt-Text (H3)
Color (H3)
Emphasis (H4: Sub-sub-section)
Contrast (H4)
Note: It's important to use Canvas's Paragraph drop-down menu (available in the Rich Content Editor) to create these headings because different heading levels don't just change the text size; they also create a semantic structure that allows non-sighted users to easily navigate between different levels of information. The video below provides a quick overview of how to use the Paragraph drop-down menu to create headings. (There is no narration--only music.)
Source: Adding Headings in Canvas
Links to an external site.
Consult the Canvas guide on styling text using the Rich Content Editor Links to an external site. for more information.
Alt Text
Alternative text (or alt text) provides a brief, meaningful text description for visual content. Although normally hidden, alt text becomes visible when images break (as in the example below). More importantly for accessibility, alt text becomes audible when visually impaired or digitally fatigued readers use screen readers (programs that convert text to audio). Alt text must be brief because some screen readers will only read the first 100-125 characters of image descriptions. However, alt text descriptions should also provide enough information so that non-sighted learners have access to all key information presented in the graphic.
In the example below, even though the browser is not displaying images properly, alt text provides enough information for non-sighted and sighted learners to access course content.
You'll learn how to add alt text to images in Canvas later in this course.
Color
Like text and images, color plays an important role in accessible visual design. Color can enhance your design, but it can also present barriers to users who are colorblind or have low vision. As you decide how to use color in your course, remember that color blindness affects approximately 1 in 12 men and 1 in 200 women. Following the guidelines for emphasis and contrast below will accommodate these users.
We also recommend avoiding specific reference to the color in critical course instructions (i.e. “The red text in this course is an indication of key terms"). For more information on colorblindness and visual design, read "Why All Designers Need to Consider Colorblindness Links to an external site.." To step into the shoes of your colorblind students, visit Coblis's Color Blindness Simulator Links to an external site..
Emphasis
When using color to emphasize important textual content, do so in conjunction with another formatting option, such as boldface or italic. That way, users who have low vision or colorblindness will still be able to recognize that the text is emphasized in some way.
Inaccessible: April loves designing pretty Canvas pages.
Accessible: April loves designing pretty Canvas pages.
In the first example, the emphasis might not be apparent to a user with colorblindness or low vision. In the second example, boldface works in conjunction with color to provide emphasis, which makes it readily apparent to all users.
Tip: While you should use emphasis to draw attention to key information, overusing boldface, italics, and/or highlighting reduces readability and may cause additional challenges for students with cognitive disabilities.
Contrast
You'll also need to ensure that there is sufficient color contrast between text and the background on which it appears. If the contrast between the text and background is too low, users (particularly those with low vision or color-blindness) may not be able to perceive the text.
In the example below, the first image features sufficient color contrast, which means the text is visible for users with low vision or colorblindness. The second image features insufficient color contrast, which makes the text difficult to read.
The following resources will help you determine whether your color contrast ratios are accessible:
For more information on contrast ratios, visit W3C's resource on meeting accessible color contrast requirements Links to an external site..
(And for the curious, the white-on-blue graphic above has a contrast ratio of 13.48:1, while the white-on-yellow graphic has a contrast ratio of 1.21:1. The minimum contrast for standard text/graphics is 4.5:1, and the minimum contrast for large text/graphics is 3:1.)
Accessible Color Combinations
The following color combinations are especially difficult for colorblind users, so avoid them when possible:
- Green and Red
- Green and Brown
- Blue and Purple
- Green and Blue
- Light Green and Yellow
- Blue and Grey
- Green and Grey
- Green and Black
This training resource was developed by April Pelt
Links to an external site. from Clemson University's Office of Teaching Effectiveness and Innovation
Links to an external site.. Please feel free to share these materials with your colleagues.
Image credits: Disability Symbols available via Wikimedia Commons Links to an external site. and adapted by April Pelt (Clemson Online); Alt-text image by Tyler Watts (Clemson Online); Color Contrast image by April Pelt (Clemson Online).