Using Landmarks with assistive technology
Landmarks are waypoints that a screen reader uses to navigate a page. In general, Brightspace uses two landmarks:
- The navbar has a landmark called Navigation.
- The main body of all pages has a landmark called Main.
Using headings and ARIA landmarks
Headings and ARIA landmarks help you navigate pages throughout the system:
- Heading 1 and Main landmarks navigate page titles.
- Heading 2 navigates through widgets and major page sections.
- Heading 3 organizes information within widgets and page subsections.
- Navigation, Search, and Complementary ARIA landmarks provide context on a page.
Using tool navigation links and action buttons
Tool navigation and action buttons navigate areas and perform tasks within a specific tool. Typically, the tool navigation links divide complicated tools into different types of tasks. For example, in the Grades tool, the tool navigation divides the Enter Grades and Manage Grades areas. Tool navigation links are available from the hidden Heading 2 Tool Navigation.
Action buttons control page-specific tasks. For example, the Manage Grades page includes a New action button to add grade items or categories.
Using context menus
Use context menus to select an action for a specific item on a list page. Every context menu has unique link text that references the item to which it applies. For example, in your Locker, files have context menus called Actions for [file name]. The context menu opens a menu that contains actions you can perform on that file.
Using tables
Tables and grids organize content within a tool. All tables use heading and table summaries or captions. In some cases, you can navigate rows of a table by check box, since some table items have a Select [Item] check box before the item name. In some cases, table rows have a context menu after the item name. These context menus have unique link text so you can locate the correct context menu for the item you want to interact with.
You can select multiple items from a table using the Select [Item] check boxes, and then choosing an action to apply to the selected items. Actions that you can apply to multiple items appear at the top and bottom of a table and use the alt text format [action] Selected Items. For example, you can use a links list to choose Select [Topic 1] and Select [Topic 2], and then choose Edit Selected Items.
Complex tables might have drop-down lists for filtering information in the table. For example, some tables have a View drop-down list to change the sort order. Most drop-downs have an Apply or Go button that initiates the action. Some drop-down options, such as the drop-down for the number of items on each page, update when you make a selection. To use these, press ALT+Down Arrow (for Windows or Linux) or Option+ Down Arrow (for Mac) to open the drop-down menu, and then use the Up Arrow or Down Arrow and Enter key to make a selection.
If your table consists of more than one page of items, use the Page drop-down list, the Next Page icon, or the Previous Page icon to navigate to other pages.
Using Forms
Form fields on pages in Brightspace have a logical tab order. When you press tab, the focus moves to the next location identified as a link. In most cases, you cannot progress past the first mandatory field until you have entered information into the field. Mandatory fields are designated with an asterisk (*). The last tab locations on a form are usually Cancel and Save, or another action related to completing the action, such as Select or Upload.
In some cases, you can create content using Brightspace Editor. The editor is fully accessible by keyboard; however, it lacks the non-visual feedback when options or formatting are selected in the editor view. You can make changes in the source view, so you can read your changes in the code as you work, or you can turn off the Brightspace Editor in your Account Settings. If you turn off the Brightspace Editor, it is replaced by basic text fields that accept HTML coding.
Some form pages contain links to additional actions that might not be recognized as form elements by your form reader. For example, there is a link to create a New Folder on the Add Contact form in Email. It is a good practice to check for links when filling out a form in Brightspace or other D2L products.
Most form pages provide either a confirmation or error message when you submit the form using an ARIA alert. The message appears at the top of the page and should take the focus. If there are errors in your submission, the message explains each error and provides links to the appropriate fields so you can resolve the issues.
Reading equations outside of Forms Mode
If you complete a quiz, survey, or self-assessment, and answer choices contain equations made with an equation editor, you might get the best experience with an assistive technology device if you do not read the equation using forms mode. Out of forms mode MathPlayer can render the equation more comprehensibly. If you read equations within forms mode, your assistive technology might read out MathML code instead of the equation.
Using treeviews and frames
In some tools, such as Manage Files and Email, treeviews and frames help to format complicated lists of items and options. Most of these pages have options to Hide Tree (as in Manage Files or Show (or Hide) the folder list pane (as in Email). A good best practice is to check a tool's settings and tool bars for ways to simplify the page layout
Using help text
Many forms contain inline help. Help icons and links to additional help material appear either immediately after the page heading or section heading, or after individual fields. Read the entire contents of a form before filling it out, and look for help text or a help link immediately after a field if you have difficulty understanding the purpose of that field.
Using Load More links
When a list contains more items than the page currently displays, a Load More link appears on the bottom of the list as the final list item. Click the link to append more items to the list.
Using expandable and collapsible areas
Some pages have sections that are collapsed by default. Collapsed sections contain advanced or supplemental information that is not required to complete standard tasks. To expand a collapsed section using a keyboard or screen reader, select the appropriate Expand or Show link.
Navigating Brightspace using a keyboard
Brightspace is a learning management system that enables you to access online course material. Users who navigate the system using a keyboard or assistive technologies that emulate a keyboard can use keyboard shortcuts and other navigation tips to more easily use the learning management system.
Using keyboard navigation
Certain keyboard keys have specific actions you can use to navigate the system
- Use the Tab key on your keyboard to navigate through the options on a page. Use Shift+Tab to return to a previous option. Brightspace highlights page elements that you can interact with (such as links, fields, and buttons) as you tab through them, which makes it easier for you to complete tasks and select options.
- Press Enter or Return to select a link or button.
- Use the Down Arrow and Up Arrow keys to navigate drop-down lists that have an Apply or Go button to select the option.
- Use Alt+Down Arrow keys (Windows and Linux) or Options+Down Arrow keys (Mac) to open drop-down lists that do not have an Apply or Go button, and then use Up Arrow, Down Arrow, and Enter keys to select an item from the drop-down list.
- Use the Enter or Return key to open a menu (such as a context menu, an alert, or the course selector list). Then, use the Tab or Enter key to select a link.
- Use the Space Bar to select a check box or radio button option.
- Use the Down Arrow and Up Arrow keys to change a radio button option.
- Do not use Alt+F4 to close pop-up windows or pages. This action closes your browser window.
Navigating Brightspace Capture
Use the Tab key and Shift + Tab keys to move through Brightspace Capture. The first tab stop enables you to Skip over Navigation. The second tab stop displays the controls for playing content in the media player. These player controls also have access key shortcuts:
- Press access key 1 to toggle playback.
- Press access key 2 to seek reverse.
- Press access key 3 to seek forward.
- Press access key 4 to increase the volume
- Press access key 5 to decrease the volume
- Press access key 6 to focus the video.
Within the media player, you can use the Space Bar to select an option.
Navigating Brightspace Editor with a keyboard
The Brightspace editor has comprehensive screen reader and keyboard navigation support. You can move through toolbar items with the Arrow keys; use Tab and Shift + Tab to quickly switch between the toolbars and content area. The following keyboard shortcuts are available for both Windows and MacOS operating systems.
- To switch focus down to the content area, press the Tab key .
- To switch back to the toolbar, press Shift + Tab.
If a context toolbar is visible, it is positioned between the main toolbar and content area
- To move between the toolbar items, use the Arrow keys.
- To move between toolbar groups, use the Control + Arrow keys on Windows, or ⌘ + Arrow keys on MacOS.
- To open a submenu, use the Right Arrow key
- To close a submenu, use the Left Arrow or Esc key.
- To select and toggle toolbar items or open drop-down menus, use the Enter key
- To close a dialog or a menu, use the Esc key.
Keyboard shortcuts
| Shortcut Description |
Windows Shortcut |
MacOS Shortcut |
|---|
| Bold |
CTRL+B |
Command+B |
| Italic |
CTRL+I |
Command+I |
| Underline |
CTRL+U |
Command+U |
| Select All |
CTRL+A |
Command+A |
| Redp |
CTRL+Y
CTRL+Shift+Z
|
Command+Y
Command+Shift+Z
|
| Undo |
CTRL+Z |
Command+Z |
| Header 1 |
Alt+Shift+1 |
Ctrl+Option+1 |
| Header 2 |
Alt+Shift+2 |
Ctrl+Option+2 |
| Header 3 |
Alt+Shift+3 |
Ctrl+Option+3 |
| Header 4 |
Alt+Shift+4 |
Ctrl+Option+4 |
| Header 5 |
Alt+Shift+ 5 |
Ctrl+Option+5 |
| Header 6 |
Alt+Shift+6 |
Ctrl+Option+6 |
| Paragraph |
Alt+Shift+7 |
Ctrl+Option+7 |
| Div |
Alt+Shift+8 |
Ctrl+Option+8 |
| Address |
Alt+Shift+9 |
Ctrl+Option+9 |
| Insert Link |
CTRL+K |
Command+K |
| Toggle fullscreen |
CTRL+Shift+F |
Command+Shift+F |
| Find |
CTRL+F |
Command+F |
Brightspace Advanced Code Editor keyboard shortcuts
The Brightspace Advanced Code Editor enables users to view and edit source HTML code.
To open the Advanced Code Editor:
-
In Windows, click CTRL+Shift+E
-
In MacOS, click Command+Shift+E
| Shortcut Description |
Windows Shortcut |
MacOS Shortcut |
|---|
| Find |
CTRL+F |
Command+F |
| Find next instance |
CTRL+G |
Command+G |
| Find previous instance |
CTRL+Shift+G |
Command+Shift+G |
Using browser access keys
Different browsers use different keystroke combinations to activate access key shortcuts:
- For Firefox: Use Alt + Shift + [accesskey] (Windows/Linux) or Control + [Accesskey] (Mac).
- For Chrome: Use Alt + [accesskey] (Windows/Linux), or Control + Option + [Accesskey] (Mac).
- For Safari: Use Alt + [accesskey] (Windows/Linux), or Control + Option + [Accesskey] (Mac).