ARIA design patterns - touch UA/AT gap analysis
Comments
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

 
£
%
123
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Still loading...
ABCDEFGHIJKLMNOPQRSTUVWXYZAAAB
1
Design Patterns and WidgetsTouch compatible? (does it work in general on touch device, w/out AT or external/paired keyboard)VO/iOS just touchscreen compatible?TalkBack/Android just touchscreen compatible?VO/iOS with keyboard compatible?Talkback/Android with keyboard compatible?working design pattern example (URL)Native HTML example (URL)NOTES: this spreadsheet is gathering info for ARIA authoring practices issue: https://github.com/w3c/aria-practices/issues/8
2
2.1 Generally Applicable Keyboard RecommendationsNoNoNoNoYesN/Acopy/cut/paste interactions on touch devices do not fire faked keyboard events to listen to (same way using copy/cut/paste from browser menu/context menu doesn't fire those key combos on desktop/keyboard devices). potentially in future, clipboard API may provide some events to hook into?

also, assuming a dev actually listened for CTRL+C etc...what about Mac which uses Apple key instead of CTRL? do these patterns fail even on desktop/mac?

for context menu, listen for contextmenu event rather than SHIFT+F10 or similar. that IS a device-/input-agnostic event that is fired

no undo/redo that i'm aware of on touch devices, and no faked keyboard events for those are fired

Talkback/Android with keyboard behaves like a traditional desktop/keyboard device and does not override/swallow any key events (even when Talkback is running), so mostly the design patterns can be operated even if they require specific keyboard combinations/shortcuts (but Talkback may not announce anything sensibly/understandably)
3
2.2 AccordionYesYes (can swipe to accordion tab/trigger, double-tap to open)Yes (can swipe to accordion tab/trigger, double-tap to open)Yes (can use arrow keys to navigate to accordion tab/trigger, double-tap on screen to open)Yeshttp://hanshillen.github.io/jqtest/#goto_accordionN/Ain iOS/VO, no key events are sent (relies purely on navigating to focusable tabs and triggering the click behvaior implemented for mouse/click). none of the extra key commands specified in design pattern work

Talkback gives no indication of what the accordion tabs are, how to interact with them, that they're even interactive. With keyboard, can be used like on desktop/kbd
4
2.3 AlertYes (An alert (WAI-ARIA live region) does not require any keyboard interaction.)YesYesYesYeshttp://www.html5accessibility.com/tests/alert-test-4.html
5
2.4 Alert Dialog or Message DialogYesYes (assuming it's coded to respond to mouse/click)Yes (assuming it's coded to respond to mouse/click)
6
2.5 Auto Complete???Birkir Gunnarsson has a page detailing how trying to choose an autocomplete listitem loses focus on input, this removing the onscreen keyboard and closing the autocomplete list (VoiceOver/iOS)
7
2.6 ButtonYesYesYesYesYeshttp://thepaciellogroup.github.io/AT-browser-tests/test-files/button.html
8
2.7 CheckboxYesYesYesYesYeshttp://dylanb.github.io/rwd/part6/event_logger.htmlhttp://thepaciellogroup.github.io/AT-browser-tests/test-files/input-checkbox.htmlFor the event logger example, use the div[role=checkbox] example
9
2.8 Combo Box???(Dylan Barrell: I have not been able to get this to work without problems on any platform - last try ca. July 2014)
10
2.9 Date PickerYes (depending on implementation, not very user friendly though)Partially (the pop-up datepicker example used by Hans is not announced when text input gets focus)Partially (none of the datepicker components are announced as being interactive except Today and Done buttons, when pop-up picker appears no indication is given)Partially (the pop-up datepicker example used by Hans is not announced when text input gets focus)
Partially (can be used with keyboard, none of the dates are announced when navigating the calendar, no announcement made for pop-up calendar when it appears)
http://hanshillen.github.io/jqtest/#goto_datepickerNone of the complex keystrokes (home etc) work in iOS/VO+keyboard
11
2.10 Dialog (Modal)YesYesYesYesYes
12
2.11 Dialog (Non-Modal)???
13
2.12 Dialog (Tooltip)???
14
2.13 Drag & DropNo (unless implemented with extra touch events etc)NoNoNoPartially (both examples can be operated, but no information is given to the user about grabbable items, any action menu that may have appeared, etc)http://www.oaa-accessibility.org/examplep/draganddrop1/
https://dev.opera.com/articles/accessible-drag-and-drop/example.html
N/A
15
2.14 Grid (Simple Data Tables)???N/A
16
2.15 Actionable, Sortable Column Header in a GridYes (assuming it's coded to respond to mouse/click)???N/A
17
2.16 Landmark NavigationN/A (no native browser support mechanism to jump between landmarks)Yes (depending on rotor setting, user able to navigate sequentially through landmarks)NoYes (depending on rotor setting, user able to navigate sequentially through landmarks)No (with default Browser or Chrome; Firefox on Android does provide additional landmark navigation quick keys)
18
2.17 LinkYes (assuming it's coded to respond to mouse/click)Yes (assuming it's coded to respond to mouse/click)Yes (assuming it's coded to respond to mouse/click)Yes (assuming it's coded to respond to mouse/click)Yes (assuming it's coded to respond to mouse/click)http://patrickhlauke.github.io/aria/demos/role-link.htmlhttp://patrickhlauke.github.io/aria/demos/role-link.html
19
2.18 ListboxYes (assuming it's coded to respond to mouse/click)Yes (assuming it's coded to respond to mouse/click)Yes (assuming it's coded to respond to mouse/click)
20
2.19 Media Player???
21
2.20 Menu or Menu barNo (though for items with submenus, at least based on Hans' implementation)No - see https://github.com/w3c/aria/issues/60#issuecomment-105239098No (for submenus)No (for submenus)
No (for submenus)
http://hanshillen.github.io/jqtest/#goto_menubarN/AThe aria-expanded attribute is useless, it never gets announced when the ARIA authoring guidelines are adhered-to because the focus is never on the correct element

submenu should really also open on focus to make it partially workable on touch (but that contravenes design pattern which wants it to be explicitly opened by user?)

Talkback gives no indication of what menus/menu items are or that they're interactive
22
2.21 Menu Button???
23
2.22 Popup Help (aka Bubble Help)???
24
2.23 Radio Group???
25
2.24 Rich Text Editor???
26
2.25 Site Navigator - General???
27
2.26 Site Navigator - Tree???
28
2.27 Site Navigator - Tabbed Style???
29
2.28 SliderNO (would need extra touch/pointer events on top to make it work)No - see https://github.com/w3c/aria/issues/60#issuecomment-105238341NoNo (arrow keys used to navigate in VO)Yeshttp://hanshillen.github.io/jqtest/#goto_sliderhttp://thepaciellogroup.github.io/AT-browser-tests/test-files/input-range.htmliOS/VO announces slider buttons as "adjustable - swipe up or down with one finger to adjust the value" - swipes don't do anything, using arrow keys etc on keyboard not possible

Talkback announces slider as "seek control", does not give hints about how to interact beyond "double-tap to select" (which has no effect)
30
2.29 Slider (Multi-Thumb)NO (would need extra touch/pointer events on top to make it work)No - see https://github.com/w3c/aria/issues/60#issuecomment-105238341NoNo (arrow keys used to navigate in VO)Yeshttp://hanshillen.github.io/jqtest/#goto_slideriOS/VO announces slider buttons as "adjustable - swipe up or down with one finger to adjust the value" - swipes don't do anything, using arrow keys etc on keyboard not possible

Talkback announces slider as "seek control", does not give hints about how to interact beyond "double-tap to select" (which has no effect)
31
2.30 Spinbutton???
32
2.31 Tab PanelYesYes (using swipe navigation and double tap to open - not by virtue of any key event listeners, but simply arrangement and fact that tabs are coded to respond to mouse/click)Yes (using swipe navigation and double tap to open - not by virtue of any key event listeners, but simply arrangement and fact that tabs are coded to respond to mouse/click)Yes (not by virtue of the key events (which aren't sent) but because using arrow left/right moves to previous/next item, so as long as tabs are next to each other in source order/display, it will seem to work, but not because of any JS involved)Yes (behaves like desktop, only the current active tab is focused, arrows to change active tab)http://hanshillen.github.io/jqtest/#goto_tabsN/AiOS/VO does announce the tabs as "blah TAB - 1 of 3" etc

Talkback does not announce tabs as interactive at all (no indication they are anything other than static text, no hint that they can be double-tapped)
33
2.32 Tool BarYesYesYesYesYeshttp://heydonworks.com/practical_aria_examples/#toolbar-widget
34
2.33 Tooltip Widget???
35
2.34 Tree Grid???N/A
36
2.35 Tree ViewKind of (depends on implementation, but assuming it works ok for mouse users it would work same way for touch users)No - see https://github.com/w3c/aria/issues/60#issuecomment-105239844No (can't expand/collapse tree branches)No (arrow keys in VO used to navigate, not passed through / don't fire key events)Yeshttp://hanshillen.github.io/jqtest/#goto_treeN/ATalkback gives no indication that tree nodes are interactive or can be acted on, whether they have a subtree, etc
37
2.36 Window Splitter???
38
2.37 WizardYes if using supported custom control typesYes if using supported custom control typesYes if using supported custom control types
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
Loading...
 
 
 
Sheet1
HTML5 element gestures