Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Gastautor 10. September 2003

Aurales Webdesign mit CSS

Kein Beitragsbild

von Jan Winkler

Die Mehrheit aller Webworker setzt Cascading Style Sheets zur Textgestaltung oder zur Anordnung von Objekten ein. Aber CSS könnte noch viel mehr: nämlich Webseiten für Sprachbrowser attraktiv machen.

Sprachgestaltung

Ebenso wie normaler Text mittels Farbe, Schriftart oder -größe gestaltet werden kann, ist es mit CSS auch möglich, eben diesen Text für die Ausgabe in einem Sprach-Browser attraktiver zu machen. Dies kann beispielsweise durch unterschiedliche Stimmen bei einem Gesprächstext oder spezifischere Betonungsmechanismen bei einer Erzählung geschehen.

Gestaltung von Stimmen
Um die Lesestimme zu verändern (hohoho) stehen gleich mehrere CSS-Eigenschaften zur Verfügung. Hierzu zählen pitch (Stimmenlage), pitch-range (Stimmbereich), richness (Helligkeit), speech-rate (Sprechgeschwindigkeit), stress (Betonung) und voice-family (Klang). Um nun beispielsweise einen Gesprächstext für den Zuhörer akustisch etwas aufzupeppen, wäre es denkbar, mit diesen Eigenschaften zwei Charaktere zu erstellen. Ein Beispiel:

 <style>

.anton
 { voice-family:male; richness:75;
 pitch:low; speech-rate:slow;
}
      .monika
 { voice-family:female; richness:35;
 pitch:medium;
speech-rate:medium; }
      .betonung
 { stress:75; speak:spell-out;
}
 </style>
 ...
      <p>Es ist ein schöner
Tag: Die Vögel zwitschern
 und der Bach plätschert ruhig vor sich
hin ...</p>
 <p class="anton">Hallo Monika.</p>

<p class="monika">Hallo, wie gehts?</p>
 <p class="anton">Danke,
gut, ich komme gerade aus dem HTZUF.</p>
 <p class="monika">Woher
kommst du?</p>
 <p class="anton">Na, aus dem <span
class="betonung">HTZUF</span>.</p> ...

Wie im Beispiel gezeigt empfiehlt es sich manchmal, auch nur bestimmte Worte oder Wortgruppen mit eigenen Sprachdefinitionen zu versehen. Hier wird durch die speak-Eigenschaft beschrieben, dass bei Elementen der Klasse betonung alle Buchstaben einzeln ausgesprochen werden sollen. So wird erreicht, dass der so definierte Text, also extrem deutlich artikuliert wird, wodurch das Akronym erst richtig zur Geltung kommt.

Anzeige

Pausen
Neben verschiedenen Stimmen bieten sich auch Pausen oder verschiedene Geschwindigkeiten zur auralen Gestaltung von Texten an. Die Eigenschaften pause (Pausendefinition), pause-after (Pause nach dem Element), pause-before (Pause vor dem Element) und speech-rate (Sprechgeschwindigkeit) finden hier besonderen Anklang. Bei den drei pause-Eigenschaften sollte der Wert nicht zu hoch gewählt werden, da der Sprachfluss sonst unnötig gestört werden könnte. Pausen bieten sich auch bei Aufzählungen, Absätzen oder Überschriften an. Beispiel:

      H1
{ pause-before: 1500ms; pause-after: 1000ms; }
 P { pause-before: 500ms; pause-after:
500ms; }
 ACRONYM { pause:500ms; speak:spell-out; }

Effekte
Unter Umständen lohnt es sich auch, gewisse Effekte in den Text einzubauen. So könnte bei steigender Spannung die Sprechgeschwindigkeit (speech-rate) erhöht und bestimmte Wörter könnten akustisch mit Hintergrundmusik (play-during) hinterlegt werden, um die Aussagekraft zu verstärken (bumm, platsch, schepper, klirr …) oder der Klang kommt aus verschiedenen Richtungen (azimuth [horizontal] / elevation [vertikal]) um eine Distanz zwischen zwei Stimmen zu verdeutlichen. Viele weitere Möglichkeiten ergeben sich. Beispiel:

      <style>

.erzaehler
 { elevation: lower; }
      .anton
 { voice-family:male;
azimuth:left; }
      .monika
 { voice-family:female; azimuth:right-side;
}
      .wasser
 { play-during: url('wasser.wav') mix repeat;
}
 </style>
      ...
      <p class="erzaehler">Es
ist ein schöner Tag:
 Die Vögel zwitschern und <span class="wasser">der
Bach plätschert
 ruhig vor sich hin ...</span></p>
 <p
class="anton">Hallo Monika.</p>
 <p class="monika">Hallo,
wie gehts?</p> ...

Spezifische Sprache
Bei einigen Elementen – wie beispielsweise Tabellen – bietet es sich an, den normalen Textfluss durch CSS-Eigenschaften etwas abzuändern, damit der Zuhörer dem Kontext leichter folgen kann. Dazu gibt es speziell für Tabellen eine Eigenschaft die es erlaubt, das Lesen von Tabellen zu kontrollieren: Die speak-header-Eigenschaft. Sie beschreibt, wann und wie oft Tabellenüberschriften (besser gesagt Spaltenüberschriften) gelesen werden sollen. Die Werte once (einmalig) und always (jedes Mal) beschreiben dabei, ob die Überschrift vor jeder Zelle (jedes Mal) oder nur vor jeder Spalte (einmalig) vorgelesen werden sollen. Je nach Größe und Umfang der Tabelle ist die eine oder andere Variante zu empfehlen. Beispiel:

      <table>

<thead>
 <tr>
 <th id="LM">Ware</th><th>Preis</th><th>Anzahl</th>

</tr>
 </thead>
 <tr>
 <th headder="LM">Brot</th>

<td>2,50 EUR</td><td>1</td>
 </tr>
 <tr>

<th headder="LM">Milch</th>
 <td>1,40 EUR</td><td>3</td>

</tr>
 </table>

Mit der Definition

      TABLE {speak-header:always;}

Mit der Definition

      TABLE {speak-header:once;}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.