D2L Accessibility - Navigating D2L for Users of Assistive Technologies
Learn how to navigate D2L through the use of assistive technologies.
This article discusses how Brightspace is laid out, and how different functionality, settings, and preferences benefit individuals that navigate the system using a screen reader or other assistive technology that interprets the contents of a page.
Logging out of Brightspace using assistive technology
The Logout link is available in your personal menu on the minibar at the top of all pages. The personal menu opens when you click your name on the minibar. You can open the personal menu using an assistive technology's links list, or by tabbing through the minibar links at the top of the page.
You are automatically logged out of Brightspace after an extended period of time.
Understanding site organization using assistive technology
Brightspace Learning Environment is organized into two levels of information. Organization-related information that appears on My Home, and course-related information that appears in your course and different course tools.
When you log in to Brightspace, My Home is the first page you access. It is a central area for checking institution-wide news and events, and opening organization-level tools.
Other My Home content is organized into Widgets. Using an assistive technology program, you can navigate and search for widgets using Heading 2, and navigate across sections using Heading 3.
The Course Home is the first page you visit when you enter a course (typically referred to as News by many instructors). To access a Course Home, you must select it from the course selector on the minibar, select it from the My Courses widget, or use the search feature to find the course. If you are using the My Courses widget and have more than one role in Brightspace (for example, you are both a graduate student and a teaching assistant), you select the role tab, and then view the courses for that role. Depending on the screen reader, tabs might be read as tabs or links. In both cases, tabs are read as the first content immediately following the widget heading.
Course Home is a central area for accessing course-specific information. Like My Home, Course Home pages have a navigation area across the top of the page, and a number of widgets that contain information and links. Information and links on Course Home are specific to the course, unless the information relates to course-independent tools. For example, depending on the implementation, the navigation area for Course Home contains links to Grades, Discussions, and Quizzes for that specific course. Use Heading 2 to navigate to the main Navigation area and the different course widgets.
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.
Understanding the general page layout
Pages in Brightspace have been designed so that the layout is similar across all tools. The way you interact with the navigation area, links, headings, action buttons, context menus, tables, tabs, forms, expanding and contracting text areas, pop-ups, search, and other content areas is the same on all Brightspace pages.
Using the navigation area with assistive technology
At the top of each page is a navigation area that includes the minibar and the navbar. You can skip the navigation area on any page by selecting the Skip to main content link.
The minibar appears at the top of every page. It contains links to My Home, a course selector that you can use to switch between courses, alerts about events and updates for you and your courses, and a personal menu for setting your preferences and logging out.
You can jump to the navbar by selecting the hidden heading Navigation. The navbar typically contains an unordered list of tool links for the course you are viewing. If you are not in a course, the navbar list contains tool links for My Home. Depending on how the navbar was set up, the links might be organized into link groups. Link groups do not appear in the links list. You can locate link groups by checking the form fields list or navigating by button.
Using headings and ARIA landmarks with assistive technology
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 with assistive technology
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 Grades, 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 with assistive technology
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 with assistive technology
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 with assistive technology
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 HTML 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 HTML Editor in your Account Settings. If you turn off the HTML 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 Learning Environment or other D2L products.
Most form pages provide either a conformation 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 with assistive technology
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 with assistive technology
Using help text with assistive technology
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 Expandable and Collapsible areas with assistive technology
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.
Using Load More links with assistive technology
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 pop-ups with assistive technology
Some links open secondary windows for completing page-specific tasks. These links should indicate that they open in a new window using a title attribute. Use the Down Arrow and Tab keys to read the contents of the pop-up. The last options on the pop-up should be buttons to cancel or complete the task. Occasionally, these buttons are in a separate frame on the pop-up.
If you primarily navigate the web using a screen reader, it is recommended that you select the Show secondary windows as pop-ups option in the Account Settings tool.
Using Search with assistive technology
Most pages that contain lists of items or user names have a Search For field near the top of the page. To perform a search, enter a word or partial word in the Search For field and select the Search button or press Enter.
Use the Show Search Options link to select advanced search options.
Use the Clear Search link to clear the contents of the Search For field.
Navigating Brightspace Learning Environment using a keyboard
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 Learning Environment 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.
Using browser access keys
Different browsers use different keystroke combinations to activate access key shortcuts:
- For Internet Explorer 10 or higher: Use Alt + [accesskey] (Windows/Linux), or Control + [Accesskey] (Mac).
- 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).
Navigating the HTML Editor with a keyboard
There are different keyboard shortcuts that perform different navigation tasks in the HTML Editor:
- Use the Tab key and Shift + Tab to navigate through the options in the HTML editor.
- Use the Shift + Arrow keys to highlight content in the main area of the editor.
- Use the Shift + Alt + Q keys to jump to the top tool menu of the editor.
- Use the Shift + Alt + Z keys to jump to the main content area of the editor.
- Use the Shift + Alt + X keys to jump to the element path for the editor.