Tabs, Headers, & Footers

Components

Tabs

When multiple related screens of content need to be presented together, but not all visible at the same time, the tab bar component can be used.

Tab Badge

A badge can highlight an attribute of a tab, such as BETA status, or the number of items within.

Tab Accessibility

role="tablist" should also have a well described aria-label
In the above group example we are using an unordered list so the li needs a role="presentation"
Tabs should include a role="tab", a unique id, an aria-controls with a value that points to the id of its associated tabpanel, and an aria-selected="true" when that tab is active
Active tabs should have tabindex="0"; Inactive tabs should have tabindex="-1"; Activating a tab (click or focus) should set its tabindex value to 0 and set inactive tabs to -1
Tabpanels should have a unique id and an aria-labelledby value equal to its associated tab's id
Keyboard usage:
- Tabbing into the tab group should focus the active tab
- Focusing a tab is the same as clicking (activates that tab and tab panel) - this ensures that when the user presses tab again they are focusing the associated tabpanel content flow
- Use left/right/home/end to move the tab focus
- Focus should be infinite (pressing right at the end of the list should start over at the beginning, etc.)

Headers

Headers appear at the top of all Achieve pages, and are generally fixed so that they don't disappear as the user scrolls.

Achieve Course Header

The course header is present on all Achieve Courseware screens, giving users course context and access to help and user profile information.

Course Header

Activity (Tool) Headers

These appear above the activity application, and provide assignment status and navigation back to courseware. These do not appear if the user has accessed the tool directly from their campus LMS.

Subheaders

Some interfaces within Achieve have their own header. These always appear directly underneath either the course or activity header.

Achieve learning tools use both white and gray backgrounds. Tools and assets that provide information in digestable "chunks" tend to use a gray background, which facilitates presenting information in cards and panels. Tools and assets that provide information as a large whole tend to use a white background.

The activity header should be the same on all tool pages that require it. On pages that require subheaders, use the version that provides a slight visual contrast to help the header feel like a separate entity from the background itself.