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
Why Aural rendering of documents is necessary
Aural rendering of documents is a technique that converts visual content into audio format, primarily designed to assist visually impaired users. CSS provides aural properties to control how documents are presented through speech synthesizers and audio devices.
Why Aural Rendering is Necessary
Aural rendering serves various important purposes beyond accessibility −
- Learning to read: Helps children and adults learn pronunciation and reading skills
- Training: Enables hands-free learning in educational and professional contexts
- Web access in vehicles: Allows safe browsing while driving
- Home entertainment: Provides audio content consumption for multitasking
- Industrial documentation: Enables workers to access manuals while working
- Medical documentation: Assists healthcare professionals in hands-free information access
Aural CSS Properties
CSS provides several properties for controlling aural presentation. The canvas in aural rendering consists of a three-dimensional physical space (sound surrounds) and a temporal space (sounds can be specified before, during, and after other sounds).
Example: Basic Aural CSS
<!DOCTYPE html>
<html>
<head>
<style>
@media aural {
h1 {
voice-family: male;
stress: 50;
richness: 80;
}
p {
voice-family: female;
speak: normal;
pause-before: 2s;
}
.highlight {
volume: loud;
pitch: high;
}
}
</style>
</head>
<body>
<h1>Welcome to Our Website</h1>
<p>This paragraph will be read with a female voice after a 2-second pause.</p>
<p class="highlight">This important text will be read louder and with higher pitch.</p>
</body>
</html>
When accessed through a screen reader or aural browser: - Heading reads with male voice, moderate stress and rich tone - Paragraphs read with female voice after 2-second pause - Highlighted text reads louder with higher pitch
Common Aural Properties
| Property | Description | Example Values |
|---|---|---|
voice-family |
Specifies voice type | male, female, child |
volume |
Controls loudness | silent, soft, medium, loud |
speak |
Controls speech output | normal, none, spell-out |
pause-before |
Pause before element | 2s, 500ms |
pitch |
Voice pitch level | low, medium, high, 200Hz |
Conclusion
Aural rendering is essential for web accessibility and provides benefits beyond visual impairment support. CSS aural properties enable developers to create rich audio experiences that make content accessible to diverse user needs and usage scenarios.
216 Views
