Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Aural Media CSS Properties
Aural CSS properties control how content is presented through speech synthesis for screen readers and assistive technologies. These properties are primarily used to improve accessibility for visually impaired users by defining spatial audio positioning, timing, voice characteristics, and sound effects.
Syntax
selector {
property-name: value;
}
Spatial Positioning Properties
Azimuth Property
The azimuth property sets the horizontal position from where the sound should come −
<!DOCTYPE html>
<html>
<head>
<style>
.left-audio {
azimuth: left;
}
.right-audio {
azimuth: right;
}
.center-audio {
azimuth: center;
}
</style>
</head>
<body>
<p class="left-audio">This text will be spoken from the left.</p>
<p class="right-audio">This text will be spoken from the right.</p>
<p class="center-audio">This text will be spoken from the center.</p>
</body>
</html>
Elevation Property
The elevation property sets the vertical position for sound placement −
<!DOCTYPE html>
<html>
<head>
<style>
.above {
elevation: above;
}
.below {
elevation: below;
}
</style>
</head>
<body>
<p class="above">This text sounds from above.</p>
<p class="below">This text sounds from below.</p>
</body>
</html>
Voice Control Properties
Speech Rate and Pitch
Control the speed and tone of speech synthesis −
<!DOCTYPE html>
<html>
<head>
<style>
.slow-speech {
speech-rate: slow;
pitch: low;
}
.fast-speech {
speech-rate: fast;
pitch: high;
}
</style>
</head>
<body>
<p class="slow-speech">This text is spoken slowly with low pitch.</p>
<p class="fast-speech">This text is spoken quickly with high pitch.</p>
</body>
</html>
Pause and Timing Properties
The pause-before, pause-after, and shorthand pause properties control timing −
<!DOCTYPE html>
<html>
<head>
<style>
.with-pauses {
pause-before: 2s;
pause-after: 1s;
}
.short-pause {
pause: 0.5s;
}
</style>
</head>
<body>
<p class="with-pauses">Text with custom pause timing.</p>
<p class="short-pause">Text with uniform short pauses.</p>
</body>
</html>
Complete Aural Properties List
| Property | Description |
|---|---|
azimuth |
Sets horizontal sound position |
elevation |
Sets vertical sound position |
cue-before/cue-after |
Sound effects before/after content |
pause-before/pause-after |
Timing pauses before/after content |
pitch |
Average voice frequency |
speech-rate |
Speaking speed |
voice-family |
Voice type selection |
volume |
Speech volume level |
Conclusion
Aural CSS properties enhance accessibility by providing fine-grained control over speech synthesis. While browser support is limited, these properties help create better experiences for screen reader users and assistive technologies.
106 Views
