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 cue-after Property
The CSS cue-after property specifies a sound to be played after speaking an element's content in speech synthesis. This property is part of CSS Speech Module and is used by screen readers and other assistive technologies to provide audio cues that help separate content elements.
Syntax
selector {
cue-after: value;
}
Possible Values
| Value | Description |
|---|---|
url() |
Specifies the URL of a sound file to be played |
none |
No sound will be played (default value) |
Example
The following example demonstrates how to add audio cues after different elements −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
cue-after: url("/audio/pop.wav");
color: #333;
}
a {
cue-after: url("/audio/dong.wav");
color: blue;
text-decoration: underline;
}
p {
cue-after: none;
}
</style>
</head>
<body>
<h1>Welcome to Our Website</h1>
<p>This paragraph has no audio cue after it.</p>
<a href="/home">Home Page Link</a>
</body>
</html>
When rendered by a screen reader or speech synthesis software: - After reading "Welcome to Our Website", a "pop.wav" sound plays - After reading "Home Page Link", a "dong.wav" sound plays - The paragraph text has no audio cue after it
Browser Support
The cue-after property has limited browser support and is primarily implemented in specialized screen readers and speech synthesis software rather than standard web browsers.
Conclusion
The cue-after property enhances accessibility by providing audio cues after content elements. While browser support is limited, it's valuable for creating more accessible web experiences with assistive technologies.
91 Views
