Accessible Mootools Widget Demo

Accordion

The Accordion gives you a fancy way to only show the really needed content.




How to use the Accordion widget

An accordion component is a collection of expandable panels.

  • 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, then focus moves to the first focusable element in the panel.
    3. If the panel is collapsed, 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.
  • Shift+Tab: Generally the reverse of Tab.
  • Left Arrow / Up 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 wrap to the last header.
  • Right Arrow / Down 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 wrap to the first header
  • Ctrl+Up Arrow: Moves focus from anywhere in the accordion content to its associated accordion header or tab respectively.
  • 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.

Accessibility Changes made

  • Original Accordion
  • Download accessible Accordion
  • Added WAI ARIA roles "tablist", "tab", "tabpanel" and WAI ARIA properties "aria-labelledby", "aria-expanded", "aria-selected" and "aria-hidden"
  • Added keyboard navigation support
  • Added high visual contrast indicator.