ARIA Design Patterns Overview

There are quite a few ARIA design patterns, and many of them are similar. Here is a guide to them, to help you determine when you should use which pattern. Note that not all of these patterns are represented by the components found in this documentation:

ARIA Menus

Allow the user to select an option from a list of options

Invoked as a child of menu bar, from another element like a button (menu button), or as a context menu (popup menu)

ARIA Dialogs

Sit above the application window and prompt for user interaction

• Modal: the user can only interact with the dialog until it is dismissed
  • specialized types: tooltips or popup help that contain interactive content, an alert or message that requires user response
• Non-Modal: the user can move between the dialog and the application window
• A wizard is a sequence of dialogs (or panels) that guide the user through performing a task

ARIA Help / Messages

Provide additional information to the user, often about an element or an action taken

• Popup help is a type of modal dialog and uses the F1 help paradigm
• tooltips that allow for user interaction (tooltip dialog)
• tooltips that never receive focus (tooltip)
• An alert is a message that contains important information

ARIA Form Elements

These are interactive elements usually associated with a form

• a listbox is the equivalent of an HTML select control. The user can select one or more items from a list
• a combo box allows the user to input text or select an item from a list. It can be implemented as autocomplete, where the list of items is filtered as the user types
• a button is the equivalent of an HTML button, and allow the user to trigger an action
• a check box is like an HTML checkbox, but also provides a mixed state in addition to true/false (usually in a UI where there are children elements with a mix of true and false states
• a radio button is equivalent to an HTML radio button. It is an option in a single-select list
• a date picker allows the user to select a date, multiple dates, or date ranges
• a rich text editor allows the user to enter free-form text
• a slider allows the user to select a value or range of values via one or more thumb controls
• a spin button allows the user to select from a range of values, typically with the use of an up/down button (or up/down keys)

ARIA Site Navigation

These are navigational areas of the site that persist across most of the pages. There can be multiple site navigation areas

• Site Navigation can be flat, and marked up as a list box, tool bar, or menu bar, or multi-leveled, and marked up as a tree.

ARIA Page Interaction

These are design patterns that fall into no other above category, and help the user interact with the page

• An accordion is a set of panels that expand and contract with a common outer container
• Drag & drop is a pattern for moving things around
• Grids, sortable grids, and tree grids are like HTML tables but you can interact with them by sorting data, navigating and selecting the data cells, and expanding/collapsing rows
• Links are like HTML links and provide an interactive reference to a resource eitther local to the application, or external
• Tabs have associated panels of content, which are displayed as the tab is navigated to
• Tool bars are a flat, non-heirarchical collection of controls
• Trees are usually associated with navigation; they are a heirarchical list made up of one or more top level nodes and child nodes that can be expanded/collapsed
• A window splitter is a visible separator between sections of your application that is used to modify the size of the panes