Mobile Browser support for ARIA roles, states, and properties
Last updated October 21, 2015
Discussion
- 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.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 support is good with exceptions
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
- 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)
Findings by ARIA property, state, and role
Results Table
| Role, state, or property | iOS VoiceOver | Talkback Firefox | Talkback Chrome | WP8.1 IE/W10 E |
|---|---|---|---|---|
| Landmarks | Yes | Yes | No | No |
| Checkbox | Yes | Yes | Yes | Yes |
| Radio | Yes | Yes | Yes | Yes |
| Links | Yes | Yes | Partial | Partial |
| Radiogroup, region, group | Partial | Yes | Partial | No |
| Alert | Yes | No | No | No |
| Heading and level | Yes | Yes | Partial/No | No |
| Button w/ aria-pressed | Yes | Yes | No/Yes | Partial |
| Combobox | No | No | Partial | No |
| Listbox | Partial | Yes | Partial | Yes |
| AlertDialog | Yes | Yes | yes/partial | No/Yes |
| Dialog | No | Partial | No | No/Yes |
| Grid | Partial | Yes | Partial | Partial |
| Menu | Partial | Partial | Partial | Yes |
| Presentation | Yes | Yes | Yes | Yes |
| Slider | Partial | Partial | Partial | Partial |
| Progressbar | Partial | Partial | No | Partial |
| Spinbutton | No | Partial | No | Partial |
| Tab, tablist | yes | Yes | No | Partial |
| Toolbar | Partial | Yes | Partial | Partial |
| Tree | No | Yes | No | Yes |
| Tooltip | Yes | Yes | Yes | Yes |
| aria-label, aria-labelledby, aria-describedby | Yes | Yes | Partial | Partial |
| aria-live | Yes | Yes | Yes | No |
| aria-expaznded | Partial | Partial | No | Yes |
| aria-grabbed, aria-dropeffect | No | No | No | No |
| aria-haspopup | Partial | Yes | Partial | No |
| aria-required, aria-invalid | Yes | Partial | Partial | No |
| aria-disabled | Yes | Yes | Yes | Yes |
| aria-hidden | Yes | Yes | Yes | Yes |
Specific Finding
Exceptions are noted below. When nothing is noted then the item was found to be working as expected.
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 aor 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
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_Page
Adobe Edge Inspect - https://creative.adobe.com/products/inspect
ARIA Techniques for WCAG 2.0 - http://www.w3.org/TR/WCAG20-TECHS/aria
Microsoft Edge and Accessibility
http://www.microsoft.com/en-gb/developers/articles/week03oct15/accessibility-microsoft-edge-and-windows-10
Contact
Jonathan Avila: jon.avila@ssbbartgroup.com