ARIA Widget Patterns

Question 1

Vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. (Sections With Show/Hide Functionality).

Answer 1

Accordion widget

• has role=”region” or section element
• uses aria-expanded and aria-controls
• panels should reference their headers with aria-labelledby

Question 2

An element that displays a brief, important message in a way that attracts the user’s attention without interrupting the user’s task.

• Automatically announced by most screen readers, except if it is present on the page before load completes.
• In some operating systems, they may trigger a sound.
• MUST NOT affect keyboard focus.

Answer 2

Alert

• role=”alert” on div
• default aria-live setting is assertive
• default aria-atomic setting is true

Question 3

modal dialog that interrupts the user’s workflow to communicate an important message and acquire a response.
Examples: action confirmation prompts, error message notifications

Answer 3

Alert Dialog

• role=”alertdialog” on div
• aria-modal=”true”
• use aria-labelledby and aria-describedby on the main div

Question 4

list of links to the parent pages of the current page in hierarchical order

Answer 4

Breadcrumb

• role=”navigation” or nav element
• aria-label=”Breadcrumb”
• aria-current=”page” applied to the element that identifies the current page

Question 5

A widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. Give the three types.

Answer 5

Button (role=”button” or button element)

• Standard Button
• Toggle Button - two state, has aria-pressed=”true” (label must not change)
• Menu Button - aria-haspopup=”menu” or “true” and is used in the larger menu pattern

Question 6

Presents a set of items (slides) by sequentially displaying a subset of one or more slides. Give three types.

Answer 6

Carousel
- should be in role=region/section element or role=”group”
- should have aria-roledescription=”carousel”
- slides should have aria-roledescription=”slide” and have an accessible name
Types
- Basic: Has rotation, previous slide, and next slide controls but no slide picker controls.
- Tabbed: Has basic controls plus a single tab stop for slide picker controls implemented using the tabs pattern.
- Grouped: Has basic controls plus a series of tab stops in a group of slide picker controls where each control implements the button pattern. Because each slide selector button adds an element to the page tab sequence, this style is the least friendly for keyboard users.

Question 7

A checkable input that has three possible values: true, false, or mixed. Give the two types.

Answer 7

Checkbox

• role=”checkbox” or semantic input type=”checkbox”
• each checkbox has a visible label that is programatically linked
• a checked box has a checked or aria-checked=”true” attribute
• a mixed-state box has aria-checked=”mixed”

Types

• Dual-state: Toggles between two choices – checked and not checked. ()
• Tri-state: Supports an additional third state known as partially checked (aria-checked=”mixed”).

Question 8

A widget made up of two elements + 1 optional:

• Single line text box
• Pop-up element for helping users set the value of the textbox. May be as listbox, grid, tree, or dialog.
• Optional: graphical button indicating the availability of the popup that will display the popup

Answer 8

Combo Box

• role=”combobox”
• must own or contain element with role textbox or searchbox
• uses aria-expanded, aria-autocomplete, aria-controls
• may use aria-activedescendant for managing focus
• most common implementation is with listbox (aria-haspopup=”listbox”) - which has it’s own roles states, and properties

Question 9

• A window overlaid on either the primary window or another window.
• Users cannot interact with content outside this when it is open. It is often visually obscured or dimmed, and attempts to interact with it may close it.

Answer 9

Dialog

• role=”dialog”
• aria-modal=”true”
• aria-labelledby visible modal title or aria-label
• optional: aria-describedby set to id of content that describes the primary purpose or message of the dialog.
• all elements required to operate the dialog are descendants of it.

Question 10

• Button that controls visibility of a section of content.
• Often styled as a typical push button with a right-pointing arrow that turns down when pushed, and additional content is exposed.

Answer 10

Disclosure

• the element that shows and hides the content has role button.
• uses aria-expanded and aria-controls (the content) on the button

Question 11

• A page section that loads new article elements as the user scrolls, dynamically
• is a structure, not a widget, so that AT will default to read/browse (if available).
• establishes a contract with AT concerning scroll interactions.
• is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1

Answer 11

Feed
- role=”feed”
- visible label that is also accessible name
- aria-busy=”true” if content is loading
Article elements inside each have
- unique aria-labelledby name pointing to an element inside the content
- strongly recommended: aria-describedby pointing to content inside the article
- aria-posinset set to a # that represents its current position in the feed
- aria-setsize set to the total # of number of articles currently loaded, if undetermined, can be set to -1.

Question 12

This widget
- is a container that enables navigation via directional keys such as arrow keys and home/end.
- is a composite widget, so it must always contain multiple focusable elements. Only one is included in the page tab sequence.
- is generic in nature, so offers a flexible way to add keyboard support, simple to complex.
- has movement described using “row” and “column,” but this does not imply visual presentation must be tabular.
Give two types

Answer 12

Grid

• role=”grid” - best used on a table element (otherwise all table children must have roles defined manually)
• may use aria-sort, aria-selected, aria-readonly

Types

• data grid: present tabular information, often using functions like editing/sorting/etc. advanced versions may include selection shortcuts.
• layout grid: can be used to organize sets of widgets, such as links, buttons, checkboxes, etc.

Question 13

• Interactive reference to a resource.

- Target resource may be external or local (e.g. another page or another location within the same page)

Answer 13

Link

- role=”link” or < a > (strongly encouraged so context menu and modifier keys will work correctly)

Question 14

• presents a list of options and allows a user to select one or more of them.
• may be single-select or multi-select
• may be partially or fully exposed or expand via popup

Answer 14

Listbox

• role=”listbox” or semantic select element
• choices inside are role=”option” or semantic option
• single select, selected option has aria-selected=”true”
• with multi-select, all options are aria-selected=”true” or “false”

Question 15

• offers a set of choices to the user, such as a set of actions or functions

Answer 15

Menu

• role=”menu” or “menubar” (for horizontal bar menu)
• aria-orientation is used if orientation is not default (menu: vertical, menubar: horizontal)
• often activated by a Menu Button (see that pattern)
• must have children of role: menuitem, menuitemcheckbox, menuitemradio
• any parent menuitems have aria-haspopup (menu or true) and aria-expanded

Question 16

• button that opens a menu.

- often styled as a push button with a downward pointing arrow/triangle.

Answer 16

Menu Button

• role=”button” or button element
• aria-haspopup=”menu” or “true”
• aria-expanded=”true/false”
• (optional) aria-controls set to the menu element
• element that contains the menu items has role=”menu”

Question 17

• set of checkable buttons where no more than one can be checked at a time
• may be initialized with all buttons in unchecked state

Answer 17

Radio Group

• container:
  
  • role=”radiogroup” (ideally used on a fieldset with a legend)
  • aria-describedby as needed
• each radio button
  
  • has role=”radio” (or semantic input type=”radio” )
  • labelled by content, label element, aria-labelledby, aria-label
  • aria-checked=”true/false” (note: use checked instead if semantic)

Question 18

• input where the user selects a value from within a given range.
• typically have a “thumb” that can be moved along a bar or track

Answer 18

Slider

• role=”slider” or input type=”range”
• aria-valuenow, valuemin, valuemax: set to decimal values for the current, minimum allowed, and maximum allowed values.
• if aria-valuenow is not user-friendly, use aria-valuetext to create an understandable value (e.g. Monday instead of 2).
• can also be a multi-thumb slider

Question 19

• input widget that restricts value to a range of discrete values
• example: a alarm clock widget with scrolling hours and minutes
• often have a text field, increment/decrement buttons

Answer 19

Spinbutton

• role=”spinbutton” - could be semantic input type=”number or text”
• aria-valuenow, valuemin, valuemax: set to decimal values for the current, minimum allowed, and maximum allowed values.
• if aria-valuenow is not user-friendly, use aria-valuetext to create an understandable value (e.g. Monday instead of 2).
• if a value outside the allowed range can be entered, aria-invalid=”true”
• If spinbuttons are grouped together (e.g. month, day, year example), the container div has: role=”group”

Question 20

• A set of layered sections of content that display one at a time.
• styling is generally used to indicate which tab is focused and/or active (same when focus follows selection).
• Authors must provide all keyboard support, there is no equivalent semantic element.

Answer 20

Tabs

• role=”tablist” element contains role=”tab” elements (often semantic buttons)
• each content container has role=”tabpanel”
• aria-controls set to the id of their associated tabpanel
• aria-selected=”true” if selected (including default visible), otherwise “false”
• tabpanels all have aria-labelledby referencing the id of their associated tab

Question 21

• container for grouping sets of controls such as buttons, menubuttons, or checkboxes.
• the role is used to communicate the presence and purpose of this set
• reduces tab stops in menus with many controls
• example is a set of editing controls at the top of a document editor

Answer 21

Toolbar

• role=”toolbar”
• aria-labelledby visible label or aria-label
• if vertical, aria-orientation=”vertical”

Question 22

• Popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
• It typically appears after a small delay and disappears when esc is pressed or on loss of focus/hover.
• The widget itself does not receive focus, and therefore should not contain focusable elements. A hover that contains focusable elements can be made using a non-modal dialog.
• Work in progress, does not yet have task force consensus

Answer 22

Tooltip

• role=”tooltip”
• activating element is focusable (button, link)
• triggering element uses aria-describedby set to the id of the tooltip content (unless it’s a label for the item, like an icon, then it can just be aria-labelledby)

Question 23

• widget that presents a hierarchical list.
• any item may have child items, and items that have children may expand/collapse.
• visual indicator informs the user which node is focused.
• may be single-select or multi-select
• selection may follow focus in single-select versions
• example: file system navigator

Answer 23

Tree View

• role=”tree” (usually on a ul element)
• if multiselectable, aria-multiselectable=”true”
• nodes have role=”treeitem”
• parent nodes use aria-expanded, and contain and own an element with role=”group” (usually a ul)
• selected nodes have aria-selected=”true” (if multi-select, all unselected-but-selectable have aria-selected=”false”)
• if content loads dynamically: set aria-level, aria-setsize, and aria-posinset for each node.

Question 24

• hierarchical data grid consisting of tabular information that is editable or interactive.
• any row may have child rows that can expand/collapse
• example: display of messages and message responses for an email discussion list.
• screen readers will typically be in application mode while interacting with this, so anything that needs to be read must be focusable or referenced by something focusable.
• may be single or multi-select, if single, selection may follow focus.

Answer 24

Treegrid

• role=”treegrid” (generally on a table element)
• each cell is DOM descendant or owned by a row, and has a role of columnheader, rowheader, or gridcell
• if multi-select, aria-multiselectable=”true”
• if sortable, aria-sort (follow grid pattern)
• if read-only on all cells (editing disabled), aria-readonly=”true”
• descendant requirements match table
• aria-expanded used on parent rows that can expand/collapse

Question 25

• A moveable content separator between two sections of a window.
• Can be free range or toggle between preset positions.
• has a primary and secondary pane, and values that represent the sizes of each.
• Introduced in ARIA 1.1 as a focusable widget version of the separator role, not finalized

Answer 25

Window Splitter

• role=”separator”
• aria-labelledby visible label or aria-label
• aria-controls set to the id of the primary pane
• aria-valuemin set to minimum size of primary pane (e.g. 0)
• aria-valuemax set to maximum size of primary pane (e.g. 100)
• aria-valuenow set to value representing current size (e.g. 25)