ABCDEFGHIJKLMNOPQRSTUVWXYZAAABACADAE
1
HTML ElementUI PatternWAI-ARIA roleSemantic meaningTop layerPositioning
Transient? ("One at a time"?)
Dismiss behaviorInvocationInitial focusFocus managementFocus trappingKeyboard behavior
2
<dialog>Existing non-modal <dialog>"dialog" (non-modal)A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element. Dialogs are most often used to prompt the user to enter or respond to information. A dialog that is designed to interrupt workflow is usually modal.YesFixed, anchored to invoking element.NoStays open until closed by user action (e.g. clicking "Close")Click on a button/invokerFocus the first focusable descendant (modulo this)RequiredNoNone
3
<popup>teaching UI"dialog" (non-modal)Same as "dialog" role aboveYesFixed, anchored to context element for teaching UI.YesStays open until closed by user action (e.g. clicking "Next" or "Close")Automatic on page load (?)Typically not focusableNot requiredNo (not focusable)None (not focusable)
4
<popup>date picker"dialog" (non-modal)Same as "dialog" role aboveYesFixed, anchored to invoking element.YesLight-dismiss to cancel. Clicking a date also closes the picker.Click on picker iconFocus selected date (or today if none)RequiredNo (tabbing out of the list closes the picker)Arrows navigate dates
5
<popup>generic picker"dialog" (non-modal)Same as "dialog" role aboveYesFixed, anchored to invoking element.YesLight-dismiss to cancel. Picking an item also closes the picker.Click on picker iconFocus currently-selected item (or first item if none)RequiredNo (tabbing out of the list closes the picker)Arrows navigate options
6
<popup>"Generic" popup"dialog" (non-modal)Same as "dialog" role aboveYesFixed, anchored to invoking element.YesLight-dismiss to close.Click on a button/invokerTypically not focused when openedRequiredNoNone
7
<listbox>selectmenu listbox"listbox"A widget that allows the user to select one or more items from a list of choices. See related combobox and list. Items within the list are static and, unlike standard HTML select elements, may contain images. List boxes contain children whose role is option. To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus.YesFixed, anchored to invoking element.YesLight-dismiss to cancel. Picking an item also closes the picker.Click on the in-page elementFocus first element, or previously selected optionRequiredNo (tabbing out of the list closes the picker)Arrows navigate options
8
<listbox>autocomplete options"listbox"Same as "listbox" role aboveYesFixed, anchored to invoking element.YesLight-dismiss to cancel. Picking an item also closes the picker.focus a text fieldFocus first elementRequiredNo (tabbing out of the list closes the picker)Arrows navigate options
9
<listbox>combobox"listbox"Same as "listbox" role aboveYesFixed, anchored to invoking element.YesLight-dismiss to cancel. Picking an item also closes the picker.Click on the in-page element, or sometimes focus a text fieldRemain on activating elementRequiredNo (tabbing out of the list closes the picker)Arrows navigate options
10
<actionmenu>action menu / context menu"menu"A type of widget that offers a list of choices to the user. A menu is often a list of common actions or functions that the user can invoke. The menu role is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application. To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus.YesFixed, anchored to invoking element.YesLight-dismiss to cancel. Picking an item also closes the picker.Click on the menu buttonFocus first elementRequiredNoNone
11
<navmenu>navigation menu"navigation"A collection of navigational elements (usually links) for navigating the document or related documents.?Fixed, anchored to invoking element.?Light-dismiss to cancel. Picking an item navigates.Click on the menu buttonFocus first elementNot requiredNoNone
12
<tooltip>tooltip"tooltip"A contextual popup that displays a description for an element. The tooltip typically becomes visible in response to a mouse hover, or after the owning element receives keyboard focus.YesFixed, anchored to invoking element.YesStop hovering over itemHover over itemTypically not focusableNot requiredNo (not focusable)None (not focusable)
13
<alert>toast/alert"alert"A type of live region with important, and usually time-sensitive, information. Alerts are used to convey messages to alert the user. Alerts are assertive live regions and will be processed as such by assistive technologies. Neither authors nor user agents are required to set or manage focus to them in order for them to be processed. Since alerts are not required to receive focus, content authors SHOULD NOT require users to close an alert. If an alert requires focus to close the alert, then content authors SHOULD use alertdialog instead.YesFixed. Likely doesn't need anchor positioning.No (?)Asynchronous / JS, or a button to dismissAsynchronous / JSTypically not focused when openedNot requiredNoNone
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100