Accessibility Toolkit User Interaction Design Patterns Contents
LABELING FORMAT ..……………...... 3 Grid ………………………………………. 39 Tooltip widget ……………………...... 91 COMPONENTS ..………………...... 4 Link …………………………………...... 45 Tree view ……………………...... 94 Accordion ...... 4 Listbox ………………………………...... 48 Window splitter ……………………..... 103 Alert ...…………………………………..……... 10 Menu bar …………………………...... 55 FOUR THINGS TO INCLUDE…...... 107 Alert and message dialog………..….. 12 Menu button …………………...... 60 HIGH CONTRAST PALETTES……...... 112 Breadcrumbs …..…………………………... 15 Radio group …………………...... 63 Button ..……………………………………….. 18 Slider ……………………...... 67 Checkbox (dual-state) ……………...... 21 Slider (multi-thumb) ………..……. 71 Combo box .………………………………… 24 Spinbutton ……………………...... 75 Dialog (modal) ……………………………. 29 Table ……………………...... 79 Disclosure (show/hide) .………………. 32 Tabs ……………………...... 83 Feed ……………………………………...…….. 35 Toolbar ……………………...... 88
Accessibility Toolkit, UI Design Patterns Page 2 of 113 Labeling format
Visible label The name of the specific control, such as “Save” or “File list.”
Element label The name of the control that the screen reader says. Usually the same as the visible label.
Role The type of control, such as “button” or “checkbox.” This is the ARIA “role” or “label.”
State The interactive state, such as “Disabled” or “Selected.”
Indexing Enumeration of selection options within an element. This generally does not need to be added programmatically when appropriate element roles are used.
Hints A description, if needed, to understand the control. Must be brief if present.
Sample Visible label: Save Label: Save Role: Button Hints: Press Enter or Control + S to save
Accessibility Toolkit, UI Design Patterns Page 3 of 113 Accordion
Accordions are used to expand and collapse content on a page, items in a list, or items in supplemental navigation. Accordion (1 of 5)
Screen reader
1 Visible label: Featured topics 1 Label: Featured topics Role: Accordion 2 State: Expanded Indexing: Contains 4 items
2 Visible label: Check or track my Microsoft Store order Label: Check or track my Microsoft Store order Role: Link Indexing: 1 of 4 3
3 Visible label: Returns and refunds Label: Returns and refunds Role: Accordion State: Collapsed
Accessibility Toolkit, UI Design Patterns Page 5 of 113 Accordion (2 of 5)
Keyboard controls
Next focusable element
Tab Moves focus to the next focusable element; all focusable elements in the accordion are included in the page tab sequence.
Previous focusable element
Shift + Tab Moves focus to the previous focusable element.
Accessibility Toolkit, UI Design Patterns Page 6 of 113 Accordion (3 of 5)
Keyboard controls
or Expand selected
Enter or Space When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.
When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations always require one panel to be expanded and only allow one panel to be expanded at a time; so, they do not support a collapse function.
Accessibility Toolkit, UI Design Patterns Page 7 of 113 Accordion (4 of 5)
Keyboard controls
Between accordion headers
Down arrow (optional) If focus is on an accordion header, down arrow moves focus to the next accordion header.
If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
Up arrow (optional) Moves focus to the previous accordion header.
If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.
Accessibility Toolkit, UI Design Patterns Page 8 of 113 Accordion (5 of 5)
Keyboard controls
First accordion header Home (optional) When focus is on an accordion header, moves focus to the first accordion header.
Last accordion header End (optional) When focus is on an accordion header, moves focus to the last accordion header.
Accessibility Toolkit, UI Design Patterns Page 9 of 113 Alert
Alerts provide contextual feedback or error messages for typical user actions. Alert (1 of 1)
Screen reader
1 Visible label: Set your time zone 1 Label: Set your time zone Content: To set your profile photo and receive reminders, go to Mail and set the time zone for your calendar. Role: Alert
Keyboard controls Keyboard interaction not required An alert (WAI-ARIA live region) does not require any keyboard interaction. Note It is crucial that alerts do not affect keyboard focus. Alerts should provide users with important and potentially time-sensitive information without interfering with their ability to continue working.
Accessibility Toolkit, UI Design Patterns Page 11 of 113 Alert and message dialog
An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response. Alert and Message Dialog (1 of 2)
Screen reader
1 Visible label: Log out? 1 Label: Log out? Content: Are you sure you want to log out of your Microsoft account? Role: Alert 2 3
2 Visible label: Yes Label: Yes, log out Role: Button
3 Visible label: No Label: No, do not log out Role: Button 4
4 Once choice is finalized, dialog is dismissed. Screen reader may state change that is activated by button (i.e. “page loading.”)
Accessibility Toolkit, UI Design Patterns Page 13 of 113 Alert and Message Dialog (2 of 2)
Keyboard controls
Next focusable element
Tab 1 2 Moves focus to the next focusable element inside the dialog. If focus is on the last focusable element inside the dialog, moves focus to the first focusable element inside the dialog.
Previous focusable element Shift + Tab Moves focus to the previous focusable element inside the dialog. If focus is on the first focusable element inside the dialog, moves focus to the last focusable element inside the dialog.
Close dialog Escape Closes the dialog.
Accessibility Toolkit, UI Design Patterns Page 14 of 113 Breadcrumbs
A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. Breadcrumbs (1 of 2)
Screen reader
1 Visible label: Home 1 2 Label: Home Role: Breadcrumb, link Indexing: 1 of 4
2 Visible label: Evernote Label: Evernote Role: Link Indexing: 4 of 4
Accessibility Toolkit, UI Design Patterns Page 16 of 113 Breadcrumbs (2 of 2)
Keyboard controls
Next breadcrumb link 1 2 3 4 Tab Moves focus to next breadcrumb link.
Execute link
Enter Activates the link.
Accessibility Toolkit, UI Design Patterns Page 17 of 113 Button
A button is 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. Button (1 of 2)
Screen reader
1 Visible label: Shop now Label: Shop now Role: Button
2 Button is activated. Screen reader states change caused by button activation (i.e. “page loading.”)
1 2
Accessibility Toolkit, UI Design Patterns Page 19 of 113 Button (2 of 2)
Keyboard controls
Next tabbable item
Tab Moves focus to next tabbable item.
1 2 or Activate button
Space or Enter Causes control to execute its function.
Accessibility Toolkit, UI Design Patterns Page 20 of 113 Checkbox (dual-state)
Checkbox is a form component used to select or deselect items in a list. Checkbox (dual-state) (1 of 2)
Screen reader
1 Visible label: Products 1 Label: Products Role: Group
2 Visible label: Office 365 Label: Office 365 Role: Checkbox 2 State: Checked (updated status stated when status is changed) 3 Indexing: 2 of 5
3 Visible label: Windows Label: Windows Role: Checkbox State: Unchecked Indexing: 3 of 5
Accessibility Toolkit, UI Design Patterns Page 22 of 113 Checkbox (dual-state) (2 of 2)
Keyboard controls
Next checkbox
Tab Moves keyboard focus to the checkbox. 1
2
3 Check/uncheck checkbox Space bar 4 Toggles checkbox between check and unchecked states.
5
Accessibility Toolkit, UI Design Patterns Page 23 of 113 Combo box
Combo box combines a text-field and listbox to allow any value to be typed or a value to be chosen from a pre-defined set of options. Combo box (1 of 4)
Screen reader
1 Visible label: State 1 Label: State Role: Editable combo box 2 State: Collapsed Option visible label: Select Option label: Select an option Option state: Selected
2 Visible label: Select Label: Select an option Role: Editable combo box State: Expanded Indexing: 1 of 52 State: Selected
Accessibility Toolkit, UI Design Patterns Page 25 of 113 Combo box (2 of 4)
Screen reader
3 Visible label: Washington 4 Label: Washington Role: Option State: Selected Indexing: 48 of 52
4 Visible label: State Label: State Role: Editable combo box 3 State: Collapsed Option label: Washington Option state: Selected
Accessibility Toolkit, UI Design Patterns Page 26 of 113 Combo box (3 of 4)
Keyboard controls
1 Next option Down Arrow If popup is available, down arrow moves focus into the popup. If listbox is displayed, moves focus to the first suggested value. If the first value is not automatically selected, moves focus to the next suggested value. Alt + Down Arrow (optional) If the popup is available but not displayed, displays the popup without moving focus.
Previous option
Up Arrow Moves keyboard focus to previous option in list box. Alt + Up Arrow (optional) If the popup is displayed: 1) If the popup contains focus, returns focus to the textbox. 2) Closes the popup.
Accessibility Toolkit, UI Design Patterns Page 27 of 113 Combo box (4 of 4)
Keyboard controls
Dismiss popup Escape Dismisses the popup if it is visible. Optionally, clears the textbox.
Accept suggestion Enter If an autocomplete suggestion is automatically selected, accepts the suggestion either by placing the input cursor at the end of the accepted value in the textbox or by performing a default action on the value.
Filter options Printable characters User may enter printable characters in textbox (some implementations may regard certain characters as invalid) to refine pre-defined set of options.
Accessibility Toolkit, UI Design Patterns Page 28 of 113 Dialog (modal)
Dialogs open on top of the main window and require the user to interact with them, blocking interactions with the web page until being explicitly dismissed. Often request some kind of action from the user. Dialog (modal) (1 of 2)
Screen reader
1 Visible label: Step 2 of 3 1 Label: Step 2 of 3 Content: Is there anything we can do to improve? Let us know! Role: Dialog box 2 2 Visible label: Type your feedback here (1000 chars max) Label: Type your feedback here. 1000 characters max Role: Text field, editing 3 Visible label: 750/1000 Label: 750 characters out of 1000 characters typed Role: Text field
4 Visible label: Privacy Statement 3 Label: Privacy Statement Role: Link
4 5 5 Visible label: Next Label: Next Role: Button
Accessibility Toolkit, UI Design Patterns Page 30 of 113 Dialog (modal) (2 of 2)
Keyboard controls
Next focusable element
Tab Moves focus to the next focusable element inside the dialog. If focus is on the last focusable element inside the dialog, moves focus to the first focusable element inside the dialog.
Previous focusable
1 2 Shift + Tab element Moves focus to the previous focusable element inside the dialog. If focus is on the first focusable element inside the dialog, moves focus to the last focusable element inside the dialog.
Close dialog Escape Closes the dialog.
Accessibility Toolkit, UI Design Patterns Page 31 of 113 Disclosure (show/hide)
A disclosure is a button that controls visibility of a section of content. Disclosure (show/hide) (1 of 2)
Screen reader
1 Visible label: How do I get the Windows 10 April 2018 1 Update? Label: How do I get the Windows 10 April 2018 Update? Role: Button State: Collapsed 2
2 Visible label: How do I get the Windows 10 April 2018 Update? Label: How do I get the Windows 10 April 2018 Update? 3 Role: Button State: Expanded
3 Visible label: Update to Windows 10, version 1803 Label: Update to Windows 10, version 1803 Role: Link
Accessibility Toolkit, UI Design Patterns Page 33 of 113 Disclosure (show/hide) (2 of 2)
Keyboard controls
1 Next focusable element Tab 2 Moves focus to the next focusable element. If element is expanded, focus may move to focusable elements within the expanded content.
or Expand/collapse
Enter or Space selected Activates the disclosure control and toggles the visibility of the disclosure content.
Accessibility Toolkit, UI Design Patterns Page 34 of 113 Feed
A feed is a section of a page that automatically loads new sections of content as the user scrolls. The sections of content in a feed are presented in article elements. Feed (1 of 3)
Screen reader 1 Visible label: MSI GS65 Stealth THIN-047 GS65047 1 3 Gaming Laptop Label: MSI GS65 Stealth THIN-047 GS65047 Gaming Laptop Role: Article
2 Visible label: Learn more Label: Learn more Role: Button 2
3 Visible label: Dell Inspiron 15 i5577-5858BLK-PUS Gaming Laptop Label: Dell Inspiron 15 i5577-5858BLK-PUS Gaming Laptop Role: Article
4 Visible label: Back to products Label: Back to products Role: Button
4
Accessibility Toolkit, UI Design Patterns Page 36 of 113 Feed (2 of 3)
Keyboard controls
Next focusable element Tab Moves focus to the next focusable element. 1
2 Next article Page Down Moves focus to the next article.
Previous article
Page Up Moves focus to the previous article.
Accessibility Toolkit, UI Design Patterns Page 37 of 113 Feed (3 of 3)
Keyboard controls
Before feed Control + Home Moves focus to the first focusable element before the feed.
After feed
Control + End Moves focus to the first focusable element after the feed.
Accessibility Toolkit, UI Design Patterns Page 38 of 113 Grid
A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End. Grid (1 of 5)
Screen reader 1 Visible label: Payment and billing Label: Payment and billing Indexing: Section 1 of 3, contains 1 item Role: Grid cell
Visible label: Devices 2 2 Label: Devices 1 4 Indexing: Section 2 of 3, contains 3 items 3 Role: Grid cell
3 Visible label: DESKTOP-4AN1DS2 Manage device Label: Manage device DESKTOP-4AN1DS2 Role: Link
4 Visible label: Subscriptions Label: Subscriptions Indexing: Section 3 of 3, contains 1 item Role: Grid cell
Accessibility Toolkit, UI Design Patterns Page 40 of 113 Grid (2 of 5)
Keyboard controls
Enter grid
1 Tab Moves focus to the grid.
Right cell Right arrow Moves focus one cell to the right. Optionally, if focus is on the right-most cell in the row, focus may move to the first cell in the following row. If focus is on the last cell in the grid, focus does not move.
Left cell
Left arrow Moves focus one cell to the left. Optionally, if focus is on the left-most cell in the row, focus may move to the last cell in the previous row. If focus is on the first cell in the grid, focus does not move.
Accessibility Toolkit, UI Design Patterns Page 41 of 113 Grid (3 of 5)
Keyboard controls
Move to cell below Down arrow Moves focus one cell down. Optionally, if focus is on the bottom cell in the column, focus may move to the top cell in the following column. If focus is on the last cell in the grid, focus does not move.
Move to cell above Up arrow Moves focus one cell up. Optionally, if focus is on the top cell in the column, focus may move to the bottom cell in the previous column. If focus is on the first cell in the grid, focus does not move.
Accessibility Toolkit, UI Design Patterns Page 42 of 113 Grid (4 of 5)
Keyboard controls
First cell in row Home Moves focus to the first cell in the row that contains focus. Optionally, if the grid has a single column or fewer than three cells per row, focus may instead move to the first cell in the grid.
Control + Home (optional) Moves focus to the first cell in the first row.
Last cell in row End Moves focus to the last cell in the row that contains focus. Optionally, if the grid has a single column or fewer than three cells per row, focus may instead move to the last cell in the grid.
Control + End (optional) Moves focus to the last cell in the last row.
Accessibility Toolkit, UI Design Patterns Page 43 of 113 Grid (5 of 5)
Keyboard controls
Bottom of currently visible rows Page down (optional) Moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row of the grid, focus does not move.
Top of currently visible rows Page up (optional) Moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row of the grid, focus does not move.
Accessibility Toolkit, UI Design Patterns Page 44 of 113 Link
A link widget provides an interactive reference to a resource. The target resource can be either outside (external) or within the current page or application (local). Link (1 of 2)
Screen reader 1 Visible label: General Data Protection Regulation Label: General Data Protection Regulation, [URL] Role: Link 1
Accessibility Toolkit, UI Design Patterns Page 46 of 113 Link (2 of 2)
Keyboard controls
Execute link Enter Executes the link and moves focus to the link target 1
Open context menu Shift + F10 (optional) Opens a context menu for the link.
Accessibility Toolkit, UI Design Patterns Page 47 of 113 Listbox
A listbox widget presents a list of options and allows a user to select one or more of them. A listbox that allows a single option to be chosen is a single-select listbox; one that allows multiple options to be selected is a multi-select listbox. Listbox (1 of 6) Collapsible dropdown
Screen reader 1 Visible label: Products 1 Label: Products Role: Listbox State: Collapsed Option visible label: ASP.NET Option label: ASP.NET Option state: Selected 2 2 Visible label: ASP.NET Label: ASP.NET Role: Option Listbox state: Expanded 3 Option Indexing: 1 of 13 Option state: Selected
3 Visible label: Office 365 Label: Office 365 Role: Option State: Selected Indexing: 4 of 13
Accessibility Toolkit, UI Design Patterns Page 49 of 113 Listbox (2 of 6) Multiselect
Screen reader 1 Visible label: Available options 1 Label: Available options Role: Listbox 4 3
2 Visible label: Item 4 Label: Item 4 2 Role: Option State: Selected Indexing: 3 of 4
3 Visible label: Add Label: Add Role: Button
4 Visible label: Item 3 Label: Item 3 Role: Option State: Non-selected Indexing: 1 of 1
Accessibility Toolkit, UI Design Patterns Page 50 of 113 Listbox (3 of 6) Single-select or multi-select
Keyboard controls
or Next/previous option Down Arrow or Up Arrow Moves focus to the next option (Down Arrow) or previous option (Up Arrow). Optionally, in a single-select listbox, selection may also move with focus.
or First/last option Home or End (optional, but strongly recommended for lists with 5+ items) Moves focus to first option (Home) or last option (End). Optionally, in a single-select listbox, selection may also move with focus.
Recommendation Use type-ahead Recommended for all listboxes, especially those with more than 7 options.
Accessibility Toolkit, UI Design Patterns Page 51 of 113 Listbox (4 of 6) Multi-select
Keyboard controls Implementation Authors may implement either of two interaction models: • Recommended: does not require the user to hold a modifier key, such as Shift or Control, while navigating the list. • Alternative: requires modifier keys to be held while navigating in order to avoid losing selection states.
Change selection state
Space (Control + Space for alternative selection model) Changes the selection state of the focused option.
or Next/previous item
Shift + Down Arrow or Shift + Up Arrow (Optional for recommended model, required for alternative selection model) Moves focus to and toggles the selected state of the next option (Shift + Down Arrow) or previous option (Shift + Up Arrow).
Accessibility Toolkit, UI Design Patterns Page 52 of 113 Listbox (5 of 6) Multi-select
Keyboard controls
or Next/previous item Control + Down Arrow or Control + Up Arrow (Alternative selection model only) Moves focus to the next option (Control + Down Arrow) or previous option (Control + Up Arrow) without changing its selection state.
Select option with focus to first Control + Shift + Home (optional for both models) Selects the focused option and all options up to the first option. Optionally, moves focus to the first option.
Select option with focus to last Control + Shift + End (optional for both models) Selects the focused option and all options down to the last option. Optionally, moves focus to the last option.
Accessibility Toolkit, UI Design Patterns Page 53 of 113 Listbox (6 of 6) Multi-select
Keyboard controls
Select contiguous items Shift + Space (optional for both models) Selects contiguous items from the most recently selected item to the focused item.
Select all Control + A (optional for both models) Selects all options in the list. Optionally, if all options are selected, it may also unselect all options.
Accessibility Toolkit, UI Design Patterns Page 54 of 113 Menu bar
A widget that offers a list of choices to the user, such as a set of actions or functions. Menu bar (1 of 4)
Screen reader
1 Visible label: Resources 1 Label: Resources Role: Menu item State: Collapsed Indexing: 2 of 4
2 Visible label: Training Label: Training Role: Link Indexing: 1 of 3 items 2
Accessibility Toolkit, UI Design Patterns Page 56 of 113 Menu bar (2 of 4)
Keyboard controls
or Activate menu item Enter or Space Activates menu item, causing link to be activated
or First/last item Home or End Moves focus to first item (Home) or last item (End) in the menubar.
Open context menu Shift + F10 (optional) Opens a context specific menu for the link.
Accessibility Toolkit, UI Design Patterns Page 57 of 113 Menu bar (3 of 4)
Keyboard controls
or Next/previous item Left arrow Moves focus to the previous item in the menubar. If focus is on the first item, moves focus to the last item.
Right arrow Moves focus to the next item in the menubar. If focus is on the last item, moves focus to the first item.
or Open submenu Down Arrow or Up Arrow Opens submenu and moves focus to first item (Down Arrow) or last item (Up Arrow) in the submenu.
Accessibility Toolkit, UI Design Patterns Page 58 of 113 Menu bar (4 of 4)
Keyboard controls
1 Close menu Escape Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent menuitem, from which the menu was opened.
Next element Tab Moves focus to the next element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu containers. Previous element Shift + Tab Moves focus to the previous element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu container.
Accessibility Toolkit, UI Design Patterns Page 59 of 113 Menu button
A menu button is a button that opens a menu. It is often styled as a typical push button with a downward pointing arrow or triangle to hint that activating the button will display a menu. Menu button (1 of 2)
Screen reader 1 Visible label: Resources 1 Label: Resources Role: Menu item State: Collapsed Indexing: 2 of 4
2 Visible label: Resources Label: Resources 2 Role: Menu item State: Expanded
Accessibility Toolkit, UI Design Patterns Page 61 of 113 Menu button (2 of 2)
Keyboard controls
or Open menu
Enter or Space Opens the menu and places focus on the first menu item.
or Open menu Down arrow (optional) Opens the menu and moves focus to the first menu item.
Up arrow (optional) Opens the menu and moves focus to the last menu item.
Accessibility Toolkit, UI Design Patterns Page 62 of 113 Radio group
A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. Radio group (1 of 3)
Screen reader
1 Visible label: Choose a payment option to add 1 Label: Choose a payment option to add Role: Radio group 2
2 Visible Label: Credit/debit card Label: Credit/debit card Role: Radio button State: Selected Indexing: 1 of 3
Accessibility Toolkit, UI Design Patterns Page 64 of 113 Radio group (2 of 3)
Keyboard controls
Between controls When a radio group receives focus If a radio button is checked, focus is set on the checked button. If none of the radio buttons are checked, focus is set on the first radio button in the group.
or Select next inside controls
Right Arrow or Down Arrow Moves focus to the next radio button in the group, unchecks the previously focused button, and checks the newly focused button. If focus is on the last button, focus moves to the first button.
Accessibility Toolkit, UI Design Patterns Page 65 of 113 Radio group (3 of 3)
Keyboard controls
or Select previous inside controls Left Arrow or Up Arrow Moves focus to the previous radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the first button, focus moves to the last button.
Check selected Space Checks the focused radio button if it is not already checked.
Accessibility Toolkit, UI Design Patterns Page 66 of 113 Slider
A slider is an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a bar or track to change the value of the slider. Slider (1 of 3)
Screen reader
1 Visible label: Volume 3 Label: Volume Role: Slider Value range: 0 to 100 Value: 0 4
2 Visible label: Volume Label: Volume Role: Slider Value: Up, 50 2
3 Visible label: Volume Label: Volume Role: Slider Value: Maximum volume value, 100
4 Visible label: Volume Label: Volume 1 Role: Slider Value: Down, 75
Accessibility Toolkit, UI Design Patterns Page 68 of 113 Slider (2 of 3)
Keyboard controls
or Increase value Up Arrow or Right Arrow Increases the value of the slider by one step.
or Decrease value Down Arrow or Left Arrow Increases the value of the slider by one step.
1
Accessibility Toolkit, UI Design Patterns Page 69 of 113 Slider (3 of 3)
Keyboard controls
or First/last allowed value Home Sets the slider to the first allowed value in its range.
End Sets the slider to the last allowed value in its range.
or Increase/decrease value Page Up (optional) Increment the slider by an amount larger than the step change made by Up Arrow.
Page Down (optional) Decrement the slider by an amount larger than the step change made by Down Arrow.
Accessibility Toolkit, UI Design Patterns Page 70 of 113 Slider: Multi-thumb
A multi-thumb slider is a slider with two or more thumbs that each set a value in a group of related values. Each thumb is in the page tab sequence and has the same keyboard interaction as a single- thumb slider. Slider: Multi-thumb (1 of 3)
Screen reader
1 Visible label: Product Price 1 Label: Product Price Role: Slider Value range: $0 to $500 Value: Current minimum value, $0 2
2 Visible label: Product Price Label: Product Price Role: Slider Value: Current minimum value, $100
3 3 Visible label: Product Price Label: Product Price Role: Slider Value: Current maximum value, $300
Accessibility Toolkit, UI Design Patterns Page 72 of 113 Slider: Multi-thumb (2 of 3)
Keyboard controls
1 or Increase value Up Arrow or Right Arrow Increases the value of the slider by one step.
or Decrease value Down Arrow or Left Arrow Decreases the value of the slider by one step.
Accessibility Toolkit, UI Design Patterns Page 73 of 113 Slider: Multi-thumb (3 of 3)
Keyboard controls
or First/last allowed value
Home Sets the slider to the first allowed value in its range.
End Sets the slider to the last allowed value in its range.
or Increase/decrease value Page Up (optional) Increment the slider by an amount larger than the step change made by Up Arrow.
Page Down (optional) Decrement the slider by an amount larger than the step change made by Down Arrow.
Accessibility Toolkit, UI Design Patterns Page 74 of 113 Spinbutton
A spinbutton is an input widget that restricts its value to a set or range of discrete values. If the range is large, a spinbutton may support changing the value in both small and large steps. Spinbutton (1 of 3)
Screen reader
1 Visible label: Time Picker
Label: Time Picker, hour 1 Role: Spinbutton Value: 9 Indexing: 10 of 12 State: Selected 2
2 Visible label: Time Picker Label: Time Picker, minute Role: Spinbutton Value: 59 Indexing: 60 of 60 3 State: Selected
3 Visible label: Time picker Label: Time picker, period Role: Spinbutton Value: PM Indexing: 2 of 2 State: Selected
Accessibility Toolkit, UI Design Patterns Page 76 of 113 Spinbutton (2 of 3)
Keyboard controls
Increase value 1 Up Arrow Increases the value.
2 Decrease value Down Arrow Decreases the value.
3
or Minimum/maximum value Home If the spinbutton has a minimum value, sets the value to its minimum.
End If the spinbutton has a maximum value, sets the value to its maximum.
Accessibility Toolkit, UI Design Patterns Page 77 of 113 Spinbutton (3 of 3)
Keyboard controls
Directly edit value 1 Printable characters If the spinbutton text field allows directly editing the value, standard single line text editing keys appropriate for the device platform are supported. Type characters in the textbox. Note that many implementations allow only 2 certain characters as part of the value and prevent input of any other characters.
3 or Minimum/maximum value Page Up (optional) Increases the value by a larger step than the change made by the Up Arrow.
Page Down (optional) Decreases the value by a larger step than the change made by the Down Arrow.
Accessibility Toolkit, UI Design Patterns Page 78 of 113 Table
Like an HTML table element, a WAI- ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget. Thus, its cells are not focusable or selectable. Table (1 of 3)
Screen reader
1 Visible label: Navigation menu overview 1 Label: Navigation menu overview Role: Table 2 3 Indexing: Has 2 columns, 9 rows
2 Visible label: Item Label: Item Role: Header item, column header Indexing: Column 1 of 2, row 1 of 9
3 Visible label: Description Label: Description Role: Column header Indexing: Column 2 of 2, row 1 of 9
Accessibility Toolkit, UI Design Patterns Page 80 of 113 Table (2 of 3)
Screen reader
4 Visible label: Home Label: Column header: Item, Home Role: Cell 4 Indexing: Column 1, row 2
5 Visible label: “Enables you to run Xpert scripts that have been deployed.” Label: Column header: Description, “Enables you to run Xpert scripts that have been deployed.” Role: Cell 5 Indexing: Column 2, row 5
Accessibility Toolkit, UI Design Patterns Page 81 of 113 Table (3 of 3)
Keyboard controls
1 Note A WAI-ARIA table is a static tabular; it is not an interactive widget. Its cells are not focusable by tabbing, nor selectable.
Next cell Ctrl + Alt + Arrow keys Moves focus one cell above, below, to the left or to the right depending on arrow key used.
Accessibility Toolkit, UI Design Patterns Page 82 of 113 Tabs
Tabs are used to selectively display content that is frequently accessed, distinct, and within the same region on a page. Tabs (1 of 4)
Screen reader
1 Visible label: Overview 1 2 Label: Overview Role: Tab item Indexing: 1 of 4
2 Visible label: Tech Specs Label: Tech Specs Role: Tab item Indexing: 2 of 4 State: Selected
3 Visible label: Learn more Label: Learn more about PixelSense display features Role: link 3
Accessibility Toolkit, UI Design Patterns Page 84 of 113 Tabs (2 of 4)
Keyboard controls
1 Next tab Right Arrow Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab.
Previous tab 2 Left Arrow Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab.
Accessibility Toolkit, UI Design Patterns Page 85 of 113 Tabs (3 of 4)
Keyboard controls
Between focusable elements Tab When focus moves into the tab list, places focus on the active tab element. When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tab list, which is typically either the first focusable element inside the tab panel or the tab panel itself.
1 2
or Activate tab Enter or Space Activates the tab if it was not activated automatically on focus.
Accessibility Toolkit, UI Design Patterns Page 86 of 113 Tabs (4 of 4)
Keyboard controls
or First/last tab Home (optional) Moves focus to the first tab. Optionally, activates the newly focused tab.
End (optional) Moves focus to the last tab. Optionally, activates the newly focused tab.
Close tab element Delete (optional) If deletion is allowed, deletes (closes) the current tab element and its associated tab panel, sets focus on the tab following the tab that was closed, and optionally activates the newly focused tab.
Accessibility Toolkit, UI Design Patterns Page 87 of 113 Toolbar
A toolbar is a container for grouping a set of controls, such as buttons, menu buttons, or checkboxes. Toolbar (1 of 2)
Screen reader
1 Visible label: Compose 1 Label: Compose Role: Toolbar button Indexing: 1 of 7
2 2 Visible label: … Label: More options Role: Toolbar button Indexing: 7 of 7 State: Collapsed
3 Visible label: Mark as read 3 Label: Mark the message as read, more options Role: Menu item Indexing: 1 of 3 State: Expanded
Accessibility Toolkit, UI Design Patterns Page 89 of 113 Toolbar (2 of 2)
Keyboard controls
1 Next control Narrator (Caps Lock or Insert) + Right Arrow Moves focus to the next control. Optionally, focus movement may wrap from the last element to the first element. Previous control Narrator (Caps Lock or Insert) + Left Arrow Moves focus to the previous control. Optionally, focus movement may wrap from the first element to the last element.
or First/last tab Home or End (optional) Moves focus to first element (Home) or last element (End).
Accessibility Toolkit, UI Design Patterns Page 90 of 113 Tooltip widget
A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Tooltip widget (1 of 2)
Screen reader
1 Visible label: What’s this? 1 Label: What’s this? Content: For Visa, Mastercard and Discover, the CVV is the three-digit code on the back of the card. For American Express, it is the four- digit code on the front of the card. Role: Tooltip
Accessibility Toolkit, UI Design Patterns Page 92 of 113 Tooltip widget (2 of 2)
Keyboard controls
1 Next control Escape key Dismisses the Tooltip.
Tooltips typically appear after a small delay and disappears when Escape is pressed, or on mouse out.
Accessibility Toolkit, UI Design Patterns Page 93 of 113 Tree view
A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children may be expanded or collapsed to show or hide the children. Tree view (1 of 8)
Screen reader
1 Visible label: Projects Label: Projects Role: Tree item State: Expanded 1 Indexing: 1 of 3
2 Visible label: Headphones.docx Label: Headphones.docx 2 Role: Tree item Indexing: 2 of 4
3 Visible label: Reports Label: Reports 3 Role: Tree item Indexing: 2 of 3 State: Collapsed
Accessibility Toolkit, UI Design Patterns Page 95 of 113 Tree view (2 of 8)
Keyboard controls
1 Receiving focus No nodes selected before tree receives focus: • Focus is set on the first node.
One or more nodes selected before tree receives focus: • Single-select: focus is set on the selected node. • Multi-select: focus is set on the first selected node.
Recommendation Use typeahead Recommended for all trees, especially for trees with more than 7 root nodes. Visual focus on an expanded folder
Accessibility Toolkit, UI Design Patterns Page 96 of 113 Tree view (3 of 8)
Keyboard controls
Open node Right arrow When focus is on: • Closed node - opens the node; focus does not move. • Open node - moves focus to the first child node. • End node - does nothing.
Close node Left arrow When focus is on: • Open node – closes the node. • End or closed nodes: • Child node – moves focus to its parent node. • Root node – does nothing.
Accessibility Toolkit, UI Design Patterns Page 97 of 113 Tree view (4 of 8)
Keyboard controls
or Next/previous node Down arrow Moves focus to the next node that is focusable without opening or closing a node. Up arrow Moves focus to the previous node that is focusable without opening or closing a node.
or First/last node Home Moves focus to the first node in the tree without opening or closing a node. End Moves focus to the last node in the tree that is focusable without opening a node.
Accessibility Toolkit, UI Design Patterns Page 98 of 113 Tree view (5 of 8)
Keyboard controls
Activate node Enter Activates a node, i.e., performs its default action. • Parent nodes - one possible default action is to open or close the node. • Single-select trees where selection does not follow focus - the default action is typically to select the focused node.
Accessibility Toolkit, UI Design Patterns Page 99 of 113 Tree view: Multi-select (6 of 8)
Keyboard controls Selection in multi-select trees Authors may implement either of two interaction models: • Recommended: does not require the user to hold a modifier key, such as Shift or Control, while navigating the list • Alternative: requires modifier keys to be held while navigating in order to avoid losing selection states.
Toggle selection Space (or Control + Space for alternative selection model) Toggles the selection state of the focused node.
Accessibility Toolkit, UI Design Patterns Page 100 of 113 Tree view: Multi-select (7 of 8)
Keyboard controls
Next node Shift + Down Arrow (required for alternate, optional for recommended model) Moves focus to and toggles the selection state of the next node. Previous node Shift + Up Arrow (required for alternate, optional for recommended model) Moves focus to and toggles the selection state of the previous node.
Select contiguous nodes Shift + Space (optional for both models) Selects contiguous nodes from the most recently selected node to the current node.
Accessibility Toolkit, UI Design Patterns Page 101 of 113 Tree view: Multi-select (8 of 8)
Keyboard controls
Select node with focus to first Control + Shift + Home (optional for both models) Selects the node with focus and all nodes up to the first node. Optionally, moves focus to the first node.
Select node with focus to last Control + Shift + End (optional for both models) Selects the node with focus and all nodes down to the last node. Optionally, moves focus to the last node.
Select all Control + A (optional for both models) Selects all nodes in the tree. Optionally, if all nodes are selected, it can also unselect all nodes.
Accessibility Toolkit, UI Design Patterns Page 102 of 113 Window splitter
A widget that is a moveable separator between two sections, or panes, of a window that enables users to change the relative size of the panes. Window splitter (1 of 3)
Screen reader
1 Visible label: [image of left-pointing caret] Label: Collapse splitter 1 Role: Button State: Expanded
2 Visible label: [no visible label] 2 Label: Splitter Role: Separator Value: Current value 200 Value range: Minimum value 0, maximum value 1920 3
3 Visible label: [image of right-pointing caret] Label: Expand splitter Role: Button State: Collapsed
Accessibility Toolkit, UI Design Patterns Page 104 of 113 Window splitter (2 of 3)
Keyboard controls
or Move splitter left/right Left Arrow or Right Arrow Moves a vertical splitter to the left (Left Arrow) or right (Right Arrow).
or Move splitter down/up Down Arrow or Up Arrow Moves a horizontal splitter down (Down Arrow) or up (Up Arrow).
Collapse or restore primary pane Enter If the primary pane is not collapsed, collapses the pane. If the pane is collapsed, restores the splitter to its previous position.
Accessibility Toolkit, UI Design Patterns Page 105 of 113 Window splitter (3 of 3)
Keyboard controls
Smallest size pane Home (Optional) Moves splitter to the position that gives the primary pane its smallest allowed size. This may completely collapse the primary pane.
Largest size pane End (Optional) Moves splitter to the position that gives the primary pane its largest allowed size. This may completely collapse the secondary pane.
Cycle panes F6 (Optional) Cycle through window panes.
Accessibility Toolkit, UI Design Patterns Page 106 of 113 Four things to include and understand
Roles and labels Keyboarding
1 This is how blind users “see” our UI with a 2 This is how people with vision and/or screen reader. Ensure that you have the manual dexterity issues interact with our right role, and descriptive labels and products using tab order, arrows, shortcut instruction. keys.
Contrast (minimum) Memory and understanding
3 In order to make products inclusive to all 4 In order to make products usable for vision conditions, there is a minimum everyone, including those with cognitive contrast ratio for readable content, as impairments and learning disabilities, we well as high contrast themes that further must ensure understandability, make increase contrast. products easy to learn, and reduce cognitive load.
Accessibility Toolkit, UI Design Patterns Page 107 of 113 1 Roles and labels
• Say the most important things about a control first. Most blind users don’t wait for the whole label.
• Labels should be accurate and descriptive. Labels such as “here” or “button” do not inform screen reader users of the purpose of a control or how they may interact with it.
• Avoid redundancy. It’s the equivalent of visual noise on a page.
• Consider the users’ time. Notify them of their progress status, provide information to users when they need it and in the order they need it. Work with prototypes and engineers to gauge verbosity.
Accessibility Toolkit, UI Design Patterns Page 108 of 113 2 Keyboarding
• Keyboard options must be available for all mouse and touchscreen interactions.
• Tabs go to controls, arrows work inside controls. If everything was a tab stop, then it would take users too long to navigate a screen.
• Generally, order tab stops top-left to right-bottom, just like reading order. There are exceptions, but they need to be important for primary scenarios.
• Don’t forget shortcuts! They are the equivalent of moving your mouse cursor across the screen. Home, ESC, and individual keyboard shortcuts are critical.
Accessibility Toolkit, UI Design Patterns Page 109 of 113 3 Contrast (Minimum)
• Controls, icons and informative text need to meet a minimum of 4.5:1 contrast. Lines and backgrounds don’t need to meet that minimum, however, and lower contrast for these will help informative content to be more easily perceived.
• UI components (controls) and meaningful graphics must meet a minimum of 3:1 contrast.
• Avoid large areas of light on dark content. This creates eye strain, and in high contrast, it flips the visual preferences of low vision users, possibly making it unreadable for them.
• Use shape and/or words, not just color to identify differences. Color blindness is common.
• High contrast is a reduced color palette. Don’t worry about loss of subtlety, that’s the point.
Accessibility Toolkit, UI Design Patterns Page 110 of 113 4 Memory and understanding
• Don’t force users to remember information. Working (or short-term) memory is limited; ensure information needed to complete a task is present and doesn’t disappear while in use.
• Break up information into small, distinct units (or chunks) to avoid walls of text. Try to limit options or information in elements to 7 or fewer chunks of information (ideally 3-5).
• Use precise, everyday language. Keep it simple. Ask yourself if someone who isn’t tech- savvy would understand. Make sure error messages have clear explanations users will understand.
• Be predictable and avoid distractions. Navigation should be consistent, and similar patterns should produce similar results. Avoid unnecessary information, distracting background images, noises, or moving elements.
Accessibility Toolkit, UI Design Patterns Page 111 of 113 High contrast palettes
Accessibility Toolkit, UI Design Patterns Page 112 of 113 High contrast
Background & stroke Default contrast High contrast
Disabled or helper text
Normal text
Links
Background & stroke
Accessibility Toolkit, UI Design Patterns Page 113 of 113