Portland Community College | Portland, Oregon Portland Community College

Creating Web Pages in D2L Brightspace

D2L Brightspace iconWebpages are the most accessible document type in D2L Brightspace. While PDFs and Word/Google docs have their place in the online classroom, consider whether your document would be more suited as a web (HTML) page. For instance a journal article would probably be best left as a PDF. An assignment template would probably be best left as a Word/Google doc. However, an assignment description or topic notes, for instance,  would be well suited as a web (HTML) page.

Use the PCC stylesheet

A “stylesheet” is a file that webpages in D2L Brightspace reference for various document formatting styles. Titles and section headings have a specific font, size, and color. The font, size and color for normal text and List indents are specified. Image margins are added so that when you wrap text around an image it doesn’t run right up against the image. Tables have alternating colors and hyperlinks are colored blue.  There are currently two color schemes at PCC: teal and grayscale.

Add style sheet folder to a course

If you do not have the “html-templates” folder in your D2L Brightspace course (see Course Admin > Manage Files), you may add a stylesheet folder using the following steps.

  1. Download the PCC Stylesheets zip file to your computer. (You will need to log into your PCC Gmail account to access.)
  2. Upload this file to the Manage files area in your D2L Brightspace course.
  3. Click on the down arrow next to the folders name
  4. Select Unzip.
Apply style sheet template to a new web page
  1. Click on Content from the navigation bar
  2. Go to the module where you want to add a file
  3. Click the Create/Upload button
  4. Select Create a File
  5. Click the Browse for a template button.
  6. Select Course Offering Files
  7. Select the html-templates2_0 (or html-templates) folder
  8. Select either the gray or teal (or simple_blank) template by clicking on the radio button
  9. Click the Add button

Check the following elements and ensure they are accessible

For each item that you have in your document, click on the accessibility guideline(s) that corresponds to it in order to learn how to make the element accessible.

Headings
Headings need to be labeled specifically as a “Heading.”

While enlarging the font size of Heading text will cue sighted students, students using screen readers would have no way of distinguishing this text from the surrounding paragraph text. Labeling the text as a Heading, allows screen reader users to navigate the document by section, instead of having to start reading from the beginning every time (much like bookmarks in a PDF).

There is a very nice time-saving aspect of labeling text as headings. When you use the PCC stylesheet, and you select the appropriate heading level, the formatting is done for you automatically! One click and done!

In the D2L HTML Editor, simple select the text you want to be a Heading. Go to the toolbar and select the proper heading from the formatting drop down menu.

An image showing the heading styles for each heading level in D2L Brigthspace, headings 1 through 6. They must be selected from the formatting drop-down menu in the HTML editor toolbar.

Note that headings also need to be used in the correct order. Headings chunk out your content, making it easier for everyone to read. Headings must be used in the correct order for them to be useful. Do not skip heading levels.

  1. Heading 1 is the title of the page. There is only one Heading 1 per page.
  2. Heading 2 is the major section headings (much like the chapters of a book).
  3. Heading 3 is a subsection of Heading 2
  4. Heading 4 is a subsection of Heading 3
  5. Heading 5 is a subsection of Heading 4
  6. Heading 6 is a subsection of Heading 5
Lists
Lists need to be formatted using the list tool

When a list is formatted using the list tool in the D2L HTML editor, screen readers will identify that their is a list of…let’s say… 5 items. If the text is not formatted using this tool, a screen reader will read it as if it were sentences on a page and the context will not be conveyed to the student.

  1. Select/highlight the content you want to make into a list.
  2. Then on the D2L HTML editor toolbar, click on the Unordered List icon if you want a bulleted list or select Ordered List from the drop-down menu (next to the Unordered List icon) if the order does matter.

An image showing a list of Learning Objectives. The objectives are selected and the buttons on the toolbar for bulleted list and ordered lists are identified.

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  Cell Properties. The Cell properties window will pop-up.
  4. In the Cell type field, click on the drop-down list and select Column Header.
  5. Click Update. You will know you have successfully changed the row to table headers because the look of the table cells will change.
  6. Repeat for each cell that is a column header.

An image identifying the steps and where to find each selection.

Ensure proper reading order in tables

Screen readers[opens in new window][opens in new window] 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.

Images
Provide alternative text descriptions (ALT text) 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 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.
  2. Select whether to add the image from your computer, your course offering files, or a URL.An image of the Add a File window for finding an image on your computer, in the course offering files, or by URL.
  3. Navigate to where the image is, select the image file, and click the Open button. If using a URL, enter in the web address of the image.
    • (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.
  4. Click the Add button
  5. The Provide Alternate Text window will open. Type in descriptive text for the image. For example: “Penguins on an iceberg in the South PoleAn image of the Provide Alt text winow with an arrow pointed at the field for entering the Alternative text.
    • 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.
  6. Click the OK button, and then the Done button to save.
Hyperlinks
Meaningful link text

Links are a major method of navigating for everyone, but especially screen reader users. If the links are titled with meaningful text, they are much more useful.

  1. From the toolbar, click on the Insert Quicklink icon.
  2. You can add links from within the course or from an external website (URL option).
  3. Enter a meaningful title for the link. For instance, if you are linking to an article, the title of the link could be the title of the article.
  4. Select the radio button for “New Window.”
    • This ensures that the link opens in a new tab and the student is not taken out of the online classroom.
  5. Click the Insert button.An image showing the pop-up window for inserting an external link. It identifies where to enter the title of the link, to open in a new window, and the insert button.
Editing an existing link to add a meaningful title
  1. Place your cursor inside the URL.
  2. Click on the Quicklink button from the toolbar.
  3. Change the title from the web address to something meaningful.
  4. Select the radio button next to “New Window.”
  5. Click Update.An image that conveys the steps to edit a link in the D2L HTML editor.
Equations/Notation
Mathematical Equations, Formulas, and Notation

For screen readers to read mathematical and scientific notation, MathML must be used. There are two straightforward ways to ensure your equations, formulas, and notation are read correctly in D2L Brightspace, the Insert symbol tool and the Equation Editor tool.

Insert Symbol

Let’s take a simple math problem like 2 minus 1 equals 1. If you used just your Keyboard to enter “2-1=1,” a screen reader would read it as 2 dash 1 equals 1. Now a screen reader user is left wondering what is meant by the “dash.” In this case if you used the Insert Symbol tool, you can select the symbol “minus” instead of using the “dash.”

The position of the insert symbol tool is identified in toolbar. The insert symbol window where the minus symbol is identified and its name highlighted.

Equation Editor

The Insert Symbol tool is great for very simple math and notation. But if you are using more complex formulas and equations, you need to use the equation editor.  This tool allows you to use graphical, MathML, or LaTeX input.

An image that shows the options for a graphical editor, MathML editor, or LaTex editor.

If you know MathML or LaTex language then using one of these editors may be faster for you. However, if you are not familiar with those languages, then the graphical equation editor is for you! Just select the mathematical format that you need and enter your values.
An image of the pop-up window that allow you to select the mathematical and scientific notation that you need to create your formula or equation.

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.

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.

To 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.
    • Note: When picking a color for your text in D2L Brightspace, make sure you choose a color that registers with a green checkmark for WCAG AA in the Select a Color window.
      An image of the select a color pop-up window that identifies the color's hex value and whether it meets WCAG AA,. If it does there is a green checkmark. If not, there is a red X
  3. Select the color and click the Save button.