Updated Accordion Component Keyboard Navigation Proposal, 100507

10/05/07
Earl Johnson
Sun Microsystems, Inc.

Main Proposal Sections

  1. Component Description
  2. Nomenclature
  3. Accordion Component "Key Sequence-Action" Proposal Table

This table factors in the feedback at the W3C/WAI's DHTML 08/24/07 Styleguide meeting. The basic feedback was:

What else is new?

Changed or updated text in the proposal table is capitalized

Component Description

The Accordion component is much like a sideways Tab, with vertical sliding behavior for opening the currently selected section while closing the previously open section. The following link takes you to an example that can be referred to as this proposal is reviewed.

http://webdev2.sun.com/example/faces/accordion/example1.jsp

Important Note: the examples on this page are not keyboard accessible yet, it is pointed to only as a reference because it is the closest visual example to what the proposal below is meant to cover. These examples do not include menu buttons on the accordion pane headers.

Nomenclature

The following table defines what the various areas referred to in the proposal table below are.


Accordion Component This is the Accordion widget, it's the container [or parent] into which the following geographical oriented elements are added.
Accordion Header Header that contains the name, or title of the accordion component; it only contains window manager type controls [all open, all closed, QUIT?].
Accordion Container The accordion container is the area where the content for each of accordion pane's are presented, there can be 1-n panes.
Pane Header The header contains the name, or title of a pane and a button pull down menu; the button pull down menu is optional.
Pane Content The content contains the text and/or interactive elements that the user can interact with.


Accordion Component "Key Sequence-Action" Proposal Table

Key Description

1. Down Arrow, Right Arrow
  • Moves input to the next Pane Header when Input Focus is on a Pane Header.
    • Note: Pressing arrow keys repeatedly when Input Focus on the first Pane Header.
  • If there is a Button Menu attached to the Pane Header and it is posted, pressing the down/right arrow moves Input Focus to the next Menu Item.
    • Note: The Button Menu operates like a standard Menu, pressing Tab posts the menu.
  • Moves Input Focus right and/or down when it is on an Arrow Key navigable element within the Pane's Content.

2. Up Arrow, Left Arrow
  • Moves input to the previous Pane Header when Input Focus is on a Pane Header.
    • Note: Pressing arrow keys repeatedly when Input Focus on the last Pane Header.
  • If there is a Button Menu attached to the Pane Header and it is posted, pressing the up/left arrow moves Input Focus to the previous Menu Item.
    • Note: The Button Menu operates like a standard Menu, pressing Tab posts the menu.
  • Moves Input Focus left and/or up when it is on an Arrow Key navigable element within the Pane's Content.

3. End
  • Selects the last interactive element in the Pane's Content when focus. is in its contents.
    • Note: This also describes how the Input Focus changes in a Pane Header's Button pull down menu
  • Selects the last Pane Header when focus is on any Pane Header.

4. Home
  • Selects the first interactive element in the Pane's Content when focus is in its contents.
    • Note: This also describes how the Input Focus changes in a Pane Header's Button pull down menu.
  • Selects the first Pane Header when focus is on any Pane Header.

5. Enter/Space
  • Activates, or selects, the interactive element with keyboard Input Focus.

6. Control+Page Down
  • Selects the next Pane Header regardless of where focus is in the current Pane.
    • Focus cycles from the last Pane Header to the first Pane Header.
    • Note: Control+Tab is the more "Tabbed Pane-ish" way of progressing between Panes.

7. Control+Page Up

  • Selects the previous Pane Header regardless of where focus is in the current Pane.
    • Focus cycles from the first Pane Header to the last Pane Header.
    • Note: Shift+Control+Tab is the more "Tabbed Pane-ish" way of progressing between Panes.

8. Control + Up Arrow

  • Moves focus from anywhere in a Pane's Content to its associated Pane Header.
    • Note: No action occurs when focus is in the Pane Header.

9. Control + Down Arrow
  • Moves focus from a Pane Header to the first focusable element in the Pane's Content.
    • Note: No action occurs when focus is in the Pane Content.

10. Tab

Starting from the Accordion Header, the following describes how Input Focus changes each time the Tab key is pressed :

  1. Input focus moves to each interactive glyph on the accordion header.
  2. Input focus moves to the first pane header.
  3. One of the following occurs when pressed again:
    1. Input focus moves to the menu button, if one is present.
    2. Input Focus moves to the first interactive element in the first Pane's Content.
  4. One of the following occurs when step #3 is completed and the Tab key is pressed again:
    1. Input Focus moves to the next Tab navigable element in the Pane's Content.
    2. Input Focus moves to the next interactive element outside the Accordion Component in the Web page's content.
11. Shift+Tab

Moves input focus in reverse of what Tab does generally; the following describes what happens when input focus starts on the first Tab navigable  element after an accordion pane and Shift+Tab is repeatedly pressed::

  1. Input focus moves from the element in the web page's content to one of the following::
    1. To the last Tab focusable element in the last pane's content, if applicable.
    2. To the first Tab focusable element in the pane's content.
    3. To the pane header's menu button, if applicable.
    4. To the pane's header text.
  2. Input focus moves in one of two ways if input focus is on a pane header's text:
    1. Follows steps 1[a-d] for each Pane in the Accordion Component.
    2. To the last glyph in the accordion header if input focus is on the first Pane Header's text. 
  3. Input focus moves out of the Accordion Component to the first Tab navigable element before the component if focus is on the accordion header.

12. Control+F10
  • If present, posts the button menu in the current Pane Header.
  • Posts the accordion header's menu
    • Occurs only if  focus is on the Accordion Header.

13. Esc
  • If a button menu is present and it is posted on a Pane Header, the menu closes and no action occurs.
  • Dismisses the Accordion Header's button menu if it is posted.



\