Zweiter Blick: Sonderzeichen im HTML Code

BarrierefreiheitDarstellungsoptionen



Sonderzeichen

Arten von Sonderzeichen

Im HTML-Code können Buchstaben, Ziffern und Satzzeichen normalerweise Eins zu Eins auf der Tastatur erstellt werden. Darüber hinaus können mathematische Symbole, fremdsprachige Sonderbuchstaben, Emoticons und antere Symbole als einzelne Zeichen dargestellt werden. Sie werden aber als Sonderzeichen nicht mit einem einzelnen Zeichen codiert, sondern benötigen einen eigenen Zeichencode.

Der Code für ein Sonderzeichen beginnt mit einem kaufmännishen UND (&) und endet mit einem Strichpunkt. Dazwischen befindet sich eine Ziffer oder eine möglichst aussagekräftige Buchstabenfolge.

Screen Reader und Sonderzeichen

Screen Reader Unterstützung für Sonderzeichen

Moderne Screen Reader sollten Sonderzeichen richtig interpretieren. So liefert JAWS für die Zeichen in der Tabelle unten jeweils eine sinnvolle Beschreibung. Das Symbol ☂ wird beispielsweise als Regenschirm erkannt.

Codierung von Sonderzeichen

Sonderzeichen werden gelegentlich auch auf Grund ihrer visuellen Erscheinung etwa zum Kennzeichnen von Schaltern verwendet. Das Zeichen ► (►) kann etwa in einem Videoplayer für den schalter zum Abspielen verwendet werden.

Damit auch für den Screen Reader die Funktion des Zeichens verständlich ist, müssen technische Vorkehrungen getroffen werden. Dies kann etwa folgendermaßen aussehen:

<button
  aria-label="Play"
  title="Abspielen">
  <span aria-hidden="true" >►</span>
</button>

Erläuterungen zum Codebeispiel

  • Mit aria-label="Play" wird für den Screen Reader die Funktion des Schalters wiedergegeben.
  • Mit title="Abspielen" wird eine verständliche Beschreibung für das Symbol allgemein angeboten.
  • Mit aria-hidden="true" wird der für den Screen Reader unverständliche Teil für den Screen Reader verborgen, weil er die Info über die Bedeutung ohnedies schon hat.

Beispiele für Sonderzeichen

Anzeige Code Erläuterungen
  &nbsp; Geschütztes Leerzeichen
& &amp; Kaufmännisches UND
Da dieses Zeichen den Code für ein Sonderzeichen einleiten kann, muss es oft selbst im HTML-Code auf diese Weise codiert werden.

&#9658; &#9654; Nach rechts zeigendes gefülltes Dreieck
Geeignet etwa als PLAY-Button
&#9724; Gefülltes Rechteck
Geeignet etwa als STOP-Button



&#9611;
&#9613;
&#9614;
Hochgestelltes schmales Rechteck
Verdoppelt verwendet geeignet etwa als PAUSE-Button



&#9679;
&#9900;
&#8226;
&#9900;
Kleiner Kreis
Geeignet etwa als Indikator in einem Slider
&#919e; Zwei nach links zeigende Dreiecke
Geeignet etwa als Indikator für schnellen Rücklauf
&#9193; Zwei nach rechts zeigende Dreiecke
Geeignet etwa als Indikator für schnellen Vorlauf
± &#177; Plus-Minus Zeichen
&#9728; Sonne
&#9730; Regenschirm
« &laquo; Doppelte spitze Klammer zu
&bull; Dicker Punkt
&#9986; Schere
&phone; Telefon
&#10003; Haken (abgehakt)
&#10006; Dickes X (Geeignet etwa für Fehlerhinweise)
&#9775; Yin Yang
× &times; Multiplikationszeichen
÷ &divide; Divisionszeichen
&nabla;
&#8711;
Dreieck spitz nach unten
&isin; Element-Zeichen
&sum; Summe-Zeichen (Sigma)
&lowast; Stern
&or; OR (ODER) - Zeichen
(spitzer Winkel nach unten)
&and; AND (UND) -Zeichen
(spitzer Winkel nach oben)
&asymp; entspricht -Zeichen
&ne; Ungleich-Zeichen
&darr; Pfeil nach unten (Down-Arrow)
&rarr; Pfeil nach rechts (Right Arrow)