IOS Accessibility Issues

From Level Access Web Labs
Jump to: navigation, search

List of iOS accessibility issues

  • Picker control (the control which is displayed when a <select> element is present on a web page, for example): focus does not return properly from picker control in web content
  • Bug 161118 – AX: VoiceOver on iOS ignores aria-checked on menuitemradio and menuitemcheckbox this has a status of fixed when looking at the above URL.
  • AX: ARIA tree & treeitem roles & aria-expanded state not spoken to VoiceOver iOS 10 This is still broken in iOS 12 tested with
  • iOS 10.0 broke support for links' use of aria-labelledby and aria-label, and it remains broken in 10.2. Fixed in iOS 12. From 9/26/16 WebAIM post from Paul Adam found by Jon. Test file given is VO in 10.x announces links' inner text but fails to announce aria-labelledby or aria-label when present in these links, though it does announce aria-describedby correctly.
  • iOS 10's support for role=dialog has changed, with "good news and bad news". Good news: the dialog is treated as a landmark and its boundaries are announced (web dialog / end web dialog). The (very) bad news is that adding aria-modal="true" breaks the reading of the dialog and prevents access to the rest of the page. That was tested by adding aria-modal="true" to the dialog in, and on This is not fixed in iOS 11.0 (Get further info from prior email thread and add here.) This seems to be partially fixed in iOS 12 the focus is not set to the title of the dialog when the checkbox is checked. However, content outside of the dialog is announced by VoiceOver when the dialog is opened.
  • Radio buttons all being announced as "1 of 1" rather than the correct "x of y": This may have been fixed or at least improved as a test page that elicited this problem with iOS 9.3.5 works fine with iOS 10.2.1. This has been a long-time observation or tendency in VoiceOver. The following article seemed to pin the problem on VoiceOver "hitting a wall" when it encountered display:block, and the first responder (heh) claimed that changing display:block to display:inline-block would fix it, and the original poster confirmed the fix. However, testing suggested that this only improved but did not fix the problem in iOS 9.3.5. With display:block, all 3 radio buttons were "1 of 1"; with display:inline-block, the first radio button was "1 of 1" while the second and third ere "1 of 2" and "2 of 2". But VO in iOS 10.2.1 announces the correct X of Y using either CSS value. This should not be taken as proof that iOS 10.2.1 (or whatever prior version of 10.x) fixed the problem across the board, but it's certainly hopeful. Additional testing that confirms or contradicts these results should be entered here. The stackoverflow's sample form can be used for testing, or the following mimics it: This seems to be fixed in iOS 12. i also tested on the freedom scientific sample form and could not reproduce this issue.
  • it is not possible to adjust the ARIA slider in iOS Aria Slider
  • The <select> elements that contain <optgroup> groupings are not read properly on iPhone iOS 11.2.6 on Safari Browser. When VoiceOver reads the optgroup label, it is assumed as a regular picker option rather than a heading. Thus, users cannot understand the structure of the listbox. The user cannot trigger the option using the done button. No option is selected after the user use the swipe up or down on the picker, then done button. If the user use double tap to trigger the option on the optgroup, the picker container is left on the screen and done button must be pressed to remove the picker container on the page. This is still an issue in iOS 12. Tested with
  • When SVGs are implemented as <img> tags with an .svg as the source, VoiceOver with Safari on mobile skips the image entirely, even if there is an alt value, without role="img". If the image is implemented as link content, VoiceOver does read the alt value as the link content, but does not identify it as part of an image without the role. (March 2017,
  • aria-label attributes applied to <svg> elements are skipped by VoiceOver with Safari on iOS unless the <svg> is the child of a focusable element. (March 2017,
  • Try to activate a control (A) that's visually covered by sticky or fixed position element (B). Result: element (B) absorbs the click; if (B) is a control it is activated.
  • CSS property display:table causes VoiceOver to announce the affected content block as if it were in a table, announcing "table start" and (conditionally) "table end". Whether this issue began only with recent versions of VoiceOver (11+) is unknown without further testing. (Thanks to Sammy & Anna.) See Sammy's test page
  • We've encountered this problem under iOS 11 and possibly 10. It occurs most often when toggling the reader on a web page. When loading a page, enable the reader, switch away from Safari and switch back. Result: VoiceOver will read nothing (swiping from address leads to "Back/Forward/Share"). Disabling the reader fixes it. Reloading the page does not. This issue is possibly fixed in iOS 12.


Safari related VoiceOver/iOS bugs should be logged on the Webkit bugzilla page. Bookmark this short URL:

Here’s the list of all open WebKit AX bugs:


In addition to WebAIM posts, Jon also suggested Twitter is a good place to look for others #ios10 #a11y He also suggested that is a good place to look for what iOS 10 might have fixed/improved in VO.

Third-Party Issues

The unsupported FastClick.js has been found to create major unreliability in VoiceOver's (10.x at least) ability to activate links (at least). Its purpose of removing the 300ms delay for touch events has evidently outlived its usefulness anyway and we recommend clients remove it from their mobile/responsive websites. (More details are in internal email exchanges from early August 2017. Can add some of that here, but in the meantime, ask Jon or Mike or MItchell or a few others.)