D2L - Accessible Content Structure

Last Updated: 08/08/2018

When you create new content in the D2L HTML Editor, you should always structure your content with headings so that all users can understand and navigate your content, including individuals with blindness or low vision who use screen reader technology.

Why structure your content?

No one enjoys having to read a large block of unorganized text. When sighted users access a new web page, they often visually skim the page to find large or bolded text used to organize and structure the web page content. This helps readers skip straight to the parts that they are interested in, as well as letting them organize the subsections of the topic more clearly in their mind.

Screen reader users do this as well, but instead of visually searching for large or bold text, they use screen reader software to search through the page for headings that communicate the page structure and organization. These headings allow them to build a mental map of the page which helps them find what they need more quickly.

How do you structure your content?

For sighted users, content headings are typically identified by their large, bolded, and/or underlined text. However, screen reader technology does not interpret text size and weight the way that readers do with their eyes. As a result, simply bolding or enlarging text does not communicate the importance of that text to a screen reader user.

Instead, screen reader technology relies on HTML heading tags to help users navigate through a page. These tags can be added in the D2L HTML Editor by highlighting your text and selecting an appropriate heading level using the Format drop-down menu.

Screenshot of D2L HTML Editor selecting Heading 3 from the Format drop-down menu

Headings should be used to structure the page content hierarchically. The main idea of a page should be identified with an H1 tag, which is the highest or broadest heading level. The next level of specificity (the subsections of the H1 topic) should be tagged as H2, and so on and so forth.

Headings should never skip a level going down; for example, you should not put an H4 directly underneath an H2. However, skipping levels on the way up the hierarchy (i.e., skipping from H4 to H2) is acceptable.

The following is an example of proper page structure:

  • H1: Math Department
    • H2: Courses
      • H3: Undergraduate Courses
        • H4: Required Courses
        • H4: Optional Courses
      • H3: Graduate Courses
        • H4: Required Course
        • H4: Optional Courses
    • H2: Faculty

You can run the D2L Accessibility Checker in the HTML Editor to check whether your D2L content headings are properly structured.