Alternate content for script Mobile Browser Support for ARIA Roles, States, and Properties - Level Access
Toggle

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

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