Brightspace Web Page Accessibility Checklist

print

Use A Template

The best thing you can do to make your Brightspace web pages accessible, is to use the template pages provided in your course development shell, to create new pages for your course. Use the font size and style provided in the template.

Check the Following Elements and Ensure They are Accessible

Headings

Use properly formatted headings to structure 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 dropdown format menu on the toolbar.

In addition to formatting headings as headings, the headings need to be used in the correct order. Headings chunk out your content making it easier for everyone to read. Headings are also a major way of navigating with a screen reader.

Lists

Formatting (lists, headings and links) are read aloud to screen reader users, so the content is understood in context.

Images and Graphics (including Graphs, Maps & Shapes)

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.

It’s important to write a description that conveys the content and the purpose of the image. If the image is for decorative purposes, identify it as decorative.

Links

Write meaningful link text that indicates the link’s destination

Links are a major method of navigating for everyone, but especially screen reader users. If the links are embedded into meaningful text, they are much more useful. Follow these hyperlink best practices to ensure your links are meaningful and can be understood.  Users should not have to click the hyperlink to figure out it’s purpose.

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. Follow these best practices for developing readable and navigable tables with screen readers.

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.

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.

Check color contrast with the Brightspace 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 Brightspace, make sure you choose a color that registers with a green checkmark for WCAG AA in the Select a Color window.

Math and Science Equations/Formulas/Notation

The Brightspace equation editor can be found in the HTML editor when creating a new file. The Equation Editor is available within the HTML Editor. It enables users to insert mathematical and statistical equations into their content in the Brightspace platform. It supports the input of MathML and LaTeX, as well as a graphical editor where you can visually create equations.

Putting it All Together

As you prepare to publish content in a new file, use the built in Accessibility Checker to ensure you are provided the most accessible content for your students.  The Accessibility checker follows a set of rules established by W3C and WCAG 2.0 when searching your HTML document.  To learn more about the accessibility checker read our post on Brightspace’s Accessibility Checker.

Leave a Reply