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 Avilajon.avila@ssbbartgroup.com

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)