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 speech-rate property
The CSS speech-rate property controls the speed at which content is spoken by screen readers and other speech synthesis applications. This property is part of the CSS Speech Module and helps create more accessible web content.
Syntax
selector {
speech-rate: value;
}
Possible Values
| Value | Description |
|---|---|
number |
Specifies the speaking rate in words per minute |
x-slow |
Same as 80 words per minute |
slow |
Same as 120 words per minute |
medium |
Same as 180-200 words per minute (default) |
fast |
Same as 300 words per minute |
x-fast |
Same as 500 words per minute |
faster |
Adds 40 words per minute to the current speech rate |
slower |
Subtracts 40 words per minute from the current speech rate |
Example: Using Keyword Values
The following example demonstrates different speech rate settings using keyword values ?
<!DOCTYPE html>
<html>
<head>
<style>
.slow-speech {
speech-rate: slow;
padding: 10px;
background-color: #f0f8ff;
margin: 10px 0;
}
.fast-speech {
speech-rate: fast;
padding: 10px;
background-color: #ffe4e1;
margin: 10px 0;
}
.normal-speech {
speech-rate: medium;
padding: 10px;
background-color: #f0fff0;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="slow-speech">This text will be spoken slowly by screen readers.</div>
<div class="normal-speech">This text will be spoken at normal speed.</div>
<div class="fast-speech">This text will be spoken quickly by screen readers.</div>
</body>
</html>
Three colored boxes appear with different background colors. When accessed by screen readers, each text block will be spoken at different rates: slow (120 wpm), medium (180-200 wpm), and fast (300 wpm).
Example: Using Numeric Values
You can also specify exact speaking rates using numeric values ?
<!DOCTYPE html>
<html>
<head>
<style>
.custom-rate {
speech-rate: 250;
padding: 15px;
background-color: #fff8dc;
border-left: 4px solid #ffa500;
}
</style>
</head>
<body>
<div class="custom-rate">This text will be spoken at 250 words per minute.</div>
</body>
</html>
A light cream-colored box with an orange left border appears. Screen readers will speak this text at exactly 250 words per minute.
Note: The speech-rate property requires screen reader software or speech synthesis tools to test properly. Modern browsers support this property, but the effect is only noticeable when using assistive technologies.
Conclusion
The speech-rate property enhances web accessibility by allowing control over speech synthesis speed. Use keyword values for standard rates or numeric values for precise control over speaking speed.
Updated on: 2026-03-15T11:49:44+05:30
119 Views
Advertisements