D2L Webpages

General
D2L Webpages Accessibility Rule How To Fix

Hyperlinks indicate if they open in a new window or tab.

It is important to warn individuals when a new window has been opened.

  • The best way to indicate that a hyperlink opens in a new window is to:Add text to the hyperlink, such as "(opens in a new window)", or
  • Ensure "opens in a new window" is part of the HTML code for the hyperlink.

Note:

This is the advanced method.

To add text to a hyperlink:

  1. From the D2L Webpage drop-down menu, select Edit HTML.
  2. Select the hyperlink.
  3. Select the Insert Quicklink icon to edit the hyperlink.
  4. In the Text field, type (opens in a new window).
  5. Select Update to save the title change.
  6. Select Update again to save the D2L Webpage.

Clear descriptions are used for hyperlinks that convey where the link goes.

Screen reader users generate a list of links to assist in navigating a document; therefore, hyperlinks should be descriptive and clearly identify the target of the hyperlink. Redundant or ambiguous link text such as "More" is meaningless in this context. Use unique and descriptive hyperlink text, taking care to:

  • Avoid the use of the URL as the hyperlink.
  • Avoid phrases such as "Click Here", "More", or "Click for Details".
  • Example: Avoid using the webpage URL https://www.michigan.gov/som/ as the hyperlink text.
  • Instead, use a clear, concise descriptive text, such as: For more information, visit the State of Michigan website.

Note:

For emails and printed documents it is best practice to add the URL after the description, for example:
For more information, visit the State of Michigan website (https://www.michigan.gov/som/).

To add a descriptive hyperlink:

  1. From the D2L Webpage drop-down menu, select Edit HTML.
  2. Copy the URL (web address) by selecting the link, right-click on the mouse, then select Copy.
  3. In the same vicinity, type a clear, concise description for the URL.
  4. Select the description text.
  5. Select the Insert Quicklink icon, then scroll down and expand the Link menu.
  6. In the Link field, paste the URL (web address) previously copied.
  7. Select Insert to add the hyperlink, then select Update or Save.

Sufficient contrast between text and background is present.

People with low vision, poor vision, or color blindness often find it hard to read text that does not contrast with the background.

Colors of the text and background must be different enough to make the text easy to see. A contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text should be present.

To edit text font color:

  1. From the D2L Webpage drop-down menu, select Edit HTML.
  2. Select the text.
  3. Select the Font Color menu, then select a font color. Change light font colors to a darker shade. Generally speaking, avoid using font colors such as pink, yellow and orange.

Use WebAIM's Contrast Checker to find an appropriate color contrast.

The webpage has a set language, and the set language is correct.

Webpages should specify the language in which it has been created. Screen reading technologies rely on the specified language to determine how to pronounce document text.

To set a webpage language:

  1. From the D2L Webpage drop-down menu, select Edit HTML.
  2. Open the source code by selecting the Source Code icon.
  3. Type or copy and paste the following code as the second line to set the webpage language as English: <html lang="en">.

To set the webpage to a different language, replace “en” with the appropriate language code. Common Language codes include:

  • en: English
  • es: Spanish
  • fr: French
  • ja: Japanese
  • de: German

For additional language codes, visit: Language Codes .

Use proper ordered/unordered list structures.

Hand-created lists cannot be read properly by screen readers because a proper list structure is needed to inform users that a list is present.

  • Lists convey a hierarchical content structure to screen reader users.Unordered lists (bullet points) are used when list items can be arranged randomly.
  • Ordered lists (numbered or lettered) are used when a sequential order is important.

To add an ordered or unordered list structure:

  1. From the D2L Webpage drop-down menu, select Edit HTML.
  2. Select the list text.
  3. Select the List Menu, then select Unordered List (bullets), or Ordered List (numbers).
Headings
D2L Webpages Accessibility Rule How To Fix

Webpage uses headings, and follows a logical structure.

Sighted users rely on text size and bold to identify different sections, properly coding those as headings allows screen reading users to do the same.

Content is organized using headings that follow a logical structure.

Headings are important as they provide structure to a webpage. When proper headings are used, the webpage becomes much easier to understand and navigate for all users.

Headings should be hierarchical, starting at heading level 1 for the title of the webpage, then heading level 2 for the sections of the webpage, then heading level 3 for subsections, and so on. Heading levels should not be skipped.

To add or edit headings:

  1. From the D2L Webpage drop-down menu, select to Edit HTML.
  2. Select the text.
  3. From the Format drop-down menu, select the appropriate heading level.

Keep in mind of the following:

  • The webpage title should be heading 1.
  • Section titles should begin at heading level 2.
  • Sub-sections should be heading level 3.

Webpage headings begin at level 1.

Webpage headings should always begin with Heading 1 or Level 1. For most webpages, the title of the webpage should be Heading 1 or Level 1. Webpages should only have one Heading 1 identified.

To change heading levels:

  1. From the D2L Webpage drop-down menu, select to Edit HTML.
  2. Select the text.
  3. From the Format drop-down menu, select the appropriate heading level.
Images
D2L Webpages Accessibility Rule How To Fix

Alternative text (alt text) is provided for all non-text content, including Images, Drawings, Elements (arrows, lines, etc.), or Charts.

Alternative text is a textual alternative for an image that makes it easier to connect the image to its context and allows users with visual impairments to perceive the image.

Screen readers speak the alternative text to describe images and other non-text content that users cannot see. Based on alt text, users can understand the purpose and meaning of the described content.

Decorative images should be identified as decorative. Images identified as decorative will be skipped over by screen readers so be purposeful when identifying images as decorative.

To add alternative text:

  1. Within the HTML editor, select the Insert Image icon.
  2. Upload the desired image.
  3. Select Add.
  4. When prompted, enter alternative text.
  5. Select Ok.

To edit/review alternative text:

  1. From the D2L Webpage drop-down menu, select to Edit HTML.
  2. Click on the image needing alternative text.
  3. From the pop-up menu options, select the Image Options icon.
  4. Type the alt text into the Image Description field.
  5. Select Ok.

Images do not have contrast issues.

Images that contain text with low contrast between the text and its background can cause the text to be difficult to read, especially for those with low vision, poor eyesight or color blindness.

To adjust the contrast of an image:
If you have access to an editing program, such as Photoshop: Upload the image into a program to increase the contrast.

If you do not have access to an image editing program:

  1. Open PowerPoint.
  2. Insert the image to a slide.
  3. Under the Picture Format tab, adjust the contrast of the image in the Corrections dropdown menu.
  4. Right-click on the image to save it as a picture.

Images or other multimedia are not prone to induce seizures.

Animated images that contain flashing or contrasting lights or patterns can lead to seizures for people that suffer from photosensitive epilepsy, which is a very serious and potentially life-threatening condition. In addition, animated images with these characteristics can be generally unpleasant to look at, even for those not prone to seizures.

Find an alternative image. Do not use this image.
Tables
D2L Webpages Accessibility Rule How To Fix

Table is created using the table tool. Avoid using tabs to mimic tables.

Table data or information must be presented using the table tool. Proper table markups will alert users that a table is present, including the number of rows and columns.

Mimicking tables by tabbing will not alert screen reader users that a table-like object is present.

To create a table:

  1. From the D2L Webpage drop-down menu, select to Edit HTML.
  2. From the Table Creator, select the number of rows and columns needed.
  3. Type or copy/paste the information into the table.

Tables specify column header information.

Users rely on the table headings to understand the content that is subsequently read by the screen reader. Also, screen reading technologies often use the table header row to help convey to the user the current cursor location in the table and to provide information that enables the user to navigate the table.

Tables should not be used for layout purposes. If a table does not need headings (the top row or first column does not serve as a label for the data/info underneath/beside) then do not use a table.

To specify a table header:

  1. From the D2L Webpage drop-down menu, select to Edit HTML.
  2. Select the cells of the header row or column.
  3. From the table menu in the Rich Content Editor, select Cell Properties.
  4. From the Cell Type menu, select Row Header.
    1. Select Column Header if the headings are by column.
    2. If both headings are present, select both options.
  5. Select Update.

Tables within the webpage contain a caption.

Set a brief descriptive text to indicate the content of the table.

To add a caption:

  1. From the D2L Webpage drop-down menu, select to Edit HTML.
  2. Select the table.
  3. Select the Table drop-down menu.
  4. Select Table Properties.
  5. Select the checkbox to Include Caption.
  6. Select Update.
  7. Enter the table caption in the top row of the table.
  8. Select Save and Close.

This page content is offered under a CC Attribution license.

This page content is offered under a CC Attribution license.