How To Run the Accessibility Checker

The Accessibility Checker is built into the HTML editor in Brightspace. You are able to use it on any Content page you create as well as any other instance in Brightspace where the HTML Editor is used, like the news items, discussion and assignment descriptions, and discussion posts.

To use it in Content, open one of your content pages or create a new page by clicking New, then selecting Create a File. Once you have inserted content unto your page, click the Check Accessibility button in the HTML Editor ribbon as seen in the image below.

This will open a new dialogue box which will display any Accessibility issues detected (see screenshot below). The up and down arrows can be used to cycle through the errors, if there is more than one.

The following sections go through how to fix some of the accessibility issues the checker may find.

Image Alt Text

Image Alternative text (alt text) is the most common accessibility issue likely to be raised by the Accessibility Checker. Alt text is not displayed on the image; however, it is read by screen readers. This helps individuals with visual impairments as it allows them to access the relevant information without needing to see the image in question. As per HTML standards, every image requires alt text.

When you add an image to Brightspace, you will be prompted to add alternative text (see screenshot below). Take note of the checkbox labelled This image is decorative. If an image is only for decoration and does not provide any information to the students, this option should be chosen. Brightspace will not allow an image to be inserted without alt text or an acknowledgement that the image is decorative

Colour Contrast

Colour Contrast is the difference between adjacent colours, typically a font and a background. The contrast ratio is a mathematical expression of this relationship, ranging from 1:1 to 21:1. For Accessibility purposes, a ratio of 4.5:1 is required for text and a ratio of 3:1 is required for Large text.

When using the HTML editor, changing a font colour will open a built-in colour picker that checks for these required ratios (see below).

Bad contrast Ratio vs. Good contrast Ratio

Headings

Although headings can be created by bolding text or increasing font size, these methods neglect individuals with visual impairments. Screen readers will not be able to interpret this formatted text correctly. Instead, use the built-in Heading styles within Brightspace. Using these Headings will enable screen readers to correctly interpret the information and provide users with the hierarchy of the page content. In addition, it allows them to access specific sections more easily if needed.

Headings can be selected via the HTML editor (see image above). If you are using on of our branded HTML pages, then the headings will also be stylised with the university colours.

It is also important to note that Headings should be used in a sequential order. This means that Heading 2 (H2) should only be used after Heading 1 (H1), H3 after H2, etc. If Headings do not follow a sequential order, individuals using screen readers may be confused or unable to make sense of the hierarchy of the content. Importantly, this will be raised as an issue by the Accessibility Checker.

Using Lists

Similar to Headings, lists provide visual structure to information which can be difficult to convey to users with impairments. As such, care must be taken to ensure that lists are created with the correct type and in a uniform manner. The HTML editor has two List types: ordered and unordered. An ordered list has a specific sequential order, such as rankings on a leaderboard. By contrast, an unordered list is composed of items without a specific order, such as menu options.

In order to correctly use Lists, select the items that compose the list and select either the Bulleted List option or the Numbered List option (see screenshot below).

If items are listed below a list but are not properly tagged as a list, it will be raised as an issue by the Accessibility Checker.

Descriptive Hyperlinks

Hyperlinks act as a bridge between the current webpage and other internet content. To add a hyperlink, click the Insert Quicklink icon and select URL in the pop-up window (see screenshots below).

You will then be prompted for a URL and a Title (see screenshot below). The Title is the text that will displayed instead of the URL. For Accessibility purposes, keep these practices in mind:

Tables

Tables are an excellent way to communicate complex information because the organization of rows and columns can indicate relationships to users. However, users with visual impairments do not benefit from this representation. Indeed, Tables that are not created correctly can be detrimental to individuals who use screen readers as they will be presented with disjointed tabular data.

Tables can be created within the HTML editor, by clicking on the Table button followed by Insert Table. You can create up to a 9x9 table using the tool or click on More Options if you require more rows/columns.

Once your Table has been created, you can adjust the overall settings by selecting the table (or a cell in the table), clicking on the Table button, and selecting the Table Properties option. Importantly, this is also where the option for displaying a caption can be found (see screenshot below).

A Caption is a brief description of the Table that must be included to meet Accessibility Requirements. If a caption is not added via the option above, it will be flagged by the Accessibility Checker.

In addition, Tables also require Headers if they are to be read correctly by screen readers. To add a row or column header, select the relevant cell in the question, click the Table button, and then the Cell Properties option. In the Cell Properties menu, change the Cell Type to Header cell and change the Scope to Row or Column:

The Scope will define which elements fall under that specific Header. This means that if the Scope is not set (or set incorrectly), screen readers will be unable to read the Table or will read it out of order.

How to record and insert a Video Note in Announcements, Discussions, and Assignment Feedback

Video Notes can be added via the Brightspace HTML Editor and used to supplement course content. In addition, Video Notes can also be used in News items, Discussions, and Feedback.

In order to add a Video Note through the Brightspace HTML editor in the tool you are using, click the Insert Stuff button, followed by the Add Video Note option (see screenshots below). You can then upload a video or record one using your device.

How to enable Automatically Generated Closed Captions in your Video Notes

In order to add Generated Closed Captions, select the corresponding Audio Language (if it is not detected automatically) and click the Automatically generate captions from audio checkbox (see screenshot below).

Adding Closed Captions to Brightspace content can be done by following these steps:

Assistive Tools - Screen Magnifiers

Assistive Tools can be used by Low Vision Users to support some of the needs mentioned above. For example, Windows and MacOS both have built-in screen magnification tools and pointer options. Although Instructors are not expected to use these tools themselves, they can provide information to students who need them.

Windows has a built-in Screen Magnifier that can be activated by pressing both the Windows and the Plus (+) key. It can be deactivated with Windows key + Escape key. The Magnifier has a variable zoom level and zoom window, a colour inverter, and cursor options. MacOS has a similar tool as well. It can be activated by selecting the Apple Icon > System Preferences > Accessibility > Zoom.

ZoomText Magnifier and ZoomText Fusion are software that provide Magnification as well as additional features like document reading and typing echoes. However, these software packages are not freely available, and students may not be able to accommodate the price.

Finally, there are also Browser Plug-Ins that can support Low Vision Users. Plug-Ins such as High Contrast, Whitebuster, and Change Page Colors are available for Google Chrome and allow users to change how webpages are displayed.

Tools:

Brightspace Accessibility Features

Features:

• Font Size
• Colour Contrast Checker
• Responsive Display
• Other:
  • Compliant with Accessibility Standards
  • Supports Scaling & Contrast options
  • Fully Accessible Keyboard Experience
  • No Colour-Only information display
  • Equation Editor allows for easy re-sizing

For more information on how to use these features in Brightspace, please view the information above on the Brightspace Accessibility Checker.

Creating Accessible Content

Designing content that is accessible for Low Vision Users follows many of the steps mentioned in the Accessibility Checker section above; however, they will be reiterated and highlighted for Low Vision Users specifically.

Visibility:

• Text should have a colour contrast of 4.5:1
• Images should have a colour contrast of 3:1.
• Font should be at least 12 pt for Body text.
• Use sans-serif fonts if possible.
• Convey information in multiple ways (text, colour, and shapes).
• Do not use images of text instead of text.
• Minimize the use of Bold, italics, or ALL CAPS as they can be difficult to read.
• If possible, use vector image formats (such as SVG or PDF) instead of rastor formats (JPG, PNG) due to the latter’s scaling issues.

Layout:

• Use a linear and vertical layout
• Avoid horizontal scrolling.
• Use white space effectively; too much or too little can cause difficulties for users.
• Buttons, input fields, and labels should be placed closely to the content they are associated with.

For more information on how to use these features in Brightspace, please view the information above on the Brightspace Accessibility Checker.

Creating Accessible Content for Screen Reader Users

In order to create content that can be understood and communicated by Screen Readers, Instructors should be aware of the specific needs of Screen Reader Users. Many of these were mentioned in the above Accessibility Checker section; however, they will be reiterated and highlighted for Screen Reader Users specifically.

Alt Text

Images can be used to efficiently convey information; however, users who require Screen Readers can miss out on information that is communicated this way. Alt Text alleviates this issue by being a written description that screen readers can interpret and provide to users. As such it is important that every image (except for decorative images) have associated Alt Text.

Semantic Markup

Information that is communicated by layout (headings, tables, lists, etc.) requires specific formatting for Screen Readers to interpret it correctly. If proper steps are not taken, a Reader may present information out of order (headings, lists) or a confusing cell-by-cell reading (tables).

Screen Readers and Math

Brightspace is equipped with various equation editors for adding mathematic expressions: Graphic, MathML or Latex. Math inputs are then converted and stored as MathML, which most Screen Readers are compatible with.