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 cue-before Property
The CSS cue-before property specifies a sound to be played before speaking an element's content in speech synthesis applications. This property is primarily used for audio cues in screen readers and voice browsers.
Syntax
selector {
cue-before: value;
}
Possible Values
| Value | Description |
|---|---|
url() |
Specifies the URL of a sound file to be played |
none |
No sound is played (default value) |
Example
The following example demonstrates how to use the cue-before property to add audio cues −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
cue-before: url("/sounds/heading-bell.wav");
color: #2c3e50;
font-family: Arial, sans-serif;
}
.important {
cue-before: url("/sounds/notification.mp3");
color: #e74c3c;
font-weight: bold;
}
.no-cue {
cue-before: none;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p class="important">This is an important announcement.</p>
<p class="no-cue">This paragraph has no audio cue.</p>
</body>
</html>
When accessed by a screen reader or speech synthesizer, a bell sound will play before reading the heading, and a notification sound before the important paragraph. The regular paragraph will have no audio cue.
Browser Support
The cue-before property has limited browser support and is primarily implemented in specialized assistive technologies and speech synthesis systems rather than standard web browsers.
Conclusion
The cue-before property enhances accessibility by providing audio cues before spoken content. While browser support is limited, it remains useful for creating more accessible web experiences with proper speech synthesis tools.
Updated on: 2026-03-15T11:48:58+05:30
86 Views
Advertisements