Testing your content on mobile need not be as painful as you think. If you have an Android and iOS device then you already either have a free mobile screen reader in your pocket or it’s a short download away. This is a quick guide to get you set up.

I’ve not covered Nokia/Talks as Talks is costly at over £200 in the UK. Blackberry also don’t have a viable speech output solution in the UK but you can buy Oratio (formally Orator) in the US.

There are so many mobile devices, browsers, OS’s and screen readers out there it can be hard to know where to start but you can’t cover them all and you have to start somewhere. I think Android and iOS are as good a place as any to start testing with as both can test how well your websites fare in mobile browsers as well as also test device specific apps.

The bottom line is that talk is cheap: the screen reader options listed here are free, or comparatively cheap, and widely available so there really is little excuse to not be testing website and web apps on mobile. I’ll post a guide to what to test soon.

Android

OS: Android 2.2.2 (Froyo), Android 2.3.7 (Gingerbread), Android 3.2.2 (Honeycomb), Android 4.4 (Ice-cream sandwich)

Android doesn’t have the best speech output support but is one to watch. There is no native speech output but you can install third party solutions such as Talkback (from Google), IDEAL Web Browser and Mobile Accessibility (from Code Factory).

Talkback is free and comes pre-installed in later versions of phones but has no support for browsing using touch – I believe you have to have an external keyboard but I’ve not tested this myself.

IDEAL is a back-ported version of AndroidVox which was originally an Android port of the ChromeVox (a built-in screen reader for Chrome OS) designed to run on Ice Cream Sandwich. This is very interesting because if Google can mirror Apple by bundling an OS, browser, handset and speech output the mobile market for blind users is really looking up.

Mobile Accessibility is built by Code Factory and is free in the US but costs £59 in the UK. It works as a screen skin that allows the user to access applications using speech output. The interface is less complex with bigger, more discoverable icons for key apps such as web, SMS, email, contacts, calendar, phone, settings, alarms and ‘Where am I?’.

Mobile Accessibility skin with larger icons for apps, numbers and ringtone options

Enabling speech output on Android:

  1. Go to Settings > Text-to-Speech (it may be inside “Voice input & output settings”)
  2. Click “Listen to an example”. If it doesn’t play, try clicking “Install voice data”, and follow the instructions. Note you can also adjust the speech rate and language here
  3. Go back to the main Settings screen and open Accessibility settings
  4. Select the checkbox next to Accessibility and OK to the alert asking for confirmation
  5. Select the checkbox next to Talkback and OK to the alert asking for confirmation

This should enable speech for all the speech output packages above. Just a quick note: I have found this can be a bit hit or miss but keep persevering. The Google Eyesfree Project has more in depth instructions about installing speech output software should you hit any problems.

iOS

Devices: iPhone 4, 4s, iPod Touch, iPad and iPad2

iOS has the best speech output support on the market today and is bundled free with the handset and iOS. It’s because Apple own all three that the experience is far superior to anything else out there. It’s also the easiest to use and test on.

Switch Voiceover on:

  • Triple press the home key, OR
  • Go to Settings, General, Accessibility, Voiceover On/Off

iOS Voiceover settings

Basic touch commands:

  • Tap: highlight an element
  • Double tap: activate an element
  • Flick three fingers: scroll
  • Double tap hold: Voiceover pass through key to activate an element. Can be used to activate a slider then drag to manipulate the slider
  • Flick right or left: select next/previous item
  • 3 fingers, 3 quick taps: turns the screen curtain on
  • 2 fingers and hold: simulates hovering then clicking (this should reveal the controls on the EMP for example, or open a drop down menu)
  • Turn an imaginary dial: this activates the web rotor where you can choose to navigate via container (block level elements, landmarks, headings, lists, words etc). Once done just

Web rotor:

The web rotor allows you to navigate using elements such as characters, words, lins, headings, links, form controls, tables, lists, landmarks, visited links, non-visited links, buttons, text fields, images, static text, zoom, in-page links, hints, search fields, same item and vertical navigation. It also includes customisation options such as speech rate and volume.

  • Rotate two fingers on screen as if turning a dial
  • Select ‘Headings’ for example
  • Flick up or down to jump from heading to heading

iOS web rotor showing headings

Voiceover screen curtain:

This is the pièce de résistance: to test how well content is communicated when you can’t actually see it is by my switching off the screen while Voiceover is running. Turn off the display by triple tapping the screen with three fingers then use the phone as normal.