What is CSS Aural?


The CSS we know formats the information delivered by HTML. This information can be anything for example: image, text, video, audio or any other element created, that is, CSS formats the information.

I found the term CSS AURAL that combines speech synthesis and sound effects, not information.

I would like to understand a little more about it, so I have doubts about the following aspects:

  • Can I say that it is a new Framework created from CSS?
  • Since the term is new (for me), could it explain where it is used and its purpose?
  • Is there a particular audience (end user) for which it is intended?
  • PS: If possible give examples of use:)

    asked by anonymous 09.02.2017 / 16:26

    2 answers


    The CSS that speaks.

    Although deprecated , Aural style sheets aim for a combination of speech synthesis and effects so that the user can hear the information instead of reading it.


    [...] where is it used and its purpose? Is there a particular audience (end user) for which it is intended?

    Help users with visual constraints.


    h1, h2 {
        voice-family: male;
        richness: 80;
        cue-before: url("som.wav")

    The above example will cause the speech synthesizer to reproduce the headers in a male bass voice using voice-family as male .

    See more details in W3


    PS: In the site of the Inclusive Accessibility has a post that makes a listing of some software for the visually impaired, if you have an interest, it's worth a read. Note: I do not know what technologies are used by each one to develop these software. Quiz insert here only for completeness.

    09.02.2017 / 16:42

    CSS Aural - Visual Accessibility Styles

    It is commonly used by blind, visually impaired, or blind people. It is used, for example, by Screen Readers , which is all software that translates sonarly (and synthesized) content, rather than displaying it.

    It is not a FRAMEWORK, but a CSS MODULE, designed for accessibility.

    I believe this already answers all aspects of the question and for examples, it follows:

    h1, h2, h3, h4, h5, h6
      voice-family: paul;
      voice-stress: moderate;
      cue-before: url(../audio/ping.wav);
      voice-volume: medium 6dB;
      voice-family: female;
      voice-balance: left;
      voice-pitch: high;
      voice-volume: -6dB;
      voice-family: male;
      voice-balance: right;
      voice-rate: fast;
      voice-volume: soft;
      pause-after: strong;
    <h1>I am Paul, and I speak headings.</h1>
    <p class="heidi">Hello, I am Heidi.</p>
    <p class="peter">
      <span class="special">Can you hear me ?</span>
      I am Peter.

    The navigation in a site, made without visual aid, is made through element-to-element jumps, so CSS Aural allows styling how the user will be read to the element in focus, changing between masculine / feminine, defining the volume and etc.

    Just by complementing the Testing / Screen Readers aspect, the DOSVOX is a Brazilian initiative and Open Source.

    W3 documentation on CSS Aural and Speech: SOURCE

    09.02.2017 / 16:39