ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.
-
Upload
thomasine-sutton -
Category
Documents
-
view
218 -
download
0
Transcript of ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.
![Page 1: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/1.jpg)
ARIA Support on Mobile Browsers
Presented by:Jonathan AvilaMarch 5, 2015
![Page 2: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/2.jpg)
2
Agenda
• Overview• Methodology• Exclusions and Inclusions• Test Results
– Landmarks– Roles– States/Properties
• Resources
![Page 3: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/3.jpg)
3
Overview
• Tested 30 different ARIA roles (landmarks and widgets) with key aria properties (e.g. aria-expanded, aria-checked, etc.)
• Tested with:– VoiceOver on iOS 8.1.3 and – Talkback 3.6.03 on Android 5.0.2
• Firefox 36.0• Chrome 40.0.22
– Windows Phone 8.1• Overall support is good with exceptions
iOS 8
![Page 4: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/4.jpg)
4
Overview
Result Tally
Android & Talkback
w/ FF
iOS & VO w/ Safari
WP 8.1 & Narrator
w/ IE
Android & Talkback w/
Chrome
Yes 20 15 12 7
Partial 7 8 7 13
No 3 7 11 10
![Page 5: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/5.jpg)
5
Methdology
• Wanted to provide specific details on combinations of roles and properties
• Tested in different modes such as swipe, rotor, item chooser, etc.
• Tested using three different ARIA test suites to ensure valid implementations
• Share results with community and send bug reports to platform vendors
• Use of standard terms in results– E.g. accessible name used here to indicate use of aria-label or
aria-labelledby– E.g. role is the ARIA role of the control– E.g. state is an ARIA state such as checked, selected, expanded
![Page 6: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/6.jpg)
6
Testing Criteria
• Focused testing of aria-label, aria-labelled, and aria-describedby on non-generic elements – focus on widgets and landmarks with default implied or explicit
roles• Use valid ARIA markup
– E.g. aria-selected is only valid on certain roles such as option, menu, gridcell, tab, etc.
![Page 7: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/7.jpg)
7
Notes on Mobile Testing
• Testing embedded content– AMP Mobile Accessibility Checker will pull DOM from app in
Xcode or Eclipse and send to AMP for testing• Limitations of browser choice in embedded content
– Limited to Chrome on Android and Safari on iOS• Obtaining mobile content DOM
– Responsive sites may not expose mobile DOM on desktop– Pull mobile DOM from mobile browser
• Adobe Edge Inspect (iOS and Android)• Safari Developer Tools on Mac (iOS)
![Page 8: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/8.jpg)
8
Landmarks
Roles
Landmarks allow users to: • Understand the structure of content• Quickly jump to regions of the page
Examples• application• banner• navigation• main• contentinfo
searchcomplementary
form
![Page 9: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/9.jpg)
9
Landmarks
Results
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes No No
• iOS: All except role application and form and application are announced in swipe and neither are in rotor– Type of landmark, aria-label/aria-labelledby, and then text is announced– Boundary of landmark is indicated while swiping forward only
• Talkback FF: All except role application and form are announced in swipe and neither are in rotor– Text, then aria-label/aria-labelledby, and then type of landmark is announced– Boundary of landmark is indicated while swiping forward and reverse
![Page 10: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/10.jpg)
10
Roles
Checkbox
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Yes Yes
Talkback with Chrome and Firefox• State change is not automatically announced on toggle
![Page 11: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/11.jpg)
11
Roles
Radio Button
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Yes Yes
All• Position in set is not announced
iOS• Radio buttons in general are not included in the VO rotor
Form Fields
Talkback Chrome & Firefox and Windows Phone 8.1• Changes in state are not announced automatically or
announced incorrectly
![Page 12: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/12.jpg)
12
Roles
Links
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Partial Partial
Talkback Chrome and Windows Phone 8.1• Aria-label supported• aria-labelledby and aria-describedby not supported
![Page 13: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/13.jpg)
13
Roles
Radiogroup, Region, and Group
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
No Yes Partial No
iOS and Windows Phone 8.1• No support
Talkback FF• Role is not indicated but accessible name is
Talkback Chrome• On radiogroup name is supported on nested controls
![Page 14: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/14.jpg)
14
Roles
Alert
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes No No No
iOS• Text is announced, role is not
![Page 15: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/15.jpg)
15
Role
Heading and Level
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Partial No
Talkback Chrome• Role of heading is announced but no level information
![Page 16: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/16.jpg)
16
Role
Button with aria-pressed
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
No Yes No Partial
iOS• Indicated as checkbox state is not announced when swiping to or
toggling controlTalkback FF• Change of state is not announced when toggledTalkback Chrome• Indicated as switch control, state is always indicated as "not
checked". Toggled state is not automatically announcedWindows Phone 8.1 - Only aria-label supported, state correct
![Page 17: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/17.jpg)
17
Roles
Combobox
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
No No Partial No
iOS, Talkback FF, and Windows Phone 8.1• Name, role, and state are indicated• Options cannot be selected
Talkback Chrome• Role is indicated as edit box• Name, and state are not indicated
![Page 18: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/18.jpg)
18
Role
Listbox
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Partial Yes Partial Yes
All• Position in set is not announced• Selection state not automatically announced after selection
iOS• Role is not announced
Talkback Chrome• Role, name, and selected are not announced
![Page 19: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/19.jpg)
19
Role
Alertdialog
iOS• VO announces aria-label/aria-labelledby/aria-describedby
when it appears like an alert• When swiping to dialog content boundaries are not
announced and aria-label/aria-labelled/aria-describedby are not indicated
Talkback Chrome• Only text is announced on appear and on swipe
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Partial No
![Page 20: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/20.jpg)
20
Role
Dialog
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
No Partial No No
Talkback FF• focus change overrides automatic announcement of dialog• Name, description, and role are announced when entering
dialog from forward or reverse swipe order
Others• Nothing announced on open, text in swipe in order
![Page 21: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/21.jpg)
21
Role
Grid
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Partial Yes Partial Yes
iOS and Talkback Chrome• Headers are not announced as the user swipes through
data table cells
![Page 22: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/22.jpg)
22
Roles
Menu
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Partial Partial Partial Yes
iOS• Only way to access menu items is to use lines option in
rotor
iOS, Talkback Firefox, and Chrome• Menu role and haspopup is not announced
![Page 23: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/23.jpg)
23
Roles
Presentation
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Yes Yes
All• Correctly ignores role for lists (probably because lists aren't
supported) but not for tables and images
![Page 24: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/24.jpg)
24
Roles
Sliders
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Partial Partial Partial Partial
All• Name, role, and value are announced• Value cannot be changed by double tapping gesture
![Page 25: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/25.jpg)
25
Roles
Progressbar
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Partial Partial No Partial
iOS, Talkback FF, and WP 8.1• Name, role, and value are announced• When value change nothing is announced
– Aria-live region could be used to control what is spoken
![Page 26: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/26.jpg)
26
Roles
Spinbutton
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
No Partial No Partial
iOS & Talkback Chrome• Control is completely skipped over when swiping or with
explore by touch
Talkback FF• Unable to change values or enter value as keyboard go
away in editable spinner control
WP 8.1• Spin buttons not available but edit box is accessible
![Page 27: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/27.jpg)
27
Roles
Page Tabs
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes No Yes
Windows Phone 8.1• Change of selection is not automatically announced• Position of tabs is not announced
![Page 28: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/28.jpg)
28
Roles
Toolbar
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Partial Yes Partial Partial
iOS and WP 8.1• Name, role, boundaries of toolbar are not indicated
Talkback Chrome• Accessible name is announced• Role and ending boundary are not indicated
![Page 29: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/29.jpg)
29
Roles
Tree
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
No Yes No Yes
WP 8.1• Tree role isn't announced but leaf node roles are
![Page 30: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/30.jpg)
30
Roles
Tooltip
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Yes Yes
All• Text is announced when swiped to or referenced by aria-
describedby
Windows Phone 8.1• Bonus: Role of tooltip is announced
![Page 31: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/31.jpg)
31
States and Properties
Input with aria-label, aria-labelledby, and aria-describedby
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Partial Partial
Talkback Chrome and Windows Phone 8.1• Aria-describedby not supported
![Page 32: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/32.jpg)
32
State and Properties
aria-live
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Yes No
![Page 33: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/33.jpg)
33
States and Properties
aria-expanded
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Partial Partial No Yes
iOS 8 • State is switched, expanded is announced as collapsed and
collapsed as expanded• VO identifies the buttons with aria-expanded as popup
buttons.
Talkback FF• State is not automatically announced on toggle
![Page 34: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/34.jpg)
34
States and Properties
Drag and Drop (@aria-grabbed, aria-dropeffect)
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
No No No No
All• No drag or drop state information is provided
![Page 35: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/35.jpg)
35
States and Properties
aria-haspopup
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Partial Yes Partial No
iOS• Button only supported
Talkback FF• Not announced on menus
Talkback Chrome• Button, ARIA button, or input type button with haspopup
indicated as dropdown list
![Page 36: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/36.jpg)
36
States and Properties
aria-required and aria-invalid
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Partial Partial No
Talkback FF and Chrome• aria-invalid not announced
![Page 37: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/37.jpg)
37
States and Properties
aria-disabled
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Yes Yes
All• Language varies from dimmed, disabled, to unavailable
![Page 38: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/38.jpg)
38
States and Properties
aria-hidden
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Yes Yes
All• Correct. The item is not indicated by screen reader
![Page 39: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/39.jpg)
39
Resources
Accessibility Management Platform (AMP): https://amp.ssbbartgroup.com
ARIA Specification
http://www.w3.org/TR/wai-aria/SSB Labs ARIA Test Suite
https://labs.ssbbartgroup.com/index.php/Main_PageAdobe Edge Inspect
https://creative.adobe.com/products/inspectARIA Techniques for WCAG 2.0
http://www.w3.org/TR/WCAG20-TECHS/aria
![Page 40: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/40.jpg)
40
![Page 41: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/41.jpg)
41
Thank You!
Contact Us
Jonathan [email protected]
Slide Deck Downloadinfo.ssbbartgroup.com/CSUN2015
Follow Us
@SSBBARTGroup
linkedin.com/company/SSB-BART-Group
facebook.com/SSBBARTGroup
SSBBARTGroup.com/blog
![Page 42: ARIA Support on Mobile Browsers Presented by: Jonathan Avila March 5, 2015.](https://reader038.fdocuments.net/reader038/viewer/2022103005/56649daf5503460f94a9cfba/html5/thumbnails/42.jpg)
42
About SSB BART Group
• Unmatched Experience• Focus on Accessibility• Solutions That Manage Risk• Real-World Strategy• Organizational Strength and
Continuity• Dynamic, Forward-Thinking
Intelligence
• Fourteen hundred organizations (1445)
• Fifteen hundred individual accessibility best practices (1595)
• Twenty-two core technology platforms (22)
• Fifty-five thousand audits (55,930)
• One hundred fifty million accessibility violations (152,351,725)
• Three hundred sixty-six thousand human validated accessibility violations (366,096)