Plugin Sale! Save 15% on pro plugins with discount code: FALL2020
Web Dev + WordPress + Security

The Voice of the World Wide Web (Consortium)

Check out this sweet composition of aural styles discovered in the stylesheet for the W3C’s website:

/* AURAL STYLES (via W3C) */

@media aural {
   h1, h2, h3,
   h4, h5, h6    { voice-family: paul, male; stress: 20; richness: 90 }
   h1            { pitch: x-low; pitch-range: 90 }
   h2            { pitch: x-low; pitch-range: 80 }
   h3            { pitch: low; pitch-range: 70 }
   h4            { pitch: medium; pitch-range: 60 }
   h5            { pitch: medium; pitch-range: 50 }
   h6            { pitch: medium; pitch-range: 40 }
   li, dt, dd    { pitch: medium; richness: 60 }
   dt            { stress: 80 }
   pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
   em            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
   strong        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
   dfn           { pitch: high; pitch-range: 60; stress: 60 }
   s, strike     { richness: 0 }
   i             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
   b             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
   u             { richness: 0 }
   a:link        { voice-family: harry, male }
   a:visited     { voice-family: betty, female }
   a:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}

Not bad. Listening to this cascading orchestra, I would imagine the sound of a relaxed-yet-formal standards-compliance gentleman carefully articulating the contents of the page.

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
The Tao of WordPress: Become your own WordPress guru.

13 responses to “The Voice of the World Wide Web (Consortium)”

  1. Jonathan Ellse 2009/03/22 1:14 pm

    Very Interesting. I for one didn’t even know CSS could be used aurally.

  2. Jonathan Ellse 2009/03/22 1:26 pm

    Is this just included in the main CSS file or is it imported? I would be inclined to think that no-one would view w3’s website who was blind.

  3. Jeff Starr
    Jeff Starr 2009/03/22 1:35 pm

    Hi Jonathan,

    The W3C’s aural styles currently are included in this file:

    http://www.w3.org/StyleSheets/home-import.css

    ..which is indeed imported from their main stylesheet:

    http://www.w3.org/StyleSheets/home.css

  4. I’m disturbed by the orthograph of “aural”. In french it spells “oral”, like “un orateur” (a speaker). When I tried to go to Wikipedia learn the origins of “aural”, I was redirected to hearing, whereas the “oral” page exists and seems to validate the French equivalent.

    Oh, and the CSS is pretty cool :-)

  5. Jeff Starr
    Jeff Starr 2009/03/23 8:27 am

    @Louis: I think it makes sense to use “aural” instead of “oral” given the fact that the word refers more to speaking and hearing than it does aspects of the mouth itself. In my experience, “oral” involves the physical aspect of speech production, such as the mouth, lips, tongue and so on. On the other hand, the word “aural” refers to the properties of speech itself, especially as they involve auditory reception, or “hearing”. But then again, I’m no expert on the subject ;)

  6. Jonathan Ellse 2009/03/23 11:21 am

    @Jeff

    Thanks for the links. Very helpful.

  7. @Je#fff: your intuition was right it seems! Thereafter, you will find the two ethymologis I found on a web-dictionnary.

    from L. auris “ear”. Meaning “received or perceived by ear”

    from L.L. oralis, from L. os (gen. oris) “mouth, opening, face, entrance,”

    This subtle variation in the vowels is qui meaningful indeed. I find it quite unpleasant, but it’s mostly because in French “aural” is a very ugly orthograph mistake, I suspect.

    Anyway, it was interesting to learn the origins of both words. Good day to you Jeff :-)

  8. Has anyone recorded the sound?
    It would be interesting to hear.
    Cheers!

  9. ??? I simply don’t get the point. English is not my mother-tongue and the only thing i could read out of your comments was, that the style-sheet has something to with hearing??? Is this a style-sheet for blind people, that makes your headers, etc. talking?

  10. Jeff Starr

    @K: Yes, you are on the right track.. Read more about “aural” styles from the same people who created the CSS code shared in my article:

    http://www.w3.org/TR/CSS2/aural.html

    That article should clear things up and answer most, if not all, of your questions.

  11. Very good. Thanks for the info. Other related links given here are also very helpful.

  12. developersouvik 2009/05/20 10:47 am

    Just wish to know about the aural css supported browsers.or any other APIs for this css?

    Thanks-

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
Air finally clearing here in WA. Feeling grateful to breathe again. #oxygenmatters
Past week here in WA state has been hellish. So much smoke, like living in a chimney.
Now in September, I’m where I wanted to be in March.
Spent some time updating my article on unsafe characters, once again current with latest IETF specification.
Just realized that “Neo” is an anagram for “One”. As in, “he is the One” (The Matrix).
To get VLC app to load all songs (including subfolders), go to Preferences ▸ Show All ▸ Playlist ▸ Subdirectory behavior ▸ Expand.
Switching from PhotoShop to Affinity Photo is one of the most liberating work-related things I've done in 20 years.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.