Zweiter Blick: Sonderzeichen im HTML Code
Informationen


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="Start"
  title="Start">
  <span aria-hidden="true">►</span>
</button>

Erläuterungen zum Codebeispiel

Beispiele für Sonderzeichen

Allgemein

Anzeige Code Erläuterungen
  &nbsp; Geschütztes Leerzeichen



&#9611;
&#9613;
&#9614;
Hochgestelltes schmales Rechteck
Verdoppelt verwendet geeignet etwa als PAUSE-Button
« &laquo; Doppelte spitze Klammer zu
&bull; Dicker Punkt
&#9986; Schere
&#9775; Yin Yang
🍀 &#127808; Vierblättriges Kleeblatt
💬 &#128172; Sprechblase

Essen und Trinken

Anzeige Code Erläuterungen
🍴 &#127860; Messer und Gabel
🍉 &#127817; Wassermelone
🍟 &#127839; Pommes frites
🍺 &#127866; Bierkrug

Geografie und Karten

Anzeige Code Erläuterungen



&#9679;
&#9900;
&#8226;
&#9900;
Kleiner Kreis
Geeignet etwa als Indikator in einem Slider
&#9678; Bullauge
&#9724; Gefülltes Rechteck
Geeignet etwa als STOP-Button
&lowast; Stern
🌍 &#127757; Erde zentriert auf Afrika
&#10061; Schattierter Kreis
&#9968; Berg
&#9969; Strand
🔱 &#128305; Dreizack
🌲 &#127794; Immergrüne Pflanze
🏔 &#127956; Schneebedeckter Berg
🏖 &#127958; Strand mit Sonnenschirm
🏛 &#127963; Klassisches Gebäude (Archäologischer Platz)
🏝 &#127965; Einsame Insel

IT

Anzeige Code Erläuterungen
& &amp; Kaufmännisches UND
Da dieses Zeichen den Code für ein Sonderzeichen einleiten kann, muss es oft selbst im HTML-Code in dieser Weise codiert werden.
🗹 &#128505;; Fettes Häckchen
&phone; Telefon

&#9658; &#9654; Nach rechts zeigendes gefülltes Dreieck
Geeignet etwa als PLAY-Button
&#9193; Zwei nach rechts zeigende Dreiecke
Geeignet etwa als Indikator für schnellen Vorlauf
&#919e; Zwei nach links zeigende Dreiecke
Geeignet etwa als Indikator für schnellen Rücklauf
💻 &#128187; Laptop
📱 &#128241; Handy (Mobiltelefon)
🔧 &#128295; Schraubenschlüssel
🖥 &#128421; PC Desktop Computer
🖮 &#128430; Tastatur mit Kabel
🗚 &#128474; Schriftgröße erhöhen
🗛 &#128475; Schriftgröße verringern

Mathematik

Anzeige Code Erläuterungen
&#10003; Haken (abgehakt)
&#10006; Dickes X (Geeignet etwa für Fehlerhinweise)
× &times; Multiplikationszeichen
÷ &divide; Divisionszeichen
&ratio;
&#8758;
Verhältniszeichen
± &#177; Plus-Minus Zeichen
&isin; Element-Zeichen
&sum; Summe-Zeichen (Sigma)
&or; Logisches ODER - Zeichen
(spitzer Winkel nach unten)
&and; Logisches UND-Zeichen
(spitzer Winkel nach oben)
&asymp; fast gleich
&#8773; &#8793; ungefähr gleich
&ne; Ungleich-Zeichen

Musik

Anzeige Code Erläuterungen
🎜 &#127900; Fliegende aufsteigende Noten
🎹 &#127929; Klavier
🎻 &#127931; Violine (Geige)

Optik

Anzeige Code Erläuterungen
👁 &#128065; Auge
👓 &#128083; Brille
🔍
🔎
&#128269;
&#128270;
Lupe

Pfeile und Richtungen

Anzeige Code Erläuterungen
&darr; Pfeil nach unten (Down-Arrow)
&rarr; Pfeil nach rechts (Right Arrow)
&nabla;
&#8711;
Dreieck spitz nach unten

Tiere

Anzeige Code Erläuterungen
🐐 &#128016; Ziege
🐢 &#128034; Schildkröte
🐬 &#128044; Delphin

Wetter

Anzeige Code Erläuterungen
&#9728; Sonne
&#9730; Regenschirm
🌪 &#127786; Wolke mit Tornado
🌈 &#127752; Regenbogen