Developer notes for iPhone a11y

Related documents

This document is a result from a design walk through with Everett, a voice over user.
You might also be interested in knowing how to use VoiceOver on the iPhone


This document is a summary of accessibility problems that arise through the usage of VoiceOver on the iPhone 3G S. Most problems were encountered and described during a design walk-through with Everett (Sep 4, 2009 - Alison & Armin)

Please correct any error and fell free to add any a11y problems you know of for the iPhone VoiceOver.

Note from Everett

  • Steve Hockema might have knowledge about the technical problems of interfaces accessed with iPhone VoiceOver.
  • Everett is curious how a native iPhone application would compare to a Safari page in terms of accessibility and features offered for VoiceOver

Problem with embedded objects (according to Everett)

  • Safari on the Mac with VoiceOver does not announce an link if it is embedded within a heading or picture.
  • A picture embedded within a link is not announced

Everett's work around

Duplicate the link after the object the original link is embedded in (e.g. picture).
In order to make the duplicated object invisible use a CSS class to set:

  • height zero
  • position absolute
  • overflow hidden

Accordions or expanding/collapsing panels

Alison asked Everett for experience with accordion objects. Everett hasn't interacted with such an object with the iPhone VoiceOver.

Everett's thoughts:

  • if the object is native it should be supported by VoiceOver
  • if not, support for VoiceOver has to be added

Links activating the expanding or collapsing

Everett expects a link to load a new page and not to trigger an action on the existing page.

  • if it does only a collapse/expand action, the link should carry this information
  • not a big issue if the link makes clear what will happen (e.g. expand)
    • Everett compares it with the visual cue that is given by the little arrows. A blind user needs a text base cue that tells more about the result to expect.
  • expanded stuff needs to come directly after the link that activated the expansion in the DOM order (visual representation does not matter)