D2L & Web Page Accessibility

How to Start with Accessibility in Mind

Use the Template

The best thing you can do to make your D2L web pages accessible is to use the template pages provided in your course development shell to create new pages for your course. Add your content to these template pages using the principles under "How to Check and Fix Design Elements" below.

D2L template dropdown button with box to show location

Copying Word Content to D2L Web Page Files with/without Applied Templates

Consider using the D2L HTML editor because accessibility has been considered in most aspects of HTML technology, whereas your course documents in Word, PDF, etc. may or may not have been created accessibly (they will probably be more complicated and time-intensive to remediate). Also, students who use text-to-speech technology cannot access the Word, PDF, and PowerPoint documents in the D2L document viewer.

Using the HTML editor basically makes a web page that is readable by screen readers without a download. However, Word documents (and other non-HTML filetypes) can and should be used when students need to download, edit, and then upload the changed file to a dropbox. 

  1. If you have not already created the document in Word, save yourself some steps and create the content directly in a D2L file using the accessibility principles found in the "How to Check and Fix Design Elements" section below.
  2. If you have existing Word or PowerPoint documents that you want to use as course information pages, you can simply copy your content into a D2L page by:
      1. In the D2L Content area > click the New button > choose to Create a file.
      2. After choosing "Create a File" in D2L, choose one of the built in pages templates with simple formatting to give your page a style. (Note: An accessible syllabus outline is one of the choices.)
      3. Copy the contents of an entire document or a portion of the document.
      4. Move back to the D2L page.
      5. Place the cursor in the D2L web page where you wish to paste.
      6. Use the Paste as Text command – Control + Shift + V (Windows) or Shift+Option+Command+V (Mac) to paste the text of the Word document as plain text. Pasting text in this manner places all text in one long paragraph.
        (Note: Sometimes a simple, normal CTRL+V paste and choice of "Keep formatting" will give the desired results. You may want to try that first. Other times, the Word code is messy and does not give the desired results and this plain text pasting technique will help.)
      7. Break up the text into paragraphs and apply heading and list styles.
        D2L Heading Structure
        D2L Lists Options

        (Note: If you don’t separate heading text from the paragraph below it, the style will affect all of the text. Break the text into sections by placing the cursor in the new paragraph location and press the enter key.)
      8. Create Accessible Tables – If you have simple tables, just add a title and description in Word’s table properties and then paste the table into your D2L page the normal way using the typical Control +V (Windows) or Command +V (Mac).
      9. Documents with Images - Save any images that existed in the Word document as separate images. (Right click the images in Word and save them to your computer.) Then, upload the images into your D2L Content page by clicking the HTML editor "insert image" icon. Remember to add alt text and descriptions when prompted by D2L.
        D2L Alternative Text Prompt
 

D2L's Built-in Accessibility Checker

Introduction

D2L's Accessibility Checker will advise you on how to make your content more accessible to individuals with disabilities who access your course content.

To run the checker, click the Check Accessibility button in the bottom toolbar of the HTML editor: checker icon is an eyeball with a checkmark under it

Accessibility Warnings

The list below contains all the warnings you may receive when running the Accessibility Checker. Expand each to find the steps you can take to resolve the issue. 

Paragraph cannot be used in place of heading

Screen readers can navigate through a page by jumping from heading to heading. This allows screen reader users to quickly skim the content to find the section they’re looking for.

This warning appears when you make a paragraph bold to indicate it is a section header, but you don’t actually change the format of the paragraph to a heading format like “Heading 1”, “Heading 2”, etc.

If there are no headings indicated in the HTML, it is very difficult for screen reader users to efficiently navigate your document. Every page should at least contain an H1 heading to indicate the page title, and H2 headings for the main sections if they exist.

How to Resolve

Select an appropriate heading level from the dropdown list in the Accessibility Checker dialogue box, then click Repair.

checker headings dropdown picker

Heading order must be sequential

Headings are used to organize information hierarchically on a page. Items categorized as heading level 2 represent subheadings of heading level 1; heading level 3 items represent subheadings of heading level 2, and so forth.

Headings should never skip a level going down; for example, you should not put an H4 directly under an H2. However, skipping levels on the way up the hierarchy (i.e., skipping from H4 to H2) is acceptable.

  • H1: Math Department
      • H2: Courses
          • H3: Undergraduate Courses
          • H3: Graduate Courses
              • H4: Required Courses
              • H4: Optional Courses
      • H2: Faculty

How to Resolve

Change the lower heading level to the appropriate higher heading level to eliminate the skip. You can do this with the Format dropdown menu in the HTML Editor menu bar.

For example, if you placed an H4 directly under an H2 section, you could fix this by changing the H4 text to H3.

Alternatively, you could add a new level 3 heading between the level 2 and level 4 headings.

paragraph style dropdown

Use list markup for lists

Screen readers can navigate through a page by jumping directly to lists (bulleted and numbered).

However, if you create a list by just typing asterisks or numerals into the HTML Editor, the screen reader will not identify that properly as a list.

How to Resolve

Instead of manually inserting asterisks or numbers to label items in a list, use the list button in the HTML Editor menu. Click the Unordered (bulleted) list button, or select the drop down and choose Ordered (numbered) list.

list button expanded

Visual presentation must have a contrast ratio of at least 4.5:1 OR Large text must have a contrast ratio of at least 3:1

Insufficient color contrast between text and its background can make your content difficult or impossible to read for individuals with low vision or color blindness.

Large text can have a lower color contrast ratio; if your text is 18pt or larger, you will only receive an error if the contrast is below a 3:1 ratio. 

contrast ratio of 1.5 to 1 fails WCAG AA standard

How to Resolve

Open the “Select a Color” dialog box from the HTML Editor menu by clicking on the dropdown arrow next to the box showing the current text color: color selector dropdown highlighted

If your current contrast is insufficient, you’ll see a red warning symbol next to the words WCAG AA. Change the text color until the red warning symbol changes to a green check mark.

contrast ratio of 4.5 to 1 or greater passes WCAG AA standard

Images must have alternative text

Screen readers cannot describe the content of an image on their own. When you insert an image in the HTML Editor, you will see a prompt to add alt-text. This text is what a screen reader will read out loud instead of saying “image” or the filename. If the image is decorative, you can check a box in the prompt to indicate that the screen reader should not read it out.

This warning will appear in the Accessibility Checker if you enter a space (“ ”) for the alt-text or remove the alt=“description” text from the HTML source code.

prompt for entering alt text when uploading a picture

How to Resolve

Within the Accessibility Checker dialog, enter a concise description of the content of the image in the "Add alternative text" field, then click Repair.

checker with "add alt text" field and repair button highlighted

Alternative text must not be the same as the image name

This warning means that you entered the filename (e.g. my-image.jpg) as the alt-text. Alt-text is read out loud by screen readers to describe images on the screen. The filename is not an adequate description of the content of the image.

How to Resolve

In the Accessibility Checker dialog box, replace the filename with an appropriate, concise description of the image, then click Repair. 

checker with description typed instead of the file name

Tables must have captions

Captions are visible on the page to allow all users to better understand the purpose of a table. A caption concisely describes the content of a table.

How to Resolve

Type an appropriate caption in the Accessibility Checker dialog box and click Repair. 

checker with "set table caption" and repair button highlighted

Complex tables should have summaries

Complex tables are tables with merged cells and may have multiple header rows or columns. These tables are more difficult to understand and navigate with a screen reader, so a summary is provided to screen reader users that explains the structure of the table. The summary is not visible on the page to all users, unlike the caption, and should describe how to navigate the table.

complex table example with both column and row headers as well as merged cells

How to Resolve

Within the Accessibility Checker dialog box, type in a table summary with enough information for students who can't see the table to be able to understand how to navigate the table's information. Remember to click Repair.

checker with "set table summary" and repair button highlighted

Tables must have at least one header

Header rows help provide context and structure for the data in a table. Making the header row bold is not an accessible way to indicate the header row because screen readers do not consistently read out italics and bold formatting.

Setting a header row is somewhat difficult to do in the HTML Editor itself, so the easiest way to set headers is to run the Accessibility Checker and use the Repair option.

How to Resolve

Select whether your table uses header rows or columns, and click Repair.

checker with header row set as the table header and repair button highlighted

Table headers must be associated with cells

As screen readers move through a table, they read out the row or column header of the current table cell to help the user keep track of their location.

However, it can be unclear to the screen reader whether a header cell should be the header for its row or its column. This is addressed by setting the “scope” of the header.

How to Resolve

The Accessibility Checker allows you to set the scope of each header cell. If the header describes the cells in its row, select Row. If the header describes the cells in its column, select Column. If the header cell is a merged cell that describes a group of rows, select Row Group. If the header cell is a merged cell that describes a group of columns, select Column Group. Then click Repair.

checker with set header scope set to row and repair button highlighted

Adjacent links should be merged

If you provide two identical hyperlinks next to each other, this warning will appear, even if they have different link text. Repeated links are confusing for screen reader users and should be merged into one link.

Example of adjacent links:

FITC Accessibility (http://mtsu.edu/fitc/accessibility/index.php)

Note: It’s best practice to make your link text descriptive and to avoid including the URL in the link text, for example, "visit the FITC Accessibility page" is preferred to "Click Here" and/or the full URL.

How to Resolve

Click Repair in the Accessibility Checker dialog box.

checker with adjacent link dialog and repair button highlighted

 

creative commons attribution + noncommercial + share alike

Information for this section was adapted from UC Boulder's website and is based on the Creative Commons license. 

Full list of Accessibility Issues and Fixes

Headings

Format headings to add navigation structure to the page

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 available on this topicVideo: How to Add Headings

In addition to formatting headings as headings, the headings need to be used 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.

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. Eg. Heading 2 to Heading 4 could confuse screen reader users. Instead, only step down one level at a time.
  • See below for a visual display of correct heading structure.

Heading order, descending from 1 down to 6

Lists

Format lists as lists

Page formatting (lists, headings and links) is read aloud to screen reader users so that the content can be understood in context. If order is important in your list, make it a numbered list. If order is not important, a bulleted list is a better choice.

  1. Select/highlight the content you want to make into a list.
  2. On the toolbar, click on the Unordered (Bullet) List icon if the order doesn't matter or select Ordered (Numbered) List from the drop-down menu (next to the Unordered List icon) if the order does matter.

video available on this topicVideo: How to format lists in D2L

Images and Graphics (including graphs, maps & shapes)

Provide alternative text descriptions (alt text) for images and shapes

Alternative text descriptions of images (alt text) allow 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 Images web page.

  1. Place the cursor where you want to insert an image, and click the Insert image icon from the toolbar. The Add a File window 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 Destination button, select the images folder, and click Select a Path button. This will store 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.
  3. Click the Add button
  4. The Provide Alternate Text window 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 decorative box instead.
  5. Click the OK button, and then the Done button to save.

video available on this topicVideo: How to add alt text to images and graphics.

Links

Write meaningful link text that indicates the link's destination

Links are a major method of navigating for everyone. If the links are embedded into meaningful text, they are much more useful.

  1. From the toolbar, click on the Insert Quicklink icon.
  2. Select URL in the Insert Quicklink window,
    • Type or paste in the URL (web address).
    • Enter text that describes the link's destination in the Link Caption field.
      • For example, if the link will take you to the MTSU website, for the meaningful description I will use "MTSU homepage" instead of the URL "www.mtsu.edu" or "click here" which aren't descriptive.
    • Select Whole Window in the Open In section.
  3. Click the Insert button.
  4. And don't forget to click on the Update button to save your changes.

video available on this topicVideo: How to Create Meaningful Links in D2L.

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. Then click on the drop-down menu next to the Table icon in the toolbar.
  3. Choose Table Cell Properties. The Table cell properties window will pop-up.
  4. In the Cell type field, click on the drop-down list and select Header.
  5. Next, in the Scope field, 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 Scope field 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 Row from 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 available on this topicVideo: How to designate column headers in data tables in D2L

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

Color

Don't use color alone to convey meaning

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.

Instead, add some text that makes the element stand out to people with a vision impairment. I.e. "Don't miss the deadline!" is better written as "****Important note: Don't miss the deadline!"  because it uses asterisks, italics, and a text note to draw attention instead of color alone.

Use sufficient color contrast

If you print your documents or pages on a black and white printer, would they be understandable? Without sufficient color contrast, people who are color blind or have low vision 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 .
  3. Select the color and click Save.
    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.WCAG AA approved

video available on this topicVideo:: 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 for Windows or Colour Contrast Analyzer Tool for Mac
  2. Make sure you are in the Result — Luminosity mode, not the contrast result for color blindness.
  3. Click the Foreground eye dropper tool, hover over and click the foreground color to select the foreground color.
  4. Click the background eye dropper tool, hover over and click the background color.

video available on this topicVideo How to use the Colour Contrast Analyzer tool

Tips:

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

Flashing/Blinking Content

Eliminate or limit blinking/flashing content

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 limited and used only when necessary. Web pages that do contain flashing content, should limit the flashing to no more than three flashes per second and 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.

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

  • Make sure the form fields are associated with a label. One way to do this is to test the form with a screen reader.
  • Does the screen reader tell the user what to fill into the form fields? Is it clear how to submit the form?
  • If you don't know how to test with a screen reader, please submit your form to itdacad@mtsu.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.

  • Whatever the operation or behavior, make sure a mouse is not required.
  • 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.

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

  • 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?
  • If you don't know how to test with a screen reader, please send a request to itdacad@mtsu.edu to test it for you.

Math and Science equations/formulas/notation

Use MathML to write math and science equations, formulas and notation on a web page

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 available on this topicVideo: How to use the D2L equation editor.

Additional Guidelines

  • Keep a list of any uncaptioned videos you link to or embed on the page. See Audio and Video Accessibility for more information.
  • Don't require inaccessible software applications be used. 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? Need help determining if the software you use in your course is accessible? Contact itdacad@mtsu.edu for help.
  • Optional materials and resources too must include a balance of accessible options

 

Additional Resources

 


creative commons attribution + noncommercial + share alike

Information for this page was adapted from PCC's website and is based on the Creative Commons license.