Skip to content
View in the app

A better way to browse. Learn more.

OKCCN - XenForo & IPS Plugin Marketplace

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.
  • Language

CSS Aural Reference

Featured Replies

  • Administrators

CSS Aural Reference


Aural Style Sheets

Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information.

Aural presentation can be used:

  • by blind people
  • to help users learning to read
  • to help users who have reading problems
  • for home entertainment
  • in the car
  • by print-impaired communities

The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen).

An example of an Aural style sheet:

@media aural {
  h1, h2, h3, h4 {
    voice-family: male;
    richness: 80;
    cue-before: url("beep.au")
  }
}

The example above will make the speech synthesizer play a sound, then speak the headers in a very rich male voice.

Note: The aural CSS media type is deprecated.



CSS Aural Reference

Property Description Values
azimuth Sets where the sound should come from angle
left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
behind
leftwards
rightwards
cue Sets the cue properties in one declaration cue-before
cue-after
cue-after Specifies a sound to be played after speaking an element's content none
url
cue-before Specifies a sound to be played before speaking an element's content none
url
elevation Sets where the sound should come from angle
below
level
above
higher
lower
pause Sets the pause properties in one declaration pause-before
pause-after
pause-after Specifies a pause after speaking an element's content time
%
pause-before Specifies a pause before speaking an element's content time
%
pitch Specifies the speaking voice frequency
x-low
low
medium
high
x-high
pitch-range Specifies the variation in the speaking voice. (Monotone voice or animated voice?) number
play-during Specifies a sound to be played while speaking an element's content auto
none
url
mix
repeat
richness Specifies the richness of the speaking voice. (Rich voice or thin voice?) number
speak Specifies whether content will render aurally normal
none
spell-out
speak-header Specifies how to handle table headers. Should the headers be spoken before every cell, or only before a cell with a different header than the previous cell always
once
speak-numeral Specifies how to speak numbers digits
continuous
speak-punctuation Specifies how to speak punctuation characters none
code
speech-rate Specifies the speed of the speaking number
x-slow
slow
medium
fast
x-fast
faster
slower
stress Specifies the "stress" in the speaking voice number
voice-family Specifies the voice family of the speaking specific-voice
generic-voice
volume Specifies the volume of the speaking number
%
silent
x-soft
soft
medium
loud
x-loud

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.