Canvas is a learning management system (LMS) used for many courses and other teaching activities at U-M. When creating content in Canvas, we have the ability to edit many aspects of digital content that may affect accessibility.
Canvas content can be made accessible by following best practices for web accessibility and communicating these practices to everyone who is creating content in the system, whether faculty, staff, or students.
Jump to a section on this page:
Text forms the majority of digital content on Canvas. Making text accessible means using structure and style to ensure that all users can perceive and understand the text itself and the relationships within its parts.
Headings are short phrases or titles that describe sections of text on a page. They are distinct from regular body text and communicate the organization of content. To be accessible, they should be used in a meaningful, ordered hierarchy and should make use of proper encoding.
On the web, every heading has a level or rank: Heading 1, Heading 2, Heading 3, and so on. These headings should be used in a meaningful hierarchy to form a document outline.
If headings are merely styled to look important, but not marked up in the code, web browsers, plug-ins, and assistive technologies cannot detect them, meaning that they are essentially not there for a broad range of users and technologies.
Create properly encoded headings by using the HTML tags for headings or by selecting Heading 1, Heading 2, etc. from a drop down menu in the text editor. The result is the same: proper HTML heading tags are applied to the underlying code.
<h1>Symposium Schedule</h1>
<h2>Friday</h2>
<p>Dinner for participants at 6:00 pm</p>
<h2>Saturday</h2>
<p>Breakfast and welcome at 9:00 am</p>
<p>...</p>
Links are a key part of much digital content on Canvas. Making links accessible means making them perceivable (links should be visually distinct from surrounding text) and making the purpose or destination of the link understandable. As much as possible, the text of the link should itself communicate the destination or purpose of the link by being meaningful, understandable, unique, and efficient.
Link text should be understandable and should describe its purpose or destination, most often using the exact language of its destination.
The link to a page titled “Fine Arts Library” should read, Fine Arts Library, not “Our Library” or “more about this library.”
Link text should make sense to a human reader. The complete URL’s of webpages are usually not understandable and should generally not be used as the only indication of a link’s destination.
The link to the “Penny W. Stamps School of Art & Design Diversity, Equity and Inclusion Strategic Plan” should read, Stamps School of Art & Design DEI Plan, or similar, not https://stamps.umich.edu/pdf/DEIPlan2017-2018.pdf.
If several links within the content lead to different destinations, the text of each link should be distinct. Similarly, if several links lead to the same destination, their link text should be identical.
The links to pages titled “Group Tickets” and “Senior Tickets” should read, Group Tickets and Senior Tickets; neither should simply read, “Tickets.”
Link text should be no longer than necessary and should put unique information first. Note that “unique” information depends on context.
The link to the page titled “Undergraduates - American Culture,” when linked from within the American Culture website should read, Undergraduates - American Culture or Undergraduates; when linked from a list of programs at U-M should read American Culture - Undergraduates.
Lists are a structural element that indicates a relationship between text. There are 2 types of list, and each has a specific function.
Unordered lists (with bullet points) are used when there is no order or sequence of importance.
Ordered lists (with sequential numbers) are used when the progression or sequence is meaningful.
Lists make content more accessible by making it more readable, and communicating hierarchical relationships over different devices and assistive technologies.
Avoid complicated or decorative fonts. Choose standard fonts with easily recognizable upper and lower case characters.
Avoid ALL CAPS.
Sans serif fonts are easiest to read for longer portions of text on a screen.
Font size should be readable. Avoid small sizes.
Color can be used to enhance web content, making it more perceivable and understandable. This can be accomplished by maintaining good contrast between foreground and background colors and by using color as one means among many to highlight elements.
To make text perceivable, there must be sufficient contrast between text color and the background or surrounding color. Contrast is basically the difference between lightness and darkness, regardless of the color or hue. As long as one color is dark enough and the other is light enough, text and background can be any colors—although neutral colors are often easiest to read.
Because color cannot be perceived by all users with all devices, color should be used along with other means to highlight elements or express meaning. For example, the bars in a bar graph can be distinguished by color and text labels; a missing assignment in a spreadsheet can be indicated by color and the absence of a check mark. When this is achieved, the page can be viewed in grayscale without losing any information.
Visual media and images can be important elements of digital content on Canvas. Making them accessible means including “textual equivalents” for all visual elements. A textual equivalent is text that can effectively replace the image in cases where the user cannot access the original, and should serve to communicate whatever the image communicates in this particular context.
Textual equivalents can be adjacent to visual media or can be embedded in the code (usually as “alt text” that is accessed via assistive technology or displayed when the image fails to load).
Alt text refers to an element of code that is connected to an image file. Insert alt text by finding the “alt text” or “description” field in the image upload options.
Keep in mind that alt text should:
Sometimes it is more appropriate to put the textual equivalent directly in the web content, where it is available to all users. This might be the case where the description will benefit many users (e.g. analysis of an artwork) or where the textual equivalent is especially long or complex (e.g. a transcription of an image of a poster or document).
For more information on creating accessible content in Canvas click on one of the links below: