aria support on mobile browsers jonathan avila chief accessibility officer, ssb bart group
TRANSCRIPT
ARIA Support on Mobile Browsers
Jonathan AvilaChief Accessibility Officer, SSB BART Group
Agenda
• Overview• Methodology• Exclusions and Inclusions• Test Results– Landmarks– Roles– States/Properties
• Resources
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 9, 8.4.1, and 8.1.3 – Talkback 3.6.03/4.31 on Android 5.0.2/6.0
• Firefox 36.0/41.0.2• Chrome 40.0.22/46.0.24...
– WP8.1 IE/W10 E• Overall support is good with exceptions
iOS
Result Tally
Android & Talkback w/
FF
iOS & VO w/ Safari
WP8.1 IE & W10 Edge
w/ Narrator
Android & Talkback w/
Chrome
Yes 20 16 10/12 9
Partial 7 9 9 12
No 3 5 11/9 9
Methodology
• 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
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.
Notes on Mobile Testing
• Testing embedded content– AMP Mobile Accessibility Checker will pull DOM from app in
Xcode, Android Studio, & Eclipse and send to AMP for testing– If you have the app code – use Xcode with Safari
• 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)
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
Landmarks - Results
• iOS: All except role form are announced in swipe and 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 indicated while swiping forward and reverse
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes No No
Roles - Checkbox
• Talkback with Firefox– State change is not automatically announced on
toggle
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes Yes Yes
Roles – Radio Button
• Talkback Chrome & Firefox and WP8.1 IE/W10 E– Position in set is not announced– Changes in state are not announced automatically
or announced incorrectly• *Refer to role group for further support
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes Yes Yes
Roles - Links
• Talkback Chrome and WP8.1 IE/W10 E– Aria-label supported– aria-labelledby and aria-describedby not
supported
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes Partial Partial
Roles – Radiogroup, Region and Group
iOS • Visible group name is in swipe order only (new to 8.4)Talkback FF• Role is not indicated but accessible name is notTalkback Chrome• On radiogroup name is supported on nested controlsWP8.1 IE/W10 E• No support
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Partial Yes Partial No
Roles - Alert
• iOS– Text is announced, role is not
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes No No No
Role – Heading and Level
• Talkback Chrome– Role of heading is announced but no level
information/No role or level is announced
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes Partial/No No
Role – Button with aria-pressed
• iOS– Now working correctly in iOS9
• Talkback FF– Change of state is not announced when toggled
• Talkback Chrome– Correct Android 6. Android 5: Indicated as switch control,
state is always indicated as "not checked". Toggled state is not automatically announced
• WP8.1 IE/W10 E - Only aria-label supported, state correctiOS
VoiceOverTalkback
FirefoxTalkback Chrome
WP8.1 IE/W10 E
Yes Yes No/Yes Partial
Roles - Combobox
• iOS, Talkback FF, and WP8.1 IE/W10 E– Name, role, and state are indicated– Options cannot be selected
• Talkback Chrome– Role is indicated as edit box– Name, and state are not indicated– Arrows move to items but speak is cut off
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
No No Partial No
Role - Listbox
• iOS and Talkback Chrome– Position in set is not announced– Selection state not automatically announced after
selection– Role is not announced
• Talkback Chrome– Name, and selected are not announced– Arrows change selection but nothing is announced
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP 8.1/W10E
Partial Yes Partial Yes
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– Android 6 correct with no role: Android 5: Only text is
announced on appear and on swipeiOS
VoiceOverTalkback
FirefoxTalkback Chrome
WP 8.1/W10E
Yes Yes Yes/Partial No/Yes
Role - Dialog
• 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
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
No Partial No No/Yes
Role - Grid
• iOS and Talkback Chrome– Headers are not announced as the user swipes
through data table cells• WP8.1/W10E– Aria-label and aria-labelledby references to
current cell not supportediOS
VoiceOverTalkback
FirefoxTalkback Chrome
WP8.1 IE/W10 E
Partial Yes Partial Partial
Roles - Menu
• 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
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Partial Partial Partial Yes
Roles - Presentation
• All– Correctly ignores role for lists (probably because
lists aren't supported) but not for tables and images
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes Yes Yes
Roles - Sliders
• All– Name, role, and value are announced– Value cannot be changed by double tapping
gesture• Pass through gesture on iOS• Arrow keys on WP8.1/W10E
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Partial Partial Partial Partial
Roles - Progressbar
• iOS, Talkback FF, and WP 8.1– Name, role, and value are announced– When value change nothing is announced• iOS 9 announces 1,1,1,....
– Aria-live region could be used to control what is spoken
– Chrome: when focused “percent percent” spokeniOS
VoiceOverTalkback
FirefoxTalkback Chrome
WP8.1 IE/W10 E
Partial Partial No Partial
Roles - Spinbutton
• iOS & Talkback Chrome– Control is completely skipped over when swiping or with
explore by touch• iOS 9 focuses the control but nothing is announced/operational
• 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
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
No Partial No Partial
Roles – Page Tabs
• WP8.1 IE/W10 E– Change of selection is not automatically
announced– Position of tabs is not announced– Tabs don't activate
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes No Partial
Roles - Toolbar
• 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
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Partial Yes Partial Partial
Roles - Tree
• WP 8.1– Tree role isn't announced but leaf node roles are
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
No Yes No Yes
Roles - Tooltip
• All– Text is announced when swiped to or referenced
by aria-describedby• WP8.1 IE/W10 E– Bonus: Role of tooltip is announced
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes Yes Yes
States and Properties - aria-label, aria-labelledby, and aria-describedby
• Talkback Chrome and WP8.1/W10E– Aria-describedby not supported
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes Partial Partial
States and Properties – aria-live
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes Yes No
* Results may vary depending on how the aria-live regions contents change. For example wither they are changed with display property or addition of DOM nodes or DOM text nodes, etc.
States and Properties – aria-expanded
• iOS 8 – iOS 9 working correctly– iOS 8 State is switched (<8.4 always 8.4 on toggle),
expanded is announced as collapsed and collapsed as expanded
– iOS 8 VO identifies the buttons with aria-expanded as popup buttons. iOS 9 just says button
• Talkback FF– State is not automatically announced on toggleiOS
VoiceOverTalkback
FirefoxTalkback Chrome
WP8.1 IE/W10 E
Partial Partial No Yes
States and Properties – Drag and Drop (@aria-grabbed, aria-dropeffect)
• All– No drag or drop state information is provided
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
No No No No
States and Properties – aria-haspopup
• iOS– iOS 9 all; iOS 8.4 Button and link only; <iOS 8.4
button only• Talkback FF– Not announced on menus
• Talkback Chrome– Button, ARIA button, or input type button with
haspopup indicated as dropdown listiOS
VoiceOverTalkback
FirefoxTalkback Chrome
WP8.1 IE/W10 E
Partial Yes Partial No
States and Properties - aria-required and aria-invalid
• Talkback FF and Chrome– aria-invalid not announced
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Partial Partial No
States and Properties – aria-disabled
• All– Language varies from dimmed, disabled, to
unavailable
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes Yes Yes
States and Properties – aria-hidden
• All– Correct. The item is not indicated by screen reader
iOSVoiceOver
Talkback Firefox
Talkback Chrome
WP8.1 IE/W10 E
Yes Yes Yes Yes
Questions?
Contact Information & Resources
• Jonathan Avila: [email protected] • Additional 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_Page– Adobe Edge Inspect - https://
creative.adobe.com/products/inspect– ARIA Techniques for WCAG 2.0 - http://
www.w3.org/TR/WCAG20-TECHS/aria– Microsoft Edge and Accessibility– http
://www.microsoft.com/en-gb/developers/articles/week03oct15/accessibility-microsoft-edge-and-windows-10