Write Math Equations Using the D2L Mathtype Editor

To create equations that screen reader technology can parse, create mathematical equations through the D2L equation editor.

  1. Find or create the HTML file you would like to edit or make.
  2. Click the Graphical Equation button from the WYSIWYG editor.
  3. Use the buttons provided to add your equation.
  4. Click Insert when complete.
  5. Remember to Publish your page when done adding equations.
This article was last updated on Nov 12, 2020 @ 4:09 pm.

Create or Edit HTML Files (D2L-specific Web Pages)

HTML files in D2L are content web pages that live in your D2L course shell. You can write your files directly in D2L, or paste in files created in Microsoft Word or text editors. If you choose to copy and paste your files, you will need to use the D2L formatting tools to optimize your content for the HTML format.

Create a New HTML File

  1. Find or create the Content Module you would like your HTML file to be located.
  2. Click the New button and select Create a File from within your chosen Module.
  3. Enter a title for your page.
  4. Type into the content field and use the WYSIWYG editor to edit and format your content.
  5. Click Publish when complete.


  1. Locate the HTML file you wish to edit.
  2. Select the down caret next to the filename and click Edit HTML.
  3. Type into the content field and use the WYSIWYG editor to edit and format your content.
  4. Click Update to save your changes.

This article was last updated on Feb 8, 2021 @ 11:42 am.

Use the WYSIWYG Editor

WYSIWYG stands for What You See is What You Get and is a common interface for editing HTML content.

Note: Depending on your screen width and browser settings, your button spacing may be slightly different than the image shown.

Buttons to Insert Items

  1. Insert Stuff: This button lets you embed files and media into your HTML page. Use Insert Stuff to add embed codes from YouTube and Media Space. Use this button also to insert permalinks links to library resources.
  2. Insert Image: Use this button to add images to your HTML page. You can add images files from your computer, existing course files, or via URL.
  3. Insert Quicklink: Use this button to add links to other D2L items, such as Quizzes, Discussions, or Assignments. You can also use this button to add links to external (non-D2L) websites.
  4. Insert Symbol: Use this button to insert special characters such as ©, €, ∞, and other symbols not included on the standard keyboard.
  5. Insert Line: Use this button to insert a horizontal line.
  6. Insert Attributes: Use this button to add alternative text to images already added to your page.

Note: Click the down caret to access buttons 4-6.

Buttons to Format Text

  1. Paragraph: Drop down to to specify the text formatting. Use this button to add headings.
  2. Bold: Make your text bold.
  3. Italic: Make your text italic.
  4. Underline: Add underlining to your text.
  5. Strikethrough: Strikethrough selected text.
  6. Subscript: Add a subscript.
  7. Superscript: Add a superscript.

Note: Click the down caret to access buttons 5-7.

Buttons to Align Text

  1. Indent: Indent your text.
  2. Outdent: Outdent your text. (Move it to the right.)
  3. Unordered List: Create a bulleted list.
  4. Ordered List: Create a numbered list.
  5. Align Left: Align your text to the left.
  6. Align Right: Align your text to the right.
  7. Align Center: Center align your text.
  8. Align Full: Justify your text equally between the left and right margins.
  9. Paragraph Left to Right: Add text from the left to the right.
  10. Paragraph Right to Left: Add text from the right to the left.

Note: Click the down caret to access buttons 4-10.

Buttons to Change Font

  1. Font Family: Change the font (e.g. Arial, Times New Roman, etc.)
  2. Size: Change the text size. It’s best to use the preformatted headings (button 7) as headings provide important accessibility attributes.
  3. Color: Change the text color.

Buttons to Add and Edit Tables

  1. Insert Table: Insert a table and select initial number of rows and columns.
  2. More Table Options: Once a table is added, use the additional table options available here to customize and edit your table.

Button to Add Mathematical Text

  1. Insert Graphical Equation: Add Mathematical text through the D2L graphical equation editor.
Note: If you know other mathematical markup languages, click the down caret to access equation editors employing LaTeX or MathML languages.


  1. Expand: Toggle to show all WYSIWYG editing buttons.

Buttons for Editing Actions

  1. Undo: Undo your most recent action.
  2. Cut: Copy and cut selected text.
  3. Copy: Copy selected text.

Note: HTML content can be optimized for accessibility and visibility. See tips to format your HTML content appropriately.

This article was last updated on Feb 8, 2021 @ 12:26 pm.

Set Slide Order

Make sure that the order of your slides is set correctly. Students using screen readers or other assistive technologies may not be able to visually determine what order slides should be read.

  1. Click Arrange > Reorder Objects from the top toolbar.
  2. Use the graphic interface to set the reading order of your slides.
  3. Click OK.

This article was last updated on Nov 12, 2020 @ 4:12 pm.

Set Alternate Text for Images

Alternate text (alt text) is used to provide text descriptions of images and graphics for users with screen readers or other assistive technologies. Be as descriptive as possible when writing text.

  1. Right click on the image you want to tag.
  2. Click Format Picture.
  3. Double click on Alt Text from the left column.
  4. Provide a Title and Description.
  5. Click OK.

This article was last updated on Nov 12, 2020 @ 4:31 pm.

Create a Title and File Name

Providing a descriptive title and other document information will help students using assistive technologies locate and identify your presentation.

  1. Click File > Properties.
  2. From the Summary tab, enter your Title and authoring information.
  3. Click OK.

This article was last updated on Nov 12, 2020 @ 4:38 pm.

Best Practices for HTML Content and Accessibility in D2L

Following best practices for HTML authoring helps ensure your course content is accessible by students with disabilities. Most of these practices also assist students without disabilities in navigating your course and understanding content organization. Use the WYSIWYG Editor to create accessible HTML pages in D2L.

Organize Content Using Pre-Formatted Headings

Headings provide ease of navigation through your course. Use headings, which are pre-formatted for accessibility, to organize content sections.

  1. Start with Heading 1 <H1>. Consider the <H1> text to be the title, and use <H1> only one time per page.
  2. Use heading levels in succession. <H1> (title), <H2> (subtitles), <H3> (topics), <H4> (subtopics), etc.
  3. Do not skip ahead levels, e.g. do not move from <H1> to <H3>. However, you can skip levels in reverse, e.g. you can move from <H4> back to <H2> on the same page.
  4. You can use multiple <H2>, <H3>, <H4>, etc. within the same page.
  5. Always include content within your headings.
  6. Headings should be descriptive of the information to follow. For example, <H1> Week 3</H1> should be the title of a page containing content for week 3.

Write Descriptive Text to Create Hyperlinks

Descriptive links provide information about where a given hyperlink will take a user. Descriptive links should be self-describing, such as Portland State University. Unlike a “click here” link, descriptive links indicate where the link sends users. When you create descriptive links, all users benefit from the ability to quickly find and navigate the information provided.

  1. Load the webpage of the intended link, and copy the URL (web address) from your browser.
  2. Select the down caret, then Edit HTML on the D2L HTML file in which you would like to add the link.
  3. Highlight the descriptive text that will be hyperlinked.
  4. Click the Insert Quicklink from the WYSIWYG editor.
  5. Select URL from Insert Quicklink menu. The URL option is the last option in the list.
  6. Paste the URL into the field for URL.
  7. Ensure the link target is set to open in a New Window.
  8. Click Insert, which will close the Quicklink menu.
  9. Click Update on your html file.

Note: The above instructions will not work for linking PSU library resources. Instead, follow the tutorial for Creating Permalinks to Library Content.

Add Headings to Table Rows and Columns

Format your tables using the features available in the the D2L WYSIWYG editor. Assistive technology users read tables by first navigating the table left to right, and then top to bottom. Formatted tables should include a Descriptive Title (above the table), and both column and row headers.

  1. In the HTML file to which you want to add a table, click the Insert Table button, and select the number of columns and rows.
  2. Place your mouse cursor into the cell to which you would like to add a heading, then select Cell Properties from the HTML editor.
  3. From the Cell Properties menu, select the header type from the Cell Type drop down menu.
  4. Click Update to save Cell Properties.
  5. Repeat steps 2-4 to add additional headers.

Use Formatted Lists

Formatted lists provide assistive technology readers a guide for how items in a list relate to other items in that list. In other words, formatted lists ensure assistive technology users understand items as belonging to a list instead of as a random collection of items.

  1. Decide if you would like an unordered list or an ordered list. An unordered list is bulleted, and an ordered list is sequentially numbered.
  2. Add an unordered list by selected the Unordered List button from the D2L WYSIWYG editor. Add an ordered list by selecting the down caret and clicking the Ordered List button.
  3. Click Update when complete.
  4. Alternatively you may change already entered text into an ordered or unordered list.
    1. Highlight the text you want to turn into a list.
    2. Click the Ordered List or Unordered List button.
    3. Click Update when Complete.

Use Appropriate Font Sizes, Colors, and Contrast

Text should be easy to read and navigate. Text that includes multiple font sizes, styles, and colors can be distracting and take away from the overall message of the text. You can customize D2L text using the WYSIWYG editor. When creating text, rely on the following guidelines:

  1. Use 12 point font for all non-heading text. Twelve point font is the default in D2L, and most web browsers allow users to customize their font style preferences.
  2. Do not rely on color alone to convey meaning. Instead combine color with other sensory characteristics (such as bold or italics) to convey meaning when necessary.
  3. Do not use all capital letters to convey emphasis. All caps should be used only for acronyms.
  4. Use a standard, easy to read font. Sans Serif fonts, such as Verana, Tahoma, Arial, and Calibri, are recommended. The default D2L content font is Arial.

Add Alternative Text to Images

Alternative text describes an image for users with visual impairments. Unlike a caption, which all users access, alternative text is “hidden” from view. It will be read by screen reading technologies that help users with visual impairments access written material on computers.

  1. Click the image icon from your WYSIWYG editor to add an image to a D2L page.
  2. Follow the prompts to add the image via your computer files or an existing course file.
  3. Enter descriptive alternative text in the field provided and then click OK.
  4. If the image provides no additional information to the text already presented on the page, select This image is decorative.
  5. Remember to Publish your page when complete.

Note: For more on Alternative Text, including examples, See WebAIM: Alternative Text.

This article was last updated on Feb 8, 2021 @ 11:42 am.