ARIA Support on Mobile Browsers Jonathan Avila Chief 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 – Talkback /4.31 on Android 5.0.2/6.0 Firefox 36.0/ Chrome / – 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 Yes201610/129 Partial79912 No3511/99

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 search complementary 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 iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Yes No

Roles - Checkbox Talkback with Firefox – State change is not automatically announced on toggle iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E 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 iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Yes

Roles - Links Talkback Chrome and WP8.1 IE/W10 E – Aria-label supported – aria-labelledby and aria-describedby not supported iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Yes 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 not Talkback Chrome On radiogroup name is supported on nested controls WP8.1 IE/W10 E No support iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E PartialYesPartialNo

Roles - Alert iOS – Text is announced, role is not iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E YesNo

Role – Heading and Level Talkback Chrome – Role of heading is announced but no level information/No role or level is announced iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Yes Partial/NoNo

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 correct iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Yes No/YesPartial

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 iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E No PartialNo

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 iOS VoiceOver Talkback Firefox Talkback Chrome WP 8.1/W10E PartialYesPartialYes

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 swipe iOS VoiceOver Talkback Firefox Talkback Chrome WP 8.1/W10E Yes Yes/PartialNo/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 iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E NoPartialNoNo/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 supported iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E PartialYesPartial

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 iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Partial Yes

Roles - Presentation All – Correctly ignores role for lists (probably because lists aren't supported) but not for tables and images iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E 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 iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E 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” spoken iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Partial NoPartial

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 iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E NoPartialNoPartial

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 iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Yes NoPartial

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 iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E PartialYesPartial

Roles - Tree WP 8.1 – Tree role isn't announced but leaf node roles are iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E NoYesNoYes

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 iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Yes

States and Properties - aria-label, aria- labelledby, and aria-describedby Talkback Chrome and WP8.1/W10E – Aria-describedby not supported iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Yes Partial

States and Properties – aria-live iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E 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 toggle iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Partial NoYes

States and Properties – Drag and Drop aria-dropeffect) All – No drag or drop state information is provided iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E 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 list iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E PartialYesPartialNo

States and Properties - aria-required and aria-invalid Talkback FF and Chrome – aria-invalid not announced iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E YesPartial No

States and Properties – aria-disabled All – Language varies from dimmed, disabled, to unavailable iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Yes

States and Properties – aria-hidden All – Correct. The item is not indicated by screen reader iOS VoiceOver Talkback Firefox Talkback Chrome WP8.1 IE/W10 E Yes

Questions?

Contact Information & Resources Jonathan Avila: Additional Resources: – Accessibility Management Platform (AMP) – ARIA Specification - – SSB Labs ARIA Test Suite – Adobe Edge Inspect – ARIA Techniques for WCAG – Microsoft Edge and Accessibility – gb/developers/articles/week03oct15/accessibility-microsoft- edge-and-windows-10 gb/developers/articles/week03oct15/accessibility-microsoft- edge-and-windows-10