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

1. Highlight the text, and then from the Format menu drop-down on the tool bar, select the heading number.
   In 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.
     

Lists

Format Lists as Lists

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

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.
   
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.
   
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

1. From the toolbar, click the Insert Quicklink icon.
   
2. Select URL in the Insert Quicklink window
   
   • 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

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.
   
3. In the Row Type field, choose Heading from the drop-down list.
   
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.
   
3. Scroll to the bottom of the window and check the box next to Include Caption.
   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

Color

Don't Use Color Alone to Convey Meaning

Use Sufficient Color Contrast

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.
   
3. Select the color, and click then Save.
   

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.

• 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.

Interactive Elements, Forms & buttons

Check the Reading Order of Forms

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

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.

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

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

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. To begin, there is a built-in accessibility checker in the HTML Editor. When you click the Accessibility Checker, a window will pop up and enumerate the accessibility  issues.

1. Download & Install the WAVE toolbar.
2. Open the D2L page in its own window by clicking on the open in a new window icon. 
3. 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.
4. 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.
5. Return to the original D2L page, and open the D2L editor to repair the problems you found.

Additional Resources

• D2L's Resource Center - Accessible Course Design
• What is web accessibility and why is it important?
• DO-IT Center (Univ of WA) Video:  Making Distance Learning Accessible to Students with Disabilities
• Penn State's AccessAbility webpage on Color Blindness