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 property
The CSS cue property is a shorthand for setting cue-before and cue-after properties. It allows you to specify audio cues that play before and after an element's content when using speech synthesis or screen readers.
Syntax
selector {
cue: cue-before cue-after;
/* or */
cue: single-value;
}
Possible Values
| Value | Description |
|---|---|
url() |
Specifies an audio file to play as a cue |
none |
No audio cue is played (default) |
inherit |
Inherits the value from parent element |
Example: Setting Audio Cues
The following example demonstrates how to set audio cues for heading elements −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
cue-before: url("/sounds/start.wav");
cue-after: url("/sounds/end.wav");
font-size: 24px;
color: #333;
}
h2 {
cue: url("/sounds/beep.wav");
font-size: 18px;
color: #666;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>This paragraph has no audio cues.</p>
<h2>Sub Heading</h2>
</body>
</html>
The headings display normally on screen. When using screen readers or speech synthesis, audio cues would play before and after the heading content.
Shorthand Equivalence
The following two CSS rules are equivalent −
/* Using individual properties */
h1 {
cue-before: url("/sounds/pop.wav");
cue-after: url("/sounds/pop.wav");
}
/* Using shorthand property */
h1 {
cue: url("/sounds/pop.wav");
}
Conclusion
The cue property enhances accessibility by providing audio feedback for screen reader users. It's particularly useful for creating audio landmarks in web content for visually impaired users.
Updated on: 2026-03-15T11:49:11+05:30
232 Views
Advertisements