Fully Accessible Tabs/Accordion/Toggle Plugin Examples

An accordion component is a collection of expandable panels associated with a common outer container. Panels consist of a header and an associated content region or panel. The primary use of an Accordion is to present multiple sections of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy. The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates and makes the contents of each panel visible (or not) by interacting with the Accordion Header. Terms for understanding accordions include:

accordion component

Collection of panels within a common outer pane.

accordion header

Label area of an accordion panel. This is where you find the control to expand or collapse the panels.

accordion panel

Contents area associated with an accordion header.

• Tab - When focus is on an accordion header, pressing the Tab key moves focus in the following manner:
  1. If interactive glyphs or menus are present in the accordion header, focus moves to each in order.
  2. When the corresponding panel is expanded (its aria-expanded state is 'true'), then focus moves to the first focusable element in the panel.
  3. If the panel is collapsed (its aria-expanded state is 'false' or missing), OR, when the last interactive element of a panel is reached, the next Tab key press moves focus as follows:
     • If a subsequent accordion panel is already expanded, focus moves to the first focusable element in this subsequent panel.
     • If no subsequent accordion panel is expanded, focus moves to the first focusable element outside the accordion component.
• Left arrow
  • When focus is on the accordion header, a press of up/left arrow keys moves focus to the previous logical accordion header.
  • When focus reaches the first header, further up/left arrow key presses optionally wrap to the first header.
• Right arrow
  • When focus is on the accordion header, a press of down/right moves focus to the next logical accordion header.
  • When focus reaches the last header, further down/right arrow key presses optionally wrap to the first header
• Up arrow - behaves the same as left arrow
• Down arrow - behaves the same as right arrow
• Control+Up arrow - Moves focus from anywhere in the accordion content to its associated accordion header or tab respectively.
• Control+PageUp -
  • When focus is inside of an accordion pane, pressing Control+PageUp moves focus to the accordion header of the previous accordion pane.
  • When focus is in the first accordion header content, pressing Control+PageUp optionally moves focus to the last accordion header.
  • Focus will simply move to the header and will require Enter/Space to expand/collapse the accordion pane.
• Control+PageDown -
  • When focus is inside of an accordion pane, pressing Control+PageDown moves focus to the header of the accordion pane.
  • When focus is in the last accordion header content, pressing Control+PageDown optionally moves focus to the first accordion header.
  • In the case of an accordion, focus simply moves to the header and requires Enter/Space to expand/collapse the accordion pane.
• End - When focus is on the accordion header, an End key press moves focus to the last accordion header.
• Home - When focus is on the accordion header, a Home key press moves focus to the first accordion header.
• Enter/Space - When focus is on an accordion header, pressing Enter/Space toggles the expansion of the corresponding panel.
  • If collapsed, the panel is expanded, and its aria-expanded state is set to 'true'.
  • If expanded, the panel is collapsed and its aria-expanded state is set to 'false'.
• Shift+Tab - Generally the reverse of Tab.
• Alt+Delete -
  • When deletion is allowed, with focus anywhere within the tab panel or tab, pressing Alt+Delete will delete the current tab and tab panel from the tabbed interface control. If additional tabs remain in the tabbed interface, focus goes to the next tab in the tab list. If no additional tabs remain, then focus moves to the last place that held focus in the previous tab panel.
  • An alternative to providing a keystroke to close a tab is to provide a context menu that is associated with the tab title. When focus is on the tab, pressing Shift-F10 or pressing the right mouse button will open a context menu with the close choice.
  • A warning should be given to the user before allowing the delete to occur.

In Firefox, pressing Control+PageUp / Control+PageDown moves between browser tabs. Firefox also supports Control+Tab and Control+Shift+Tab to move between tabs. Internet Explorer 7 also uses Control+Tab and Control+Shift+Tab. There may be advantages to using Control+PageUp/PageDown as the keys to change tabs because it is a recognizable keystroke to at least Firefox users and it is also supported by the Windows operating system to move between panels in a tabbed dialog.

You should be aware of two issues with using Control+PageUp/PageDown:

• The first arises when the user is within a tabbed interface control on a Web page. Here they can not easily switch browser tabs without first moving focus outside of the tabbed interface control. This may be acceptable.
• The second arises when the entire web page is a tabbed interface control. In this case the user could not switch browser tabs unless the control on the web page ignored the Control+PageUp/PageDown keypress (and thus letting the browser access it) when the first or last tab was reached.

• The accordion component must have a role of tablist and have aria-multiselectable="true" This will enable an assistive technology, such as screen reader, to convey that the tablist is an accordion or a multiselectable tablist. This will also tell the user that the keyboard navigation matches an accordion and not a tablist.
• Contained within the tablist is a set of tab/tabpanel pairs.
• Each header tab in the tablist has a role of tab.
• The accordion panel uses the role tabpanel and should have an aria-labelledby relationship referencing the correponding header having a role of tab
• The tabpanel is considered a grouping for all content consisting of that tabpanel.
• An accordion should manage the expanded/collapsed state of each tab by maintain its aria-expanded state.
• An accordion should manage the selected state of each tab by maintaining its aria-selected state.
• An accordion should convey the visibility of each tabpanel by maintaining its aria-hidden state.