Accessibility

Web accessibility is all about ensuring people with disabilities have equal access to information and functionality on the web. Brightspace UI’s components will help you with accessibility when they can, but your application’s accessibility is ultimately your responsibility. If you use semantic markup, follow web standards, and put in a bit of extra effort, your application can be accessible to everyone.

As you browse the component documentation, you’ll find inline accessibility tips:

Accessibility

Look out for these, they contain useful accessibility tips for using Brightspace UI components.

Below you’ll find more general accessibility information to help you build accessibile web applications. We’ll be referring to version 2.0 of the Web Content Accessibility Guidelines (WCAG 2.0) standard.

Page Title

Each page must include a unique, descriptive and relevant title using the <title> element.

Example (html)
<!doctype html>
<html>
  <head>
    <title>Unique, descriptive page title</title>
  </head>
</html>

For single-page applications, make sure the title is kept up-to-date with changes to the primary content by setting document.title via JavaScript:

Example (javascript)
document.title = 'my new page title';
Accessibility: WCAG 2.0 Success Criterion 2.4.2 (Level A):

Text Alternatives

All non-text content (images, charts, audio, video, etc.) must be accompanied by a text alternative. For images, use the “alt” attribute or set alt=“” for decorative images. For other types of media, alternative formats may include: transcripts for audio, descriptive audio for video.

Accessibility: WCAG 2.0 Success Criterion 1.1.1 (Level A):

Keyboard Navigation and Focus Management

All page elements must be accessible using the keyboard in a logical and intuitive order. Keyboard focus should be visible and obvious. Focus should be never be lost when elements such as menus or modal dialogs are opened and closed.

Further Reading and Resources