Portland Community College | Portland, Oregon

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.

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 Bulleted List icon if you want a bulleted list or select Numbered List from the drop-down menu if the order does matter.

Tables

Create data tables with column or row headers

Designating column and row headers in a table is essential; otherwise, the table’s layout will be in accessible to screen readers.

1. Put your cursor in one of the cells you want to mark up as a table header or row, then click on the drop-down menu next to the Table icon in the toolbar.
2. Choose  Cell Properties. The Cell properties window will pop-up.
3. In the Cell type field, click on the drop-down list and select Header cell.
4. If the Header Cell is for a column, select Column from the Scope menu–and if the header cell is for a row, seclect Row from Scope menu.
5. Click Save. You will know you have successfully changed the column or row to table headers because the look of the table cells will change.

Repeat for each cell that is a column or row header.

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

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

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.

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 search for and select the symbol “minus” instead of using the “dash.”

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, LaTeX, or Chemistry input.

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.

In the latest (August 2021) update of the Brightspace HTML editor, a Chemistry equation editor was added. We haven’t tested it much, so if you use it a lot we welcome your feedback!

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 in the Select a Color window.
     
3. Select the color and click the Save button.