Is it feasible to implement aural style sheets on specific elements?

After searching online, I found some code snippets that I tried running on Firefox4 and Safari. However, I'm not hearing any sound. How can I resolve this issue?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@media aural {
h1, h2, h3, 
h4, h5, h6    { voice-family: paul, male; stress: 20; richness: 90 }
h1            { pitch: x-low; pitch-range: 90 }
h2            { pitch: x-low; pitch-range: 80 }
h3            { pitch: low; pitch-range: 70 }
h4            { pitch: medium; pitch-range: 60 }
h5            { pitch: medium; pitch-range: 50 }
h6            { pitch: medium; pitch-range: 40 }
li, dt, dd    { pitch: medium; richness: 60 }
 dt            { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
em            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
strong        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
dfn           { pitch: high; pitch-range: 60; stress: 60 }
s, strike     { richness: 0 }
i             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
b             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
u             { richness: 0 }
 a:link        { voice-family: harry, male }
 a:visited     { voice-family: betty, female }
a:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}
</style>
</head>

<body>
<p id="a" class="heidi">Testing</p>
 <p id="b" class="peter">Testingb</p>
 <h2>Heading2</h2>
</body>
<html>

Answer №1

Aural style sheets serve the purpose of being read by screen readers, indicated by the aural media type at the beginning of the style sheet. They are not intended for browsers to visually render content, which is why they remain silent in your browser.

These style sheets are designed as accessibility aids for individuals with visual impairments who rely on auditory cues rather than visual elements when navigating websites.

You can find information about aural style sheets in the CSS2.1 specification, but note that they have since been replaced by the CSS3 Speech Module. The level of support for these specifications remains uncertain, as many screen readers currently focus on reading what a browser displays rather than specific style sheet instructions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Compiled in HTML with real-time preview on Firefox instead of Google Chrome

Are there any compilers that support live preview of my HTML and CSS in Firefox? Brackets only offers this feature for Google Chrome. ...

Is it possible to alter the location of a button through a click event

On the left side of the container, there is a button with the text "Go Right!". When clicked in this position, the button moves to the right side of the container. When the button is on the right side, the text changes to "Go Left!" and clicking it will m ...

What are the best Illustrator settings for exporting SVGs for the web?

Seeking to implement a responsive SVG logo on a website that looks great across all devices is my current goal. Considering the issues surrounding SVG usage, I aim to ensure broad device and browser support while also prioritizing loading speed. How do Ad ...

What is the best way to use Jquery to enclose a portion of a paragraph text within a

How can I wrap the content inside a span that comes after another span, inside a paragraph and a new span? To further illustrate this, consider the following example: <p>foo <span>bar</span> baz</p> The desired outcome is: <p& ...

Leveraging Firebase for data storage in creating XML files

According to my understanding of the firebase documentation, data that is inputted is converted into JSON format. The easiest way to connect to firebase is through the use of javascript. However, is it feasible to utilize the JSON data in firebase to gen ...

Align items vertically within Bootstrap columns

Looking for a quick solution. Refer to the image below, where I am struggling to align the toggle switch horizontally alongside the bootstrap buttons. My suspicion is that it may be related to the CSS of this customized toggle switch. Despite trying variou ...

W3C does not provide validation for the Viewport

Why is W3C not validating my viewport meta tag? <title>DIDIx13</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <!-- I'm getting a warning "Consider ...

The alignment of the label button within the form-group is being set to the top

While using Bootstrap 4, I encountered an issue with aligning the save button in a form group because there was no label at the same level. Despite trying to follow an example from here, I still had to hard code margin-top to prevent the button from bein ...

Retrieve the checkbox value and assign it to an object in the $scope of an Angular

As a newcomer to angularjs, I've been struggling with this code snippet for the past two days. My goal is to retrieve values from selected checkboxes within my angular js controller. I have experimented with both ng-true-value and ng-false-value, bu ...

The ValueError message indicated that the data provided contained 282 columns, while only 60 columns were expected

I encountered the following error message: ValueError: 60 columns passed, passed data had 282 columns. How can I resolve this issue? You can find more information on the problem by visiting the following page: . Once you are on that page, click on Q1 and ...

Forward users according to "?ref=XXX" at the end of the URL

I've been searching high and low without success for JavaScript code that can handle the following situation: When visitors arrive at http://example.com, I don't want any action to be taken. However, if they enter through a URL like http://exam ...

Dynamic HTML element

I created an input number field and I want to dynamically display the value of this field in a container without having to refresh the page. I am currently using ajax for this purpose, but unfortunately, I still need to reload the page. HTML: < ...

What is the solution for resolving a 404 (Not Found) error when using Jquery ajax url?

Having trouble with the data.php URL showing a 404 (Not Found) error. The files are in the same folder, but I am still encountering this issue when using SublimeText with Browser Sync live server. Any assistance on resolving this problem would be greatly a ...

Eliminate :hover effects from the :after elements' content

I am trying to eliminate the hover effect from the content inserted using the css selector :after. Below is my code where I want to remove the underline hover effect from > HTML <ul class="path_string_ul"> <li>Home</li> <l ...

Hop over to another page within the same blog on Blogger with a smooth scrolling feature and automatic redirection

I am looking to enhance my blog by implementing a feature where if someone clicks on a specific link, they will jump scroll to a designated point on the same page. After a few seconds, I want them to be automatically redirected to another page within the s ...

How can CSS be instructed to "apply the following most specific rule in order to determine this property"?

Utilizing Material-UI and JSS for CSS management, I've encountered an issue where styles appear differently in development versus production. The discrepancy stems from the order of rules within the file. For instance, when defining an element like ...

Black screen issue with JW Player on iPad

I am currently using the JW Player to embed my videos and facing an issue with them not playing on iPads or iPhones. It seems like a problem with the HTML5 video tag as the screen remains black when trying to play the videos. Below is the code snippet for ...

Tips for arranging a checkbox and an icon in vuetify

I'm looking for a layout with checkboxes and remove icons: + |‾‾‾‾‾‾| - |______| Here's my current attempt: <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300, ...

Creating a rotating wheel using JavaScript that is activated by a key press event

I need some help with implementing a keystroke event in this code so that the spinning wheel can start based on a key press, like the spacebar. Any suggestions on how to achieve this? I have found an event code for keystrokes in JavaScript: document.body. ...

Is it true that setting the background size to cover does not actually stretch the image?

Hi, I seem to be having trouble stretching an image using the background-size property. Despite setting it to cover, one or two sides of the image are always getting cropped. What I really want is a way to distort the image so that it stretches to fit any ...