ARIA Support on Mobile Browsers Jonathan Avila Chief Accessibility Officer, SSB BART Group.

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