Understanding the general page layout

Pages in Connect 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 Connect 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 unit selector that you can use to switch between units, alerts about events and updates for you and your units, 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 unit you are viewing. If you are not in a unit, the navbar list contains tool links for My Home or a department. 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 Connect 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 Connect.

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

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 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.