Monday, 8 September 2014

Using VoiceOver to test a mobile web site

Using VoiceOver to test a mobile web site

I sometimes get asked by developers how to test a mobile web site with a screen reader. Both iOS and Android have screen readers built in.

Here is a very basic guide how to get started with VoiceOver on iOS in order to carry out some basic screen reader testing.



Starting VoiceOver

iOS has got a screen reader built in. It is called "VoiceOver" and I would recommend to use that for testing.

You can enable it through the device settings, but before you do that I would recommend to change the "Accessibility Shortcut" setting as this allows your developers/testers to quickly turn VoiceOver on and off, which should make it a lot easier for them as they can turn VoiceOver on when needed and then turn off again.


Accessibility Shortcut (recommended):

The Accessibility Shortcut is a quick way to turn VoiceOver on or off
  • Map VO to the Home Key (Triple-click on/off):
    Settings → General → Accessibility → Accessibility Shortcut
The "Accessibility Shortcut" allows to start/stop VoiceOver with a triple press onto the Home button on the iPhone / iPad. This makes testing a lot easier so I would strongly recommend this setting.

Switching VoiceOver on:

  • Use triple press of the Home button (if the Accessibility Shortcut was enabled)
or
  • Settings → General → Accessibility → VoiceOver → VoiceOver
 

VoiceOver Gestures

VoiceOver changes all the gestures on the device which may take a while to get used to. The most important VoiceOver gestures:

Interacting with controls:

  • Single tap (with 1 finger) speaks an item and sets the VoiceOver focus onto that item (it does not activate links/buttons etc. as normal!)
  • Double tap (with 1 finger) interacts with the selected control, e.g. it will press the selected button or follow the selected link. This is similar to a single tap without VoiceOver, but note that it will perform the action on the selected item (the item with the VoiceOver focus), no matter where on the screen you tap.
Example: To activate a button or link, first tap once onto it to set the focus onto it, then double tap (anywhere) to press the button.
  • Swipe with 3 fingers: scroll lists

Navigation:

  • Explore by touch: Move your finger around the screen, elements you touch will be spoken.
  • Swipe navigation:
    • Swipe right (swipe from the left edge to the right edge) to move the VoiceOver focus forward to the next item
    •  Swipe left (swipe from the right edge to the left edge) to move the VoiceOver focus back to the previous item.
Swipe navigation is the most common form of navigating so make sure to test this with the mobile site!
Check the focus moves in a logical order, that it reaches all interface elements, and that everything is announced correctly (including text alternative of images etc.)

More Information

More information about using VoiceOver is available e.g. from the Apple iOS Developer Library: Test Accessibility on Your Device with VoiceOver

1 comment:

Jiya Brad said...

You have shared very precious information.