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
Selected Reading
CSS voice-stress Speech Media property
The CSS voice-stress property controls the level of stress or emphasis applied to spoken text in speech synthesis. This property adjusts characteristics like pitch variation and intensity to convey different levels of emphasis when content is read aloud by screen readers or text-to-speech software.
Syntax
selector {
voice-stress: value;
}
Possible Values
| Value | Description |
|---|---|
normal |
Default stress level with natural emphasis |
strong |
High stress with increased pitch variation and intensity |
moderate |
Medium stress level between normal and strong |
reduced |
Lower stress with minimal pitch variation |
none |
No stress applied, monotone speech |
Example: Strong Voice Stress
The following example applies strong emphasis to paragraph text −
<!DOCTYPE html>
<html>
<head>
<style>
.emphasized {
voice-stress: strong;
font-weight: bold;
color: #d32f2f;
}
.normal {
voice-stress: normal;
}
</style>
</head>
<body>
<p class="normal">This text has normal voice stress.</p>
<p class="emphasized">This text has strong voice stress for emphasis!</p>
</body>
</html>
Two paragraphs appear - the first with normal text, and the second in bold red text. When read by screen readers, the second paragraph will be spoken with strong emphasis and increased pitch variation.
Example: Multiple Stress Levels
This example demonstrates different stress levels applied to various elements −
<!DOCTYPE html>
<html>
<head>
<style>
.no-stress { voice-stress: none; }
.reduced-stress { voice-stress: reduced; }
.moderate-stress { voice-stress: moderate; }
.strong-stress { voice-stress: strong; }
div {
margin: 10px 0;
padding: 10px;
border-left: 4px solid #2196F3;
}
</style>
</head>
<body>
<div class="no-stress">No stress: Monotone speech</div>
<div class="reduced-stress">Reduced stress: Minimal emphasis</div>
<div class="moderate-stress">Moderate stress: Medium emphasis</div>
<div class="strong-stress">Strong stress: High emphasis!</div>
</body>
</html>
Four div elements with blue left borders appear, each demonstrating different voice stress levels. Screen readers will pronounce each with varying degrees of emphasis according to their voice-stress values.
Conclusion
The voice-stress property enhances accessibility by controlling speech emphasis in text-to-speech applications. Use strong for important announcements and reduced or none for less critical content.
Updated on: 2026-03-15T13:33:03+05:30
203 Views
Advertisements