Universal Design Tip For Canvas: Use Headers

What is Universal Design?

The Basics

Put simply, universal design is the practice of making things that nearly anyone can use.  Universal-design practitioners take into account persons with differing abilities when making things. While physical objects can be made with universal-design principles, the same can be done for web content like what one finds in a Canvas site.

Universal-Design Canvas Customizations

As a highly customizable platform, Canvas lends itself well to universal design. It is possible for teachers to set up their Canvas sites using universal-design concepts.

Universal Design Tip: Use Headers on Canvas Pages

Purpose of Headers

Headers <h1, h1, . . . h6> convey meaning to screen readers for persons who are visually disabled. Headers also affect text size, as in:

Examples of text using Header 2 and Header 4 to show differences in size.

What’s tricky about headers is that although you can increase or decrease text size using them, they aren’t meant to be used for formatting. In fact, headers were originally created to establish information hierarchy in a document or web page. Screen readers use headers in exactly this way–to identify discrete parts of text and to generate a table-of-contents used to order its reading.

Image of a the list of headings and heading levels for http://accessibility.psu.edu as shown in the VoiceOver screen reader.

Image borrowed from the “Heading Tags (H1, H2, H3, P) in HTML” page on Penn State’s Accessibility and Usability website (http://accessibility.psu.edu/headingshtml/). Please click to enlarge.

When used improperly for formatting (e.g., to increase font size), headers can confusing screen readers, cause them to disorganize or skip over parts of text, making a document or web page inaccessible.

Best Practices for Usable Headers

According to the Accessibility and Usability at Penn State website, headers are the most useable for screen readers for organizing information as follows:

  • Header 1 <h1>: Document or webpage title

Example:

Example of text using header 1 <h1>.

  •  Header 2 <h2>: Major sections or headings in a document or webpage

Example:Example of text using header 2 to show font size.

  • Header 3 <h3>: Sub-sections or sub-headings in a document or webpage

Example:

Example of text in header 3 to show font size.

  • Paragraph <p>: Standard text usually constituting the bulk of content in a document or on a webpage.

Example (Please click on image to enlarge):

Example of text using paragraph to show text size.

How to Use Headers in the Rich Content Editor

You can select the header anywhere the Rich Content Editor appears in Canvas by selecting one from the “Paragraph” drop-down menu*.

Image of the "Paragraph" header drop-down menu in the Rich Content Editor*Please note: there isn’t a “Header 1” option in the Rich Content Editor. If you are creating or editing a Page, the title is roughly the equivalent of “Header 1.”

Example Page in Canvas (Click to Enlarge)

Example of a Canvas Page using headers 1, 2, and 3, as well as paragraph.

Questions?

Please contact Courseware Support at canvas@pobox.upenn.edu if you have any questions about using headers on in Canvas or if we can assist with anything else.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s