Issues and work-arounds for Apple's VoiceOver for iOS

Despite long-standing bug reports, webkit has not made further progress 
on Canvas a11y:
"Fallback content in canvas element not focusable"
https://bugs.webkit.org/show_bug.cgi?id=50126

I would like to see Apple's VoiceOver for iOS working with Canvas web 
apps; when web app authors follow the HTML5 and Canvas 2d specs.

Given the lack of progress from Apple on this issue, authors targeting 
Apple's mobile platforms, authors may have to use unfortunate and 
inefficient techniques, such as self-voicing. Apple has introduced 
support for the audio tag.

I've pointed out a more specific bug, to Apple's VoiceOver:
"VoiceOver does not work well with Canvas in mobile safari"
https://bugs.webkit.org/show_bug.cgi?id=63463


I've confirmed that behavior similar to the standard behavior of 
VoiceOver on iOS is possible to produce within the scripting 
environment. This, unfortunately, requires an online text to speech 
service, the use of audio tags, and well-structured focus management. 
It's quite a bit of work on the author, but it does result in a usable 
eyes-free interface.

Chromium has introduced an extension within their vendor namespace, to 
exploit the text-to-speech services available on the host OS, as well as 
a plugin mechanism.

http://code.google.com/chrome/extensions/experimental.tts.html
"Use the chrome.experimental.tts module to play synthesized 
text-to-speech (TTS) from your extension or packaged app, or to register 
as a speech provider for other extensions and packaged apps that want to 
speak"

It's heading out of experimental soon, as the development branch of the 
documentation shows.

Web app authors providing packaged web apps for iOS may decide to re-use 
that structure, perhaps putting it in navigator.tts namespace. iOS does 
have rich text-to-speech services.


Summary:
There's been no movement from Apple in relation to Canvas a11y. A 
Chromium contributor has made initial patches for WebKit, to fix the 
very basic requirements of focus management. Apple has introduced 
support for the audio tag in their mobile platform. Both Chromium and 
Safari can support local text-to-speech services for packaged 
applications. Untrusted web apps may, unfortunately, rely on 
self-voicing and online text-to-speech services.

Web apps may also use strict CSS semantics, with background: 
-webkit-canvas and content: url(..) replaced, to gain some support in 
Mobile Safari. Presently, Canvas-based web apps are not using such 
strong semantics, just as they are not relying on SVG for a11y.

Example of self-voicing:
element.onfocus = function(e) { audioTag.src = 
'https://ttsService/?string='+e.target.textContent; };

Self-voicing is not a bad thing in itself. But it is not sufficient for 
WCAG level AA. It is quite a bit of work to toggle VoiceOver on and off, 
with Apple's mobile platform. Self-voicing can work with Apple's 
VoiceOver, but it's a difficult experience.


-Charles

Received on Sunday, 4 September 2011 17:22:44 UTC