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
Purpose
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)