Mobile Browser Support for ARIA Roles, States, and Properties

Posted on:

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

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 (probably because lists aren’t supported) but not for tables and images

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

 

« More Blog Posts

Put yourself on the path to complete accessibility!

Just fill out the form below and we’ll contact you to set up your free consultation with an expert specializing in your industry.

If you need more immediate assistance, please send an email to info@ssbbartgroup.com or call (800) 889-9659. We look forward to helping you!