DHTML Style Guide Working Group

The DHTML Style Guide Working Group (DSGWG) has come together to create a recommendation for keyboard shortcuts to be used in website widgets. We realize that many keystrokes are already in use by various operating systems, user interfaces, and assistive technology. Therefore our task is to recommend the best, most intuitive, most international friendly shortcut keys possible without regard to their current use. It is hoped that developers, AT vendors, and Browser manufactures will use these as guidelines, but understand it may not be practical or possible given their individual constraints.

Table of Contents

For more information about Key-navigable custom JavaScript widgets see the Codetalks Wiki.


Widgets

  1. Accordion

  2. See Tab Panel.


  3. Alert

  4. Example: A message with important information (ARIA Alert).

    Example: http://devserv.rehab.uiuc.edu/ita/jongund/citaweb/test/aria/alert/alert1.php

    An alert (ARIA active region) does not require any keyboard support. See Dialog (Modal), Dialog (Non-Modal) and Dialog (Tooltip) below.


  5. Auto Complete

  6. Example: The search tool of a web document (ARIA Search).

    A combo-box where the choices offered are filtered by the information typed into the box. An editable auto-complete allows choices that are not in the list to be entered. An example of an editable auto-complete is the URL field in the browsers. An auto complete component consists of a textbox and an associated drop-down list of choices. There is usually an icon associated with the textbox to trigger the display of the drop-down list of choices via the mouse.

    Here are the mouse and keyboard gestures to interact with the auto complete component:


  7. Button

  8. Example: Allows for user-triggered actions (ARIA Button).


  9. Checkbox

  10. Example: A control that has three possible values: "true", "false", or "mixed" (ARIA Checkbox).


  11. Combobox

  12. Example: Combobox is the combined presentation of a single line textbox with a drop down select widget. The combobox may be editable. Typically editable combo boxes are used for autocomplete behavior, and the autocomplete property would be used on the child textbox. (ARIA Combobox)


  13. Date Picker

  14. ( Complete proposal from Chris Blouch)

    Example: Choose a date from a month view of a calendar. Day and hour views are not a part of this discussion.


  15. Dialog (Modal)

  16. Example: A dialog is a small application window that sits above the application and is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response (ARIA Dialog).

    A modal dialog is a dialog that takes and holds focus until the dialog is closed or submitted.


  17. Dialog (Non-Modal)

  18.  

    Example: A dialog is a small application window that sits above the application and is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response (ARIA Dialog).

    A non-modal dialog is one which is displayed and focusable at the same time as the application which invoked it. Also like the modal dialog, focus via the tab and shift-tab key must be maintained within the dialog. However, a non-modal dialog should have a keyboard mechanism to return focus to the application while leaving the dialog open.


  19. Dialog (Tooltip)

  20. Example: A popup that displays a description for an element when a user passes over or rests on that element. Supplement to the normal tooltip processing of the user agent. (ARIA Tooltip).

    A tooltip dialog is a modal dialog that is rendered near the invoking element and visually connected via a cartoon bubble-like protrusion.


  21. Drag and Drop

  22. See ARIA Drag & Drop

    A drag and drop operation is available in contexts where the widget supports selection of objects, including single and multiple selection models. An example is a Treeview. The widget is a container of one or more objects that are potentially draggable.

    Draggable objects are identified using the property "aria-grabbed". If the aria-grabbed property is absent, or if it has the value "undefined", then the object cannot partake in drag and drop.

    Other objects are potential drop targets. Drop targets are identified using the property "aria-dropeffect" set to one or more of its values.


  23. Grid/Tree Grid

  24. Example: A grid (e.g. a data table) of ARIA role Grid. (ARIA Grid)
    Example: A data table containing rows and cells of read only information
    Example: A webmail inbox containing checkboxes, links, and read only information arranged in rows and columns.
    Example: A teacher's online gradebook containing select lists, text input fields and read-only information arranged in rows and columns.

    Tree Grid

    Example: A grid whose rows can be expanded and collapsed in the same manner as for a tree (ARIA Treegrid).

    Example: A Tree Grid is a combination of a Treeview and a Grid with rows that are expandable. Examples include a threaded view of an e-mail grid or a calendar that opens month, week and day views.

    Keyboard controls are the same as a grid with the following additions


  25. Landmark Navigation

  26. Example: ARIA provides for many roles that describe various types of content like Article, Heading, etc. It would be useful to provide a keyboard shortcut that would cycle through these landmarks similar to the way a tab key currently traverses tabstops. (ARIA: Steps for defining a logical navigational structure)

    ARIA Landmark Roles:

     

    Other ARIA Roles that might benefit from Landmark Navigation:

     

    Keyboard Shortcuts


  27. Link

  28. Example: Interactive reference to a resource (note, that in [XHTML] 2.0 any element can have an href attribute and thus be a link) (ARIA Link).


  29. Listbox

  30. Example: A widget that allows the user to select one or more items from a list of choices. (ARIA Listbox).


  31. Media Player

  32. Example: A radio or video player.


  33. Menu

  34. Example: Offers a list of choices to the user (ARIA Menu).


  35. 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.
    • Typing a letter (printable character) key moves focus to the next instance of a visible node whose title begins with that printable letter.

  36. Popup Menu

  37. (Complete proposal from Earl Johnson)

    Example: The keyboard navigation for this widget was designed to work for both the popup and menubar menu widgets. The goal was to present a desktop paradigm for posting and dismissing menu widgets.


  38. Popup Help (aka Bubble Help)

  39. (Complete proposal from Earl Johnson)

    Popup Help contains more descriptive, or actionable, help-like text and elements. It may contain, and was designed to handle, interactive elements such as a button, link, or text field. It is essentially a Popup Menu with un-necessary keystrokes turned off. The key sequence for posting Popup Help was to take advantage of F1's tie to the Help paradigm (F1 calls up application Help for example).


  40. Radio Button

  41. Example: An option in single-select list (ARIA Radio). A group of radio controls (ARIA Radiogroup).


  42. Rich Text Editor

  43. Example: Inputs that allow free-form text as their value (ARIA Textbox).


  44. Slider

  45. Example: A user input where the user selects a value from within a given range.

    A slider represents the current value and range of possible values via the size of the slider and position of the thumb. It is typically possible to add or subtract to the value by using directional keys such as arrow keys (ARIA Slider).


  46. Slider (Multi-Thumb)

  47. Example: This three thumb slider shows a histogram of the range of colors in a photo. Moving the end sliders chops out the dark and light areas while the middle thumb shifts the brightness of the overall image lighter or darker (ARIA Slider).
    Screen shot shows 3 thumb slider.

    This is a four thumb slider. Like the previous one we can compress the range of colors by modifying the end points but this one has two middle thumbs which does something magic that as a non-artist I can't really describe. Something to do with how many degrees around the color wheel the palette is shifted, or something.
    Screen shot shows 4 thumb slider.


  48. Spinbutton

  49. A form of range that expects a user to select from amongst discrete choices (ARIA Spinbutton).

    A spinbutton typically allows the user to select from the given range through the use of an up and down button on the keyboard. Visibly, the current value is incremented or decremented until a maximum or minimum value is reached.


  50. Tab Panel

  51. Example: A container for the resources associated with a tab ( ARIA Tabpanel).

    Commentary: the aria-expanded state is used to distinguish between an Accordion panel's expanded vs. collapsed state. An AT should be sensitive to aria-expanded, and relay it meaningfully to the user. Here are some role/state combinations and their meaning:

     


  52. Tool Bar

  53. Example: A collection of commonly used functions represented in compact visual form (ARIA Toolbar).

    The toolbar is often a subset of functions found in a menubar, designed to reduced user effort in using these functions.


  54. Tooltip Widget

  55. Example: A popup that displays a description for an element when a user passes over or rests on that element. Supplement to the normal tooltip processing of the user agent (ARIA Tooltip).

    (Complete proposal from Earl Johnson)

    The tooltip widget should popup automatically when the user gives input focus to the widget or element it is tied to. The tooltip widget can be dismissed by pressing the ESC key or by other methods noted below. The Tooltip Widget differs from the Dialog (Tooltip) in that it does not receive focus at any time.


  56. Treeview

  57. Example: A form of a list having groups inside groups, where sub trees can be collapsed and expanded (ARIA Tree).


  58. Window Splitter

  59. Example: A splitter is a visible separator between sections of a Window which can be used to modify the size of the panes.


  60. Wizard

  61. Example: A set of pages that create a signup wizard.


Global Recommendations

The following may apply to some or all widgets.


Gap Analysis (Styleguide vs ARIA Roles)

ARIA Role Styleguide Definition
Alert Alert A message with important information.
Alert Dialog Dialog (Modal), Dialog (Non-Modal), Dialog (Tooltip) A separate window (may be simulated) with an alert, where initial focus goes to the window or a control within it.
Application N/A A software unit executing a set of tasks for its users.
Article Landmark Represents a section of a page consisting of a composition forming an independent part of a document, page, or site.
Banner Landmark A region that contains the prime heading or internal title of a page.
Button Button Allows for user-triggered actions
Checkbox Checkbox A control that has three possible values, (true, false, mixed).
Columnheader N/A A table cell containing header information for a column.
Combobox Combobox Combobox is a presentation of a select, where users can type to select an item.
Complementary Landmark Any section of the document that supports but is separable from the main content, but is meaningful on its own even when separated from it.
Contentinfo N/A Meta information which applies to the first immediate ancestor whose role is not presentation.
Definition N/A A definition of a term or concept.
Description N/A Descriptive content for a page element which references this element via describedby.
Dialog Dialog (Modal), Dialog (Non-Modal), Dialog (Tooltip) A dialog is a small application window that sits above the application and is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response.
Directory Landmark A list of references to members of a single group.
Document N/A Content that contains related information, such as a book.
Grid Tree Grid, Grid A grid contains cells of tabular data arranged in rows and columns (e.g., a table).
Gridcell Tree Grid, grid A gridcell is a table cell in a grid. Gridcells may be active, editable, and selectable. Cells may have relationships such as controls to address the application of functional relationships.
Group Landmark A group is a section of user interface objects which would not be included in a page summary or table of contents by an assistive technology. See region for sections of user interface objects that should be included in a page summary or table of contents.
Heading Landmark A heading for a section of the page.
Img N/A An img is a container for a collection elements that form an image.
Link Link Interactive reference to a resource (note, that in [XHTML] 2.0 any element can have an href attribute and thus be a link)
List Listbox Group of small items.
Listbox Listbox A list box is a widget that allows the user to select one or more items from a list. Items within the list are static and may contain images.
Listitem Listbox A single item in a list.
Log Landmark A region where new information is added and old information may disappear such as chat logs, messaging, game log or an error log. In contrast to other regions, in this role there is a relationship between the arrival of new items in the log and the reading order. The log contains a meaningful sequence and new information is added only to the end of the log, not at arbitrary points.
Main Landmark Main content in a document.
Marque N/A A marquee is used to scroll text across the page.
Math N/A Content that represents a mathematical expression.
Menu Menu, Menu Button, PopupMenu Offers a list of choices to the user.
Menubar Menu, Menu Button, PopupMenu A menubar is a container of menu items. Each menu item may activate a new sub-menu. Navigation behavior should be similar to the typical menu bar graphical user interface.
Menuitem Menu, Menu Button, PopupMenu A link in a menu. This is an option in a group of choices contained in a menu.
Menuitemcheckbox Checkbox Defines a menuitem which is checkable (tri-state).
Menuitemradio Radio Button Indicates a menu item which is part of a group of menuitemradio roles.
Navigation Listbox A collection of links suitable for use when navigating the document or related documents.
Note N/A The content is parenthetic or ancillary to the main content of the resource.
Option Listbox A selectable item in a list represented by a select.
Presentation N/A An element whose role is presentational does not need to be mapped to the accessibility API.
Progressbar N/A Used by applications for tasks that take a long time to execute, to show the execution progress.
Radio Radio Button A radio is an option in single-select list. Only one radio control in a radiogroup can be selected at the same time.
RadioGroup Radio Button A group of radio controls.
Region N/A Region is a large perceivable section on the web page.
Row Tree Grid, Grid A row of table cells.
Rowheader Grid A table cell containing header information for a row.
Search Auto Complete & Landmark The search tool of a web document.
Separator N/A A line or bar that separates and distinguishes sections of content.
Slider Slider, Slider (Multi-Thumb) A user input where the user selects an input in a given range. This form of range expects an analog keyboard interface.
Spinbutton Spinbutton A form of Range that expects a user selecting from discrete choices.
Status Landmark This is a container for process advisory information to give feedback to the user.
Tab Tab Panel A header for a tabpanel.
Tablist Tab Panel A list of tabs, which are references to tabpanels.
Tab Panel Tab Panel Tabpanel is a container for the resources associated with a tab.
Textbox Rich Text Editor Inputs that allow free-form text as their value.
Timer N/A A numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.
Toolbar Tool Bar A toolbar is a collection of commonly used functions represented in compact visual form.
Tooltip Tooltip Widget A popup that displays a description for an element when a user passes over or rests on that element. Supplement to the normal tooltip processing of the user agent.
Tree Treeview A form of a list having groups inside groups, where sub trees can be collapsed and expanded.
Treegrid Tree Grid, Treeview A grid whose rows can be expanded and collapsed in the same manner as for a tree.
Treeitem Tree Grid, Treeview An option item of a tree. This is an element within a tree that may be expanded or collapsed

Participants and Contributors

  1. Tom Wlodkowski, AOL (Chair)
  2. Chris Blouch, AOL
  3. Tim Boland, NIST
  4. David Bolter, Adaptive Technology Resource Centre, Faculty of Information, University of Toronto
  5. Sally Cain, RNIB
  6. Amy Chen, Oracle
  7. Donald F. Evans, DeQue Systems
  8. Becky Gibson, IBM
  9. Al Gilman, W3C
  10. Jon Gunderson, Ph.D. University of Illinois at Urbana-Champaign
  11. Kenny Johar
  12. Oliver Keim, SAP
  13. Aaron M. Leventhal
  14. James Nurthen, Oracle
  15. Sailesh Panchang, DeQue Systems
  16. Lisa Pappas, SAS
  17. David Poehlman
  18. Earl Johnson, SUN
  19. Hadi Bargi Rangin, UIUC
  20. Gregory J. Rosmaita, UBATS
  21. Joseph Scheuhammer, Ph.D. Adaptive Technology Resource Centre, Faculty of Information, University of Toronto.
  22. Stefan Schnabel, SAP
  23. Richard Schwerdtfeger, IBM
  24. Victor Tsaran, Yahoo