Talking Calculator

This is an example of accessibility features available using SVG, along with a TTS engine. This calculator was designed to scale larger as the window is expanded, so it will be easy for the user to hit the right button. Each button, and the text area, can be accessed by “tabbing” (using the “q” button) and selected with the “space” or “enter” keys. As a button is selected via mouse or keyboard, the value is read to the user, as is the total of the operation.

This sample requires Windows IE, enhanced with the Adobe SVG viewer (available at http://www.adobe.com/svg/viewer/install/main.html), and the Microsoft TTS plugins, available as 2 downloads weighing in at under 2MB:

Instructions

Use “q” and shift+“q” to tab between buttons, “space” or “enter” to select the current button. This example uses the upcoming focusable and tab-index attributes from SVG 1.2 on the buttons, along with a small script to allow them to work in ASV3.

Credits

Many thanks to Jim Ley and Dave Pawson, who first experimented with this, and from whose code I learned to use the TTS engine. Please see Jim's great examples.