Make Web Content in D2L Accessible

For each item in your document, click the accessibility guideline that corresponds to that item to learn how to make it accessible.

The best thing you can do to keep your D2L webpages accessible is to use the font size and style provided in the course template. Do not try to change the font typeface or size. It will be a huge hassle for you to try to keep fonts consistent if you change them (unless you know how to use Cascading Style Sheets).

Headings

Use Properly Formatted Headings to Structure the Page

It isn't enough to make headings big and bold. Headings need to be formatted as headings.

  1. Highlight the text, and then from the Format menu drop-down on the tool bar, select the heading number.
    Indicates Heading 1In addition to formatting headings as headings, you need to use the headings in the correct order. Headings chunk your content, making it easier for everyone to read. Headings are also a major way of navigating with a screen reader.
  2. You must use headings in the correct order for them to be useful.
    • Heading 1 is typically like the title of a book. Use one Heading 1 per page.
    • Heading 2 is typically used for headings like chapter titles. 
    • Heading 3 could be used for sections of chapters.
    • DO NOT skip heading levels.
    • See below for a visual display of a possible order you may use for headings.
      Example heading structure.

Lists

Format Lists as Lists

Formatting (like lists, headings, and links) are read aloud to screen reader users so the content is understood in context.
  1. Select the content to make into a list.
  2. From the toolbar, click the Unordered List icon if the order doesn't matter or select the Ordered List option from the drop-down menu if the order does matter.

Images and Graphics (Including Graphs, Maps & Shapes)

Provide Alternative Text Descriptions for Images and Shapes

Alternative text descriptions of images (alt text) allows screen reader users to benefit from the information being conveyed by an image. 
(For images that cannot be adequately described in one or two brief sentences of alt text, see Make Complex Images Accessible.)
  1. Place the cursor where you want to insert an image, and then click the Insert image icon from the toolbar. The Add a File window displays.
    Indicates Add image
  2. Browse to the image location either on your computer or in your course offering files. Select the image file, and then click the Open button.
  3. (OPTIONAL) To organize your files, click the Choose Destination button, select the images folder, and then click the Select a Path button. This action stores your image inside the images folder. If you don’t have an images folder, you can create one by clicking on the New Folder link.
  4. Click the Add button. The Provide Alternate Text window displays.
    Indicates Alternative Text
  5. Type a descriptive text for the image. For example: “Penguins can be found in the South Pole.”
    • It’s important to write a description that conveys why you are including the image in the page. Why is it important? What point are you trying to make with it? 
    • If the image is for decorative purposes, select the This image is decorative checkbox instead.
  6. Click the OK button, and then click the Publish or Update button to save your file.

Links

Write Meaningful Link Text That Indicates the Link's Destination

Links are a major method of navigating for everyone, but especially screen reader users. If the links are embedded into meaningful text, they are much more useful.
  1. From the toolbar, click the Insert Quicklink icon.
    Indicates Quicklink
  2. Select URL in the Insert Quicklink window
    Indicates URL
    • Type or paste the URL (web address).
    • Enter text that describes the link's destination in the Title field.
      • For example, if the link takes you to the Portland Community College website, for a meaningful description use "Portland Community College website" instead of the URL "www.pcc.edu" or "click here," neither of which is descriptive.
    • Select New Window in the Target section.
  3. Click the Insert button.
  4. Click the Publish or Update button to save your changes.

Tables

Create Data Tables with Column Headers

Designating column headers in a table is essential to screen reader users understanding how the information is laid out.
  1. Put your cursor in one of the cells you want to mark up as a table header.
  2. Click the drop-down menu next to the Table icon in the toolbar, and select Row Properties. The Row Properties window displays.
    Indicates Row Properties
  3. In the Row Type field, choose Heading from the drop-down list.
    Indicate Heading field
  4. When you are done, click Update. You will know you have successfully changed the row to table headers because the look of the table cells will change.

Add a Caption to Your Table

  1. Put your cursor in one of the table cells.
  2. Click the drop-down menu next to the Table icon in the toolbar, and select Table Properties.
    Indicates Table Properties
  3. Scroll to the bottom of the window and check the box next to Include Caption.
    Indicates A text box where you can type a caption for the table will appear above the table. Click into that text box to type your caption.
    See Good Table Layout vs Bad Table Layout.

Ensure a Proper Reading Order in Tables

Screen readers read tables from left to right, top to bottom, one cell at a time (no repeats). 

Read your table left to right, top to bottom (never repeating a cell). Does it make sense? A screen reader reads tables in this way.

Merged, nested, and split cells change the reading order of tables. Make sure you construct your table in a way that accommodates good reading order.

Color

Don't Use Color Alone to Convey Meaning

Don't use color alone to make a distinction, to make a comparison, or to set something apart from the rest of the document. If you categorize something by color alone, those who are color blind or have other visual disabilities will not be able to benefit from that information.

Use Sufficient Color Contrast

If you print your color graphic on a black and white printer, would it be understandable? Without sufficient color contrast, people who are color blind will not be able to benefit from the information.

Check Color Contrast with D2L's Color Tool

  1. Go to the module and click on the page you want to check the color contrast.
  2. Select the text that you want to change to another color and click the drop down menu next to the Color icon in the toolbar.
    Shows Color icon
  3. Select the color, and click then Save.
    Indicates WCAG AA Color ratio
NOTE: When picking a color for your text in D2L, make sure you choose a color that registers with a green checkmark for WCAG AA in the Select a Color window.

For a stand-alone tool that can test things in many applications (not just D2L), try the Colour Contrast Analyzer Tool.

Video: How-to Install the Colour Contrast Analyzer
Video: How to use the Colour Contrast Analyzer tool

Colour Contrast Analyzer Tool

  • Open the Colour Contrast.exe file.
  • Make sure you are in the Result -- Luminosity mode, not the contrast result for color blindness.
  • Click the Foreground eye dropper tool, hover over and click the foreground color to select the foreground color.
  • Click the background eye dropper tool, hover over and click the background color.
Tips:
  • These are results for regular size (approximately 12 pixel) font and large text (18 pixel or larger).
  • Best practice standards are to reach a pass in the AA standards.
  • Don't worry If you fail the AAA standards, though you might want to consider something with more contrast.
  • Avoid these combinations:
    • Red & Black
    • Blue & Yellow
    • Red & Green

Flashing/Blinking Content

Eliminate or Limit Blinking/Flashing Content to 3 Seconds

Any flashing/blinking content (especially content in red) can cause seizures in people with photosensitive epilepsy as well as other photosensitive seizure disorders, so it should be used rarely if at all.

Web pages that do contain flashing content should limit the flashing to no more than three flashes per second and should not use fully saturated reds in the content. If you do have content that flashes/blinks more than three times per second, freeze the blinking content momentarily so it falls below the three times per second limit.

If you have a web video with a scene involving very bright lightning flashes (or other scenes with flashes), edit the video so the lightning doesn't flash more than three times in any one-second period.

Interactive Elements, Forms & buttons

Check the Reading Order of Forms

We recommend the D2L quiz tool for creating forms. If you link out to an outside web-based form, check its reading order and how well it works with a screen reader.

Tab order and proper labeling of form fields and buttons is important to those who are blind or physically disabled.
  1. To check the reading order of a form, try tabbing through the form. Does the cursor land in the form fields in the order someone would want to fill it out? If it doesn't, you will need to edit the order of the form fields.
  2. Can you submit the form without using the mouse? (The keyboard command to activate a button or link is the Enter key.)
    • If you cannot, is there another way to submit the information that is accessible to students who can't use a mouse or who are blind? Can they save it and email it to you, for example?

Label Form Fields and Buttons

If you are using the D2L quiz format as your form, you can be assured that the form fields and buttons are clearly labeled.

For other forms:
  1. Make sure the form fields are associated with a label. One way to do this is to test the form with a screen reader.
  2. Does the screen reader tell the user what to fill into the form fields? Is it clear how to submit the form?
  3. If you don't know how to test with a screen reader, please contact VTAC or your instructional designer.

Ensure That Any Action That Uses a Mouse Can Also Be Completed by a Keyboard.

People with carpal tunnel and other mobility issues often cannot use a mouse. While there are more and more input devices and software options, such as speech to text software and touchpads, keyboard accessibility remains an important input format for many assistive technologies.
  1. Whatever the operation or behavior, make sure a mouse is not required.
  2. Try navigating the web page without a mouse. Use the following keyboard keys to navigate and interact with the web page all of its content:
    • Tab
    • Arrow keys
    • Enter
    • Spacebar
    • Keyboard commands clearly provided (and common operating system and browser keyboard commands) may also be used.
  3. Could you complete the course without using a mouse?

Test Interactive Learning Objects with a Screen Reader

Even if something is keyboard accessible, objects, buttons or input fields may not be properly labeled. Improper labeling would make the learning object inaccessible to someone using a screen reader.
  1. If the interactive object or behavior on the webpage has passed the keyboard test (above), try it out with a screen reader.
    • Does the screen reader read the button labels?
    • Are any changes made to the webpage by scripts or user interaction, made understandable to the blind or low-vision user?
  2. If you don't know how to test with a screen reader, please contact VTAC or your instructional designer.

Math and Science Equations/Formulas/Notation

Use MathML to Write Math and Science Equations, Formulas and Notation on a Webpage

The D2L equation editor outputs MathML, and you can publish Microsoft Word with the MathType plugin to MathML. See Make Math-Science Resources Accessible.

Additional Guidelines for Accessibility

  • Caption video and transcribe audio.
  • Don't require students to use inaccessible software applications. Consider the software applications you require students use. Are they all accessible? Can you separate the task or outcome from the application and let students use whatever works best for them?
  • Optional materials and resources should include a balance of accessible options.

Run an Automated Checker

There are a few different web page accessibility checkers. In order to check web pages that require a log-in, such as D2L, you will need a browser-based checker such as the WebAIM WAVE accessibility toolbar add-on for the Firefox and Chrome browsers.
  1. Open the D2L page in its own window by clicking on the open in a new window icon. 
  2. Right-click the page in the new window, and select WAVE, then choose "Errors, Features, and Alerts" to see what accessibility errors you have on the page.
  3. Error icons in green, red, yellow and blue will appear on the page. If you hover over an error icon, more information on the error will appear.
  4. Return to the original D2L page, and open the D2L editor to repair the problems you found.
There's a lot more you can do with this toolbar, but this is how you do an accessibility error check with it. Check out this webpage and video:  Identifying Web Accessibility Issues using WAVE tool.

Additional Resources