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
CSS speak property
The CSS speak property controls how text content is rendered by screen readers and other assistive technologies. It determines whether text should be spoken aloud and how it should be pronounced when read by speech synthesis software.
Syntax
selector {
speak: value;
}
Possible Values
| Value | Description |
|---|---|
none |
Suppresses aural rendering so that the element requires no time to render |
normal |
Uses language-dependent pronunciation rules for rendering an element and its children |
spell-out |
Spells the text one letter at a time |
Example: Different Speak Values
The following example demonstrates different values of the speak property −
<!DOCTYPE html>
<html>
<head>
<style>
.normal-speak {
speak: normal;
background-color: #e8f5e8;
padding: 10px;
margin: 10px;
border: 1px solid #4CAF50;
}
.spell-out {
speak: spell-out;
background-color: #fff3cd;
padding: 10px;
margin: 10px;
border: 1px solid #ffc107;
}
.no-speak {
speak: none;
background-color: #f8d7da;
padding: 10px;
margin: 10px;
border: 1px solid #dc3545;
}
</style>
</head>
<body>
<div class="normal-speak">This text uses normal speech rendering.</div>
<div class="spell-out">HELLO</div>
<div class="no-speak">This text will not be spoken by screen readers.</div>
</body>
</html>
Three colored boxes appear: - Green box: "This text uses normal speech rendering" (spoken normally) - Yellow box: "HELLO" (each letter spelled out: H-E-L-L-O) - Red box: "This text will not be spoken by screen readers" (silent to screen readers)
Key Points
Note the difference between an element whose volume property has a value of silent and an element whose speak property has the value none. The former takes up the same time as if it had been spoken, including any pause before and after the element, but no sound is generated. The latter requires no time and is not rendered.
Conclusion
The speak property is primarily used for accessibility purposes, controlling how assistive technologies handle text content. It's particularly useful for creating more accessible web content for visually impaired users.
113 Views
