Distance Learning | School of Professional Studies | Northwestern University

Use HTML markup for headings, emphasized or strong text.

When indicating new sections on a page or document, use headings rather than bold, underlined, or italicized text. Headings allow screen reader users to quickly navigate through a page by jumping from heading to heading. This way, they can find the section they need without having to listen to the entire page be read aloud. Canvas’s Rich Text Editor will apply the correct tags automatically when the correct options are selected.

Heading tags should be applied in the appropriate order to avoid causing confusion. In Canvas, the page title is Heading 1, so the first heading level on the page itself should be Heading 2. Any sub-headings would be Heading 3, and sub-sub headings are Heading 4. Screen readers call out the heading type before reading the heading text, to help students orient themselves to the flow of information. But if a page goes from Heading 1 to Heading 2 to Heading 4, students may worry that they somehow missed information.

This rule about using appropriate HTML tags also applies to lists, both bulleted and numbered. By appropriately formatting these lists, using the ordered or unordered list buttons in the Rich Text Editor, students using screen readers will be informed that they are about to hear a list and how many items are in it. This is much better for comprehension than manually typing in 1, 2, 3 for each item.

Use white space to break up text.

Rather than writing lengthy, page-long paragraphs (often referred to online as “walls of text”), chunk your information out into smaller blocks with space between them. This makes reading easier for all students, but especially for students with learning disabilities or attention disorders. If their attention wanders from the screen, it’s much easier to start reading again from the beginning of a short paragraph, rather than having to scan through a dense block of text.

Give tables headers and captions.

Tables are a popular way of organizing and sharing information. Unfortunately, screen readers are often unable to read tables in a way that is easily understandable. Visit WebAIM’s page on accessible tables for an example of how a poorly formatted table would sound to a screen reader user.

Fortunately, Canvas makes it easy to format an accessible table. Just follow these steps in the Rich Text Editor on a course page.

1. Go to the Rich Text Editor.
2. Determine which cells in the table are the header cells and their scope.
   • These are typically the top row or far left column, but depending on the complexity of the table they may be elsewhere. Header cells provide information about the category of the information that falls under them: Grade, Due Date, Assignment Type, etc.
   • The scope refers to the cells that the header cell “controls.” For header cells in the top row, the scope is typically the single column underneath them; likewise, for header cells on the left column, their scope is typically the row that they begin. If your header cell is merged across multiple columns or rows, the scope is either a column group or row group.
3. Create a header cell.
   1. Click in the cell you want to make into a header cell.
   2. Click on the Table Editor button in the Rich Text Editor menu (second row, far left).
   3. Hover over the menu option labeled Cell, then select Cell Properties.
   4. Click on Cell Type and select Header Cell.
   5. Click on Scope and select the appropriate Scope.
   6. Click Okay.
   7. Repeat for all header cells in the table.
4. Add a table caption.
   1. Click anywhere inside the table you want to write a caption for.
   2. Click on the Table Editor button.
   3. Click on the Table Properties option.
   4. Click the checkbox next to the word Caption.
   5. Click Okay.
   6. In the new field that appears above your table, type a concise description of the table (ex., Grading Scale, Course Schedule, Discussion Rubric, etc.). This caption can and should be formatted like any other text, including headings as appropriate.

Information is presented in a logical order.

Sighted users are able to take in an entire webpage in a glance, quickly understanding the arrangement of the page elements. Screen reader users, however, must hear all content in a linear fashion, read out one after the other. For this reason, it is important to consider the way in which headings and links are arranged on the page. Is there a logical flow from one to the next? Would someone skimming only the headings, for example, be able to understand the progression of information throughout the page? Consider the big-picture view of the page as a whole when designing it in order to create a logical presentation.