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

  • Highlight the text and select the Heading #from the drop-down Format menu on the tool bar.
video note icon

VideoHow to Add Headings

In addition to formatting headings as headings, the headings need to be used in the correct order. Headings chunk out your content making it easier for everyone to read. Headings are also a major way of navigating with a screen reader.

Headings must be used in the correct order for them to be useful.

  • Heading 1 is like the title of a book and there is just one Heading 1 per page. Heading 2s are like chapter titles. Heading 3s are sub-sections of those chapters, and so on.
  • Heading order is also similar to the order of an outline.
  • DO NOT skip heading levels.
  • See below for a visual display of a possible order that headings might be used.
Heading tag hierarchy image


Formatting (lists, headings and links) are read aloud to screen reader users, so the content is understood in context.

  1. Select/highlight the content you want to make into a list.
  2. Then on the toolbar, click on the Unordered Listicon if the order doesn’t matter or select Ordered Listfrom the drop-down menu (next to the Unordered List icon) if the order does matter.
video note icon

VideoHow to format lists in D2L

Images and Graphics (including Graphs, Maps 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 the Accessibility of Complex Imagesweb page.

  1. Place the cursor where you want to insert an image, and click the Insert imageicon from the toolbar. The Add a Filewindow will open.
  2. Browse to the image location either on your computer or in your course offering files. Navigate to where the image is, select the image file, and click the Open button.
    • (OPTIONAL) If you would like to organize your files, click the Choose Destinationbutton, select the imagesfolder, and click Select a Pathbutton. This will store your image inside the imagesfolder. If you don’t have an imagesfolder, you can create one by clicking on the New Folderlink.
  3. Click the Addbutton
  4. The Provide Alternate Textwindow will open. Type in descriptive text for the image. For example: “Penguins can be found in the South Pole
    • It’s important to write a description that conveys the content and the purpose of the image. If the image is for decorative purposes, just check The image is decorativebox instead.
  5. Click the OKbutton, and then the Donebutton to save.
video note icon

VideoHow to add ALT text to images and graphics.


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 on the Insert Quicklinkicon.
  2. Select URLin the Insert Quicklinkwindow,
    • Type in the URL (web address).
    • Enter text that describes the link’s destination in the LinkCaptionfield (in the Titlefield in D2L version 10.3)
      • For example, if the link will take you to the Portland Community College website, for the meaningful description I will use “Portland Community College website” instead of the URL “www.pcc.edu” or “click here” which aren’t descriptive.
    • Select Whole Windowin the Open Insection (Targetsection in D2L 10.3)
  3. Click the Insertbutton.
  4. And don’t forget to click on the Updatebutton to save your changes.
video note icon

VideoHow to Create Meaningful Links in D2L.


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. Then click on the drop-down menu next to the Tableicon in the toolbar.
  3. Choose Table Cell Properties. The Table cell propertieswindow will pop-up.
  4. In the Cell typefield, click on the drop-down list and select Header.
  5. Next, in the Scopefield, click on the drop-down list and select Col. .
    • (If you were making the headers for rows instead of columns, you would do the same steps but change the drop-down list in the Scopefield to Row.)
  6. If you want to make all of the cells in this row into headers, you can choose Update all Cells in the Rowfrom the last drop down menu field in this window..
  7. 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.
video note icon

VideoHow to designate column headers in data tables in D2L.

See these examples of good and bad data table layouts.

Screen readersread tables from left to right, top to bottom, one cell at a time (no repeats). If cells are split or merged, the reading order can be thrown off.

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.


Don’t use color alone to make a distinction, a comparison or to set something off or apart from the rest of the web page. If you categorize something by color alone, those who are color blind or blind will not benefit from the color distinction.

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 Coloricon in the toolbar .
  3. Select the color and clickSave.
    • NoteWhen 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 Colorwindow. 
video note icon

Video:How to Use D2L’s font color contrast checker.

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

  1. Download Colour Contrast Analyzer Tool
  2. Open the Colour Contrast.exefile,
  3. Make sure you are in the Result — Luminositymode, not the contrast result for color blindness.
  4. Click the Foreground eye droppertool, hover over and click the foreground color to select the foreground color.
  5. Click the background eye droppertool, hover over and click the background color.
video note icon
video note icon

VideoHow-to Install the Colour Contrast Analyzer
VideoHow to use the Colour Contrast Analyzer tool


  • These are results for regular size (approximately 12 pixel) font and large text (18 pixel or larger).
  • PCC’s 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

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 it land on 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, that is accessible to students who can’t use a mouse or those who are blind, for the student to submit this information that is accessible to them. 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 submit your form to elearning@delta.edu to test.

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 device 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 navigate 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 which would make the learning object inaccessible to someone using a screen reader.

  1. If the web page with the interactive object or behavior on the webpage has passed the keyboard only 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 send a request to elearning@delta.edu to test it for you.

Math and Science equations/formulas/notation

The D2L equation editor outputs MathML, and you can publish Microsoft Word with the MathType plugin to MathML. For more information, see the Math and Science Accessibility page.

video note icon

VideoHow to use the D2L equation editor.