Best Practices for HTML Content and Accessibility in D2L

Following best practices for HTML authoring helps ensure your course content is accessible by students with disabilities. Most of these practices also assist students without disabilities in navigating your course and understanding content organization. Use the WYSIWYG Editor to create accessible HTML pages in D2L.

Organize Content Using Pre-Formatted Headings

Headings provide ease of navigation through your course. Use headings, which are pre-formatted for accessibility, to organize content sections.

  1. Start with Heading 1 <H1>. Consider the <H1> text to be the title, and use <H1> only one time per page.
  2. Use heading levels in succession. <H1> (title), <H2> (subtitles), <H3> (topics), <H4> (subtopics), etc.
  3. Do not skip ahead levels, e.g. do not move from <H1> to <H3>. However, you can skip levels in reverse, e.g. you can move from <H4> back to <H2> on the same page.
  4. You can use multiple <H2>, <H3>, <H4>, etc. within the same page.
  5. Always include content within your headings.
  6. Headings should be descriptive of the information to follow. For example, <H1> Week 3</H1> should be the title of a page containing content for week 3.

Write Descriptive Text to Create Hyperlinks

Descriptive links provide information about where a given hyperlink will take a user. Descriptive links should be self-describing, such as Portland State University. Unlike a “click here” link, descriptive links indicate where the link sends users. When you create descriptive links, all users benefit from the ability to quickly find and navigate the information provided.

  1. Load the webpage of the intended link, and copy the URL (web address) from your browser.
  2. Select the down caret, then Edit HTML on the D2L HTML file in which you would like to add the link.
  3. Highlight the descriptive text that will be hyperlinked.
  4. Click the Insert Quicklink from the WYSIWYG editor.
  5. Select URL from Insert Quicklink menu. The URL option is the last option in the list.
  6. Paste the URL into the field for URL.
  7. Ensure the link target is set to open in a New Window.
  8. Click Insert, which will close the Quicklink menu.
  9. Click Update on your html file.

Note: The above instructions will not work for linking PSU library resources. Instead, follow the tutorial for Creating Permalinks to Library Content.

Add Headings to Table Rows and Columns

Format your tables using the features available in the the D2L WYSIWYG editor. Assistive technology users read tables by first navigating the table left to right, and then top to bottom. Formatted tables should include a Descriptive Title (above the table), and both column and row headers.

  1. In the HTML file to which you want to add a table, click the Insert Table button, and select the number of columns and rows.
  2. Place your mouse cursor into the cell to which you would like to add a heading, then select Cell Properties from the HTML editor.
  3. From the Cell Properties menu, select the header type from the Cell Type drop down menu.
  4. Click Update to save Cell Properties.
  5. Repeat steps 2-4 to add additional headers.

Use Formatted Lists

Formatted lists provide assistive technology readers a guide for how items in a list relate to other items in that list. In other words, formatted lists ensure assistive technology users understand items as belonging to a list instead of as a random collection of items.

  1. Decide if you would like an unordered list or an ordered list. An unordered list is bulleted, and an ordered list is sequentially numbered.
  2. Add an unordered list by selected the Unordered List button from the D2L WYSIWYG editor. Add an ordered list by selecting the down caret and clicking the Ordered List button.
  3. Click Update when complete.
  4. Alternatively you may change already entered text into an ordered or unordered list.
    1. Highlight the text you want to turn into a list.
    2. Click the Ordered List or Unordered List button.
    3. Click Update when Complete.

Use Appropriate Font Sizes, Colors, and Contrast

Text should be easy to read and navigate. Text that includes multiple font sizes, styles, and colors can be distracting and take away from the overall message of the text. You can customize D2L text using the WYSIWYG editor. When creating text, rely on the following guidelines:

  1. Use 12 point font for all non-heading text. Twelve point font is the default in D2L, and most web browsers allow users to customize their font style preferences.
  2. Do not rely on color alone to convey meaning. Instead combine color with other sensory characteristics (such as bold or italics) to convey meaning when necessary.
  3. Do not use all capital letters to convey emphasis. All caps should be used only for acronyms.
  4. Use a standard, easy to read font. Sans Serif fonts, such as Verana, Tahoma, Arial, and Calibri, are recommended. The default D2L content font is Arial.

Add Alternative Text to Images

Alternative text describes an image for users with visual impairments. Unlike a caption, which all users access, alternative text is “hidden” from view. It will be read by screen reading technologies that help users with visual impairments access written material on computers.

  1. Click the image icon from your WYSIWYG editor to add an image to a D2L page.
  2. Follow the prompts to add the image via your computer files or an existing course file.
  3. Enter descriptive alternative text in the field provided and then click OK.
  4. If the image provides no additional information to the text already presented on the page, select This image is decorative.
  5. Remember to Publish your page when complete.

Note: For more on Alternative Text, including examples, See WebAIM: Alternative Text.