Mobile Browser Support for ARIA Roles, States, and Properties

Last month I had the pleasure of attending and speaking at the 1st Annual IAAP Access 2015 Conference, including a session I presented on the current state of mobile browser support for ARIA.  After the session a number of people asked me to share the test results and related content which I am outlining in this post.

What Was Tested?

Thirty different ARIA roles (landmarks and widgets) with key aria properties (e.g. aria-expanded, aria-checked, etc.) were tested with:

• VoiceOver on iOS 9.1, 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…
• Windows Phone 8.1 IE browser (WP8.1) /Windows 10 Edge browser (W10E)

Overall Results Tally

Overall Results Tally

Support	Android & Talkback w/ FF	iOS & VO w/ Safari	WP8.1 IE & W10 Edge w/ Narrator	Android & Talkback w/ Chrome
Yes	20	16	10/12	7
Partial	7	9	9	13
No	3	5	9/11	10

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)

Specific Findings

Exceptions are noted here – when nothing is noted then the item was found to be working as expected. These results can be viewed in a table format on GitHub.

Landmark 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

Role Checkbox Results

• Talkback with Chrome and Firefox
  • State change is not automatically announced on toggle

Role 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

Role Link Results

• Talkback Chrome and WP8.1 IE/W10 E
  • Aria-label supported
  • aria-labelledby and aria-describedby not supported

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

Role Alert

• iOS
  • Text is announced, role is not

Role Heading and aria-level

• Talkback Chrome
  • Role of heading is announced but no level information/No role or level is announced

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

Role 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

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

Role Alert Dialog

• 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

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

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

Role 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

Role Presentation

• All
  • Correctly ignores role for lists but does not suppress structure for tables
• iOS
  • Ignores images with role presentation and no alt text.

Role Slider

• 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

Role Progressbar

• iOS, Talkback FF, Talkback Chrome 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

Role 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

Role tab and tablist

• WP8.1 IE/W10 E
  • Change of selection is not automatically announced
  • Position of tabs is not announced
  • Tabs don’t activate

Role 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

Role Tree

• WP 8.1
  • Tree role isn’t announced but leaf node roles are

Role Tooltip

• All
  • Text is announced when swiped to or referenced by aria-describedby
• WP8.1 IE/W10 E
  • Bonus: Role of tooltip is announced

aria-label, aria-labelledby, and aria-describedby

• Talkback Chrome and WP8.1/W10E
  • Aria-describedby not supported

aria-live

* 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.

aria-expanded

• iOS
  • 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

aria-grabbed and aria-dropeffect

• All
  • No drag or drop state information is provided

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

aria-required and aria-invalid

• Talkback FF and Chrome
  • aria-invalid not announced

aria-disabled

• All
  • Language varies from dimmed, disabled, to unavailable

aria-hidden

• All
  • Correct. The item is not indicated by screen reader

Resources

• AMP (Accessibility Management Platform)
• ARIA Specification
• SSB Labs ARIA Test Suite
• ARIA Techniques for WCAG 2.0
• Microsoft Edge and Accessibility