aria support on mobile browsers presented by: jonathan avila march 5, 2015
TRANSCRIPT
ARIA Support on Mobile Browsers
Presented by:Jonathan AvilaMarch 5, 2015
2
Agenda
• Overview• Methodology• Exclusions and Inclusions• Test Results
– Landmarks– Roles– States/Properties
• Resources
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
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
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
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.
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)
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
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
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
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
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
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
14
Roles
Alert
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes No No No
iOS• Text is announced, role is not
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
32
State and Properties
aria-live
iOSVoiceOver
Talkback Firefox
Talkback Chrome
Windows Phone 8.1
Yes Yes Yes No
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
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
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
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
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
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
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
40
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
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)