Podcast #58: Aural Style Sheets

Dennis and Ross explain aural style sheets, a nifty part of CSS2.

Download Web Axe Episode 58 (Aural Style Sheets)

News & Announcements

What are Aural Style Sheets?

A way of controlling speech synthesis and auditory icons with CSS2, usually through a screen reader.

H1, H2, H3, H4, H5, H6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}

Supported by: Emacspeak, Fonix SpeakThis, and the Opera Browser

Benefits

  • More control over how screen readers will render your documents
  • Also beneficial for those who want your content in a mobile manor (on the road, exercising, almost podcast-esk)
  • Near future, more devices may access internet that you may want read, such as car

Example: Speak-numeral element

digits: a string of numbers is spoken as a whole number (123 = one hundred twenty-three)

continuous: numbers in a string are read successively (123 = one two three)

Elements

  • volume
  • speak
  • pause
  • cure
  • play-during
  • spacial elements (ways to have two voices appear from different areas)
  • voice character
    • speech rate
    • voice family
    • pitch
    • pitch-range
    • stress
    • richness
  • speak-punctuation
  • speak-numeral

Links

2 comments

  1. dotjay

    I said this about the “Can you hear me now?” article too, but it’s worth saying again.

    The issues with aural CSS properties are more complicated than simply “they’re not well supported”.

    The aural property sets in CSS 2 and CSS 3 are different. The CSS 2 properties mentioned in this article will be superceded by new properties defined in CSS 3 (currently a Working Draft), although a few property names have remained in the spec.

    The CSS 2 properties only seem to enjoy reasonable support from Emacspeak. Opera concentrates on supporting a selection of the properties specified as part of CSS 3, not CSS 2. SpeakThis no longer exists.

    More information can be found in my aural CSS notes.

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>