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

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.

View
 

Accordion

Page history last edited by Scott González 7 years, 11 months 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.

 

Keyboard

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

 

Accessibility

  • 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:

 

http://view.jqueryui.com/master/demos/accordion/default.html

 


 

6 - Open issues being discussed

 

Comments (0)

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