DHTML Style Guide Table of Contents

  1. Button

    • Spacebar or Enter keys executes the action for that button.
      • If the button activation closes the containing entity or launches another entity, then focus moves to the newly opened entity.
      • If the button activation does not close or dismiss the containing entity, then focus remains on the button. An example might be an Apply or Recalculate button.

  2. Menu

    • If a menu bar item has focus and the menu is not open, then:
      • Enter, Spacebar, or the up or down arrow keys opens the menu and places focus on the first menu item in the opened menu or child menu bar.
      • Left or right arrow keys moves focus to the adjacent menu bar item.
    • When a menu is open and focus is on a menu item in that open menu, then
      • Enter or Spacebar invokes that menu action (which may be to open a submenu).
      • Up or down arrow keys cycles focus through the items in that menu.
      • Escape closes the open menu or submenu and returns focus to the parent menu item.
      • If the menu item with focus has a submenu, pressing Enter, Spacebar, or the right arrow key opens the submenu and puts focus on the first submenu item.
    • When a submenu is open and focus is on a menu item in that submenu:
      • Up or down arrow keys cycle through the submenu items (behaves the same as open menu).
      • Escape or the left arrow key closes the submenu and returns focus to the parent menu item.
    • First item in menu bar should be in the tab order (tabindex=0).
    • Disabled menu items receive focus but have no action when enter or left/right arrow is pressed.
    • Tabbing out of the menu component closes any open menus.
    • With focus on a menu item and a sub menu opened via mouse behavior, pressing down arrow moves focus to the first item in the sub menu.
    • With focus on a menu item and a sub menu opened via mouse behavior, pressing up arrow moves focus to the last item in the sub menu.
    • With focus on a submenu item, the user must use arrows or the Escape key to progressively close submenus and move up to the parent item(s).

  3. Menu Button

    • Space or Enter - With focus on the button pressing space or enter will toggle the display of the drop-down menu. Focus remains on the button.
    • Down Arrow
      • With focus on the button and no drop down menu displayed, pressing down arrow will open the drop-down menu and move focus into the menu and onto the first menu item.
      • With focus on the button and the drop-down menu open, pressing down arrow will move focus into the menu onto the first menu item.
    • Up and down arrow - With focus on the drop-down menu, the up and down arrow keys move focus within the menu items, "wrapping" at the top and bottom.
    • Escape - With focus on the drop-down menu, pressing escape closes the menu and returns focus to the button.
    • Tab Key
      • With focus on the button pressing the tab key will take the user to the next tab focusable item on the page.
      • With focus on the drop-down menu, pressing the tab key will take the user to the next tab focusable item on the page. Note that this may be difficult to achieve on a web page.

  4. Combobox

    • Tab moves focus to the drop-down button.
    • Left arrow moves focus from the button into the text field.
    • Enter posts the list. When menu is posted, up arrow and down arrow keys move highlight and selection up or down within the list.
    • Enter or spacebar closes the list, maintaining latest selection (highlighted item).
    • Escape dismisses the list and reverts to the prior selection.

  5. Checkbox

    • Two State Check Box
      • Space Bar key toggles the selection, checking or unchecking the box.
    • Three State Check Box
      • If not checked, space checks the check box
      • If checked, space unchecks the check box
      • If partially checked, space unchecks the box and unchecks all children boxes.

  6. Radio Button

    • Tab key will enter the radio group.
      • When tabbing into a group focus goes to the selected button. If none is selected it goes to the top unless you are shift tabbing and then to the bottom? Or in ARIA it can go to the radio group. HTML does not have a radio group.
      • When tabbing into the group a second time you should return to the point of previous focus (which should be the one that is checked)
      • Tab again will exit the radio group.
    • Up/Left moves forward in the group
    • Down/Right moves backwards in the group.
      • When the arrow moves focus, the button is selected.
    • Down arrow at bottom should wrap to top
    • Up arrow at top should wrap to bottom
    • Space bar will select the button the first time.
      • Assumption is that one will always be selected
      • Space bar is a select toggle selected/unselected.

  7. Radio Player

    • Control + Alt + P = Pause/Play toggle
    • Control + Alt + S = Stop the player (May be the same as pause but not a toggle)
    • Control + Alt + M = Mute
    • Control + Alt + U = Volume Up
    • Control + Alt + D = Volume Down
    • Control + Alt 1 – 5 = Change the volume. 1 being the lowest volume and 5 being the loudest.

  8. Tab Panel

    • tab - only the active tab is in the tab order. The user reaches the tabbed panel component by pressing the tab key until the active tab title receives focus.
    • left arrow - with focus on a tab, pressing the left arrow will move focus to the previous tab in the tab list and activate that tab. Pressing the left arrow when the focus is on the first tab in the tab list will move focus and activate the last tab in the list.
    • right arrow - with focus on a tab, pressing the right arrow will move focus to the next tab in the tab list and activate that tab. Pressing the right arrow when the focus is on the last tab in the tab list will move focus to and activate the first tab in the list.
    • up arrow - behaves the same as left arrow in order to support vertical tabs
    • down arrow - behaves the same as right arrow in order to support vertical tabs
    • ctrl-up arrow - with focus anywhere within the tab panel, pressing ctrl-up arrow will move focus to the tab for that panel. This is not standard behavior - is this something we want to implement? Is it necessary if we provide a mechanism to change the active tab? Similar to ctrl-pageup/pagedown in Firefox to switch tabs?
    • alt-del - When deletion is allowed, with focus anywhere within the tab panel, pressing alt-del 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. 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
    • ctrl-pageup - When focus is inside of a tab panel, pressing ctrl-pageup moves focus to the tab of the previous tab in the tab list and activates that tab. When focus is in the first tab panel in the tab list, pressing ctrl-pageup will move focus to the last tab in the tab list and activate that tab.
    • ctrl-pagedown - When focus is inside of a tab panel, pressing ctrl-pagedown moves focus to the tab of the next tab in the tab list and activates that tab. When focus is in the last tab panel in the tab list, pressing ctrl-pageup will move focus to the first tab in the tab list and activate that tab.

  9. Treeview

    • Up and down arrow keys move between visible nodes
    • Left arrow key on an expanded node closes the node
    • Left arrow key on a closed or end node moves focus to the node's parent
    • Right arrow key expands a closed node, moves to the first child of an open node, or does nothing on an end node.
    • Enter key causes on-double-click action on end nodes. Open issue: are there ever parent nodes that have an action other than expand or collapse?
    • Typing a letter key moves focus to the next instance of a visible node whose title begins with that letter.
    • Home key moves to the top node in the tree view
    • End key moves to the last visible node in the tree view
    • Ctrl-Arrow to an item with the keyboard focuses the item (but does not select it). Previous selections are maintained.
    • Ctrl-Arrow-Space - Selects non-contiguous nodes
    • Ctrl-Spacebar with focus on an item toggles the selection of the item
    • Shift-UpArrow - Extends selection up one node
    • Shift-DownArrow - Extends selection down one node
    • Shift-Home - Extends selection up to the top-most node
    • Shift-PageDown - Extends selection down to the last node
    • *(asterisk) on keypad - Expands all nodes

  10. Accordian

    • Down Arrow, Right Arrow
      • Moves input to the next Accordion Tab Label when Input Focus is on a Accordion Tab Label.
        • Note: Pressing arrow keys repeatedly when Input Focus on the first Accordion Tab Label.
      • If there is a Button Menu attached to the Accordion Tab Label 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 Accordion Tab Content.
    • Up Arrow, Left Arrow
      • Moves input to the previous Accordion Tab Label when Input Focus is on an Accordion Tab Label.
        • Note: Pressing arrow keys repeatedly when Input Focus on the last Accordion Tab Label.
      • If there is a Button Menu attached to the Accordion Tab Label 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 Accordion Tab Content.
    • End
      • Selects the last interactive element in the Accordion Tab Content when focus. is in its contents.
        • Note: This also describes how the Input Focus changes in a Accordion Tab Label's Button pull down menu
      • Selects the last Accordion Tab Label when focus is on any Accordion Tab Label.
    • Home
      • Selects the first interactive element in the Accordion Tab Content when focus is in its contents.
        • Note: This also describes how the Input Focus changes in a Accordion Tab Label's Button pull down menu.
      • Selects the first Accordion Tab Label when focus is on any Accordion Tab Label.
    • Enter/Space
      • Activates, or selects, the interactive element with keyboard Input Focus.
      • Toggles the Accordion Tab Content open [or close] when Input Focus is on its Accordion Tab Label.
    • Control + Up Arrow
      • Moves focus from anywhere in an Accordion Tab Content to its associated Accordion Tab Label.
        • Note: No action occurs when focus is in the Accordion Tab Label.
    • Tab
      • Starting from the Accordion Header, the following describes how Input Focus changes each time the Tab key is pressed :
        • Input focus moves to each interactive glyph on the accordion header.
        • Input focus moves to the first Accordion Tab Label.
        • One of the following occurs when pressed again:
          • Input focus moves to the menu button, if one is present.
          • Input Focus moves to the first interactive element in the first Accordion Tab Content.
          • Note: The Pane expands
        • One of the following occurs when step #3 is completed and the Tab key is pressed again:
          • Input Focus moves to the next Tab navigable element in the Accordion Tab Content.
          • Input Focus moves to the next interactive element outside the Accordion Component in the Web page's content.
    • 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::
        • Input focus moves from the element in the web page's content to one of the following::
          • To the last Tab focusable element in the last Accordion Tab Content, if applicable.
          • To the first Tab focusable element in the Accordion Tab Content.
          • To the Accordion Tab Label's menu button, if applicable.
          • To the Accordion Tab Label's text.
        • Input focus moves in one of two ways if input focus is on a Accordion Tab Label's text:
          • Follows steps 1[a-d] for each Pane in the Accordion Component.
          • To the last glyph in the Accordion Header if input focus is on the first Accordion Tab Label's text.
        • Input focus moves out of the Accordion Component to the first Tab navigable element before the component if focus is on the Accordion Header.
    • Control + F10
      • If present, posts the button menu in the current Accordion Tab Label.
      • Posts the Accordion Tab's menu
        • Occurs only if focus is on the Accordion Tab.
    • Escape
      • If a button menu is present and it is posted on a Accordion Tab Label, the menu closes and no action occurs.
      • Dismisses the Accordion Tab's button menu if it is posted.

  11. Treegrid

  12. Drag and Drop

Back to Top