Speech Stylesheets

From CSS Discuss

Jump to: navigation, search


Stylesheets for voice browsers

This document describes some of the issues concerning the use of CSS for voice browsers (browsers with built-in speech synthesis) (media="aural" or "speech"). See also Media Stylesheets .

It's most important to understand that screen readers are not voice browsers. Vision-impaired users are catered for by screen reader software such as JAWS. Screen readers take the screen output from a normal browser and then read the text on it. By contrast, a voice browser is a regular browser with additional voice capability. It is potentially much more powerful than a screen reader because the spoken text can be styled (with CSS) according to the design and content of the page. For example, elements of the page that are relevant only to the screen can be suppressed (e.g. menus). Different sections of text can be spoken in different voices, according to context. Page elements such as headings and side panels can be given aural cues.

Voice browsers

The appropriate media type is in a state of transition at present (June 2008). CSS2 defines a media type "aural" but support by speech synthesisers is negligible. CSS2.1 App. A Aural Stylesheets deprecates "aural". It introduces "speech" in its place but does not formally (normatively) define specific CSS properties for it, leaving that task for the upcoming CSS3 Speech Module.

At present, Opera is the only general-purpose browser to have voice capability (since Opera 7.6). It implements aspects of the CSS3 Speech Module, using a set of voice libraries developed by IBM, plus XHTML+Voice. Its support is experimental and partial but it gives an exciting demonstration of what is possible. In addition to enhancing accessibility for vision-impaired users, a voice browser, when installed on a mobile device, would provide a powerful alternative to the physical limitations of very small screens when rendering Web content.

Screen readers

Bob Easton's valuable research on Screenreader Visibility shows that most screen readers use Internet Explorer to do their HTML and CSS parsing. Therefore, the screen reader's aural output will be based on what is displayed on the screen. That might be strictly logical but it's obviously not what is needed. The screen reader will appear to honour [honor] media="screen" (and media="all" of course) and ignore media="aural" or "speech".

Examples and further reading

My own site has a page which gives further information and an example of using CSS3 Speech rules.

Opera's site has several very good articles on voice browsing.

Tarquin has a page on his site Making Accessible pages which has a speech-enabled 'Spoken Page' alternate stylesheet. In Opera, you can enable it using View - Style - Spoken Page. Then select some or all of the text and press V (or right-click and select Speak).


From what I've seen on the css list and elsewhere, there are inconsistencies with display: none and visibility: hidden on screen readers. -- tarquin

About this page

This page was created by Jim Wilkinson in June 2004, who welcomes contributions, comments and corrections.

Personal tools