How to Use Brightspace Accessibility Checker

Introduction

The Brightspace HTML Editor includes a built-in Accessibility Checker that helps instructors identify and fix common accessibility issues in course content. This tool scans your page for concerns such as missing alt text, poor color contrast, and improper heading structure, and provides suggestions to improve accessibility. Using the Accessibility Checker ensures your content is more inclusive and aligned with accessibility standards such as WCAG 2.1.

Important: The Accessibility Checker helps identify common issues, but it does not replace real-user testing (e.g., screen readers or keyboard navigation).

Step by Step Instructions

  1. Log in to Brightspace and access your course.

  2. Navigate to Content and open an existing page or create a new one.

  3. In the HTML Editor, locate the Accessibility Checker icon (next to the Format Painter tool).

    • Circle with a tiny human.

Orange box around Accessibility Checker icon in the toolbar

  1. Click Check Accessibility.

  1. Review the issues listed in the checker panel.

Orange box around the Accessibility Checker window

  1. Select each issue to view details and suggested fixes.

  1. Apply the recommended changes directly within the editor, or click Repair if applicable..

  1. Finally, re-run the checker until no issues remain.

IMPORTANT: The accessibility checker may not flag all non-accessible content or repair it automatically. It is the instructor's responsibility to validate all content within the page content area manually for best practice.

Alt Text, Color Contrast, Headers, etc...

Common Issues Detected by the Accessibility Checker may include missing alternative text (alt text) for images, low color contrast, improper heading structure, incorrect use of lists, non-descriptive hyperlinks, and improperly formatted tables. Below, we will note the best practices for detecting accessibility manually.

Alt text

  • Every image must include alternative text.
  • Describe the purpose of the image, not just what it looks like.
  • If the image is decorative, mark it as decorative; this means the image won't have alternative text and will be skipped by ReadSpeaker because it's marked as "unimportant" to students or viewers.
  • Example, an image that showcases a spotted horse:
    • Do not leave the image as the original defaulted title for text: "image01.png" or "horse-picture-white-grey.jpeg"
    • Do use alternative texts and captions such as: "An adult horse that is white with black and grey spots on its body."

Provide Alternative Text panel

Color Contrast

  • Ensure text is readable against its background.
  • Recommended contrast ratios:
    • 4.5:1 for normal text
    • 3:1 for large text
  • Avoid using color alone to convey meaning (e.g., “items in red are important”).
  • Verify colors via Select a Color tool when highlighting text.

"Select a Color" panel with orange box arounf small and large text color contrast verifier

Headings

  • Use proper heading levels (H1 to H2 to H3, etc.).
  • Do not skip levels (e.g., H1 to H3).
  • Avoid using bold text as a substitute for headings.
  • Headings help screen reader users navigate content efficiently.

Lists

  • Use bulleted lists for non-sequential items.
  • Use numbered lists for steps or ordered content.
  • Avoid manually typing lists with dashes or numbers.

Accessibility Checker window with an orange box around incorrect list example

Hyperlinks

  • Use descriptive link text.
    • Do not use: “Click here” or "Use this link" or "here: <link>"
    • Do use: “View the course syllabus” or "See Chapter One" or "
  • Avoid displaying raw URLs as link text.
  • Do not place multiple links with the same destination side-by-side.
  • Have links open to a new tab.

Insert Quicklink panel with orange box around settings

Tables

  • Use tables only for data, not layout.
  • Include:
    • A table caption
    • At least one header row or column
  • Ensure headers are properly associated with data cells.
  • Below is an example.

Student Name Group Number Topics
Vaquero Student 5 Hypothesis
Victory 1 Poetry

Table of student names, their assigned group number, and assigned topic.

Troubleshooting Tips

  • Accessibility Checker not visible? Ensure you are in the HTML Editor view of a content page.
  • Fixes not applying? Click directly on the issue in the checker panel and apply the suggested correction.
  • Color contrast still flagged? Try adjusting text or background colors slightly to meet WCAG standards.
  • Images still flagged after adding alt text? Confirm the alt text field is not left blank.
  • Interactive content not flagged? The checker only scans static HTML; external tools require separate testing.

Additional Resources

Frequently Asked Questions

Q: Does the Accessibility Checker fix issues automatically?

A: It provides suggestions and quick fixes, but you must confirm and apply changes manually.

Q: Do I need to use the checker on every page?

A: Yes. It is recommended to run the checker on all content pages to ensure accessibility.

Q: Will students see accessibility issues?

A: No. The checker is only visible to instructors during editing.

Q: Does this guarantee my course is fully accessible?

A: No. It helps with common issues, but full accessibility requires additional testing.

Q: Can I use templates to improve accessibility?

A: Yes. Accessible templates can help maintain consistent and compliant course design. Ask an instructional designer or see COLTT HTML Page Templates.

Print Article