CSS Tutorial

CSS Reference Aural

Last modified on: November 6, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8"><strong>CSS Aural Properties</strong> were part of the <strong>CSS2 specification</strong> to control the presentation of content for <strong>screen readers</strong> and other <strong>auditory devices</strong>. These properties allowed designers to customize audio cues, tone, and other auditory aspects for visually impaired users. However, they were mostly experimental and never widely adopted, and are not supported in modern CSS specifications.</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="1002b9a0-ba23-4688-a869-a174eb2c0ec5" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>In current web development, accessibility for screen readers and other assistive technologies is achieved using <strong>ARIA attributes</strong> and <strong>semantic HTML</strong>, rather than aural-specific CSS.</p>
<p>Here&rsquo;s a breakdown of some of the key aural properties proposed in CSS2, although they&rsquo;re no longer in practical use.</p>
<hr />
<h3>Key CSS Aural Properties (CSS2)</h3>
<ol>
<li>
<p><strong><code>azimuth</code></strong></p>
<ul>
<li>Controls the direction of the sound (left, right, behind, etc.).</li>
<li>Values: <code>left-side</code>, <code>far-left</code>, <code>left</code>, <code>center</code>, <code>right</code>, <code>far-right</code>, <code>right-side</code>, <code>behind</code></li>
</ul>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Example (not supported) */
.aural-content {
    azimuth: left;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong><code>elevation</code></strong></p>
<ul>
<li>Controls the vertical positioning of sound (above or below).</li>
<li>Values: <code>below</code>, <code>level</code>, <code>above</code>, or a degree value (e.g., <code>15deg</code>).</li>
</ul>
</li>
<li>
<p><strong><code>cue-before</code> / <code>cue-after</code></strong></p>
<ul>
<li>Adds a sound cue before or after reading the content.</li>
<li>Values: <code>url(soundfile.wav)</code> or <code>none</code>.</li>
</ul>
</li>
<li>
<p><strong><code>pause-before</code> / <code>pause-after</code></strong></p>
<ul>
<li>Adds pauses before or after the element is read.</li>
<li>Values: Time values (e.g., <code>250ms</code>).</li>
</ul>
</li>
<li>
<p><strong><code>pitch</code> / <code>pitch-range</code></strong></p>
<ul>
<li>Controls the voice pitch.</li>
<li>Values: <code>x-low</code>, <code>low</code>, <code>medium</code>, <code>high</code>, <code>x-high</code>.</li>
</ul>
</li>
<li>
<p><strong><code>speech-rate</code></strong></p>
<ul>
<li>Determines the speed at which the content is read.</li>
<li>Values: <code>x-slow</code>, <code>slow</code>, <code>medium</code>, <code>fast</code>, <code>x-fast</code>, or numerical values.</li>
</ul>
</li>
<li>
<p><strong><code>voice-family</code></strong></p>
<ul>
<li>Specifies the type of voice (like <code>font-family</code> but for voice).</li>
<li>Values: Named voices or generic voice families.</li>
</ul>
</li>
<li>
<p><strong><code>volume</code></strong></p>
<ul>
<li>Controls the volume of the speech.</li>
<li>Values: <code>silent</code>, <code>x-soft</code>, <code>soft</code>, <code>medium</code>, <code>loud</code>, <code>x-loud</code>, or numerical values.</li>
</ul>
</li>
</ol>
<hr />
<h3>Example (Hypothetical)</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Not supported but illustrates CSS Aural properties */
.aural-content {
    azimuth: right;
    elevation: above;
    cue-before: url("ding.wav");
    pause-before: 200ms;
    pitch: high;
    speech-rate: fast;
    volume: medium;
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Modern Accessibility Alternatives</h3>
<p>Since CSS aural properties are not used in practice, focus on:</p>
<ul>
<li><strong>Semantic HTML</strong>: Using tags like <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;footer&gt;</code> helps screen readers understand page structure.</li>
<li><strong>ARIA Attributes</strong>: Use ARIA roles and attributes (<code>role="button"</code>, <code>aria-label</code>, <code>aria-labelledby</code>, etc.) to provide additional context.</li>
<li><strong>Accessible CSS</strong>: Use CSS for layout and visual styling, but ensure content order in the HTML is logical for screen readers.</li>
</ul>
<hr />
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More

CSS Reference Aural

Learn Ansible

Learn HTML

Learn Angular 3

Learn PHP

Learn Angular 2.0

Learn Python

Learn C# Sharp

Learn CSS

Learn Node Js

Learn JQuery Framework

Learn SQL Tutorial

Learn MySql

Learn PHP 7.1

Learn Angular 3

Learn Angular 2

Learn HTML5

Learn Angular 2

Learn Angular 3.0

Learn Bootstrap 3

Learn Bootstrap 4

Learn Bootstrap 5

Learn JQuery Tutorials