• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Whenever you search in PBworks, Dokkio Sidebar (from the makers of PBworks) will run the same search in your Drive, Dropbox, OneDrive, Gmail, and Slack. Now you can find what you're looking for wherever it lives. Try Dokkio Sidebar for free.



Page history last edited by Scott González 10 years, 1 month ago


type: widget

release: 1.5

status: released

documentation: http://api.jqueryui.com/accordion/

demo: http://jqueryui.com/accordion/




1 - Description:


An expandable/collapsible content pane. Applicable when content must be displayed within limited space. Accordions are most commonly seen in the stacked vertical style on the web, but a horizontal accordion, where clickable tabs are rotated 90 degress to the left, should also be considered. We'd need to determine how to display the text for a horizonal accordion since rotating text is not possible in HTML and stacking each letter of the label on a separate line looks odd.


An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this.  



2 - Visual Design:




3 - Functional Specifications/Requirements:


An accordion consists of a list of header/content pairs. Headers are always visible, while at most one content panel is visible. Switching between content panels works by clicking headers or navigating with the keyboard - when the accordion has focus, key up/down change focus between headers, enter activates the content of the selected header.



  • When focus is on a header: 
    • UP/LEFT - Move focus to the previous header. If on first header, moves focus to last header.
    • DOWN/RIGHT - Move focus to the next header. If on last header, moves focus to first header.
    • HOME - Move focus to the first header.
    • END - Move focus to the last header.
    • SPACE/ENTER - Activate panel associated with focused header.
  • When focus is in a panel:
    • CTRL+UP - Move focus to associated header. 



  • Follows ARIA best practices, with the following exceptions:
    • aria-multiselectable is not set to true, since we do not allow multiple open panels.
    • ctrl+page up/down is not supported because of interference with browser shortcuts, as mentioned in the best practices.
    • Added aria-controls on the headers. 
  • Notes
    • Orca starts in caret navigation mode by default, which breaks arrow navigation. The user must press Orca + F12 to switch to Gecko's navigation mode in order to get proper arrow navigation. 
  • Issues:
    • Widget icons indicating expanded/collapsed state are invisible in high contrast mode
    • Unable to see focus indication; items have color change on focus, but is lost in high contrast mode.
    • JAWS 11 sometimes announces links for acordion headers, sometimes tabs. Problem with reading tab panel content when a link is activated as JAWS goes into forms mode.



4 - Markup & Style:


(only used prior to implementation)



5 - Latest version of plugin:





6 - Open issues being discussed


Comments (0)

You don't have permission to comment on this page.