Sonderzeichen
[Materialsammlung]
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
- Mit
aria-label="Start"wird für den Screen Reader die Funktion des Schalters wiedergegeben. - Mit
title="Start"wird für das Überstreichen mit der Maus ein Hinweis vergeben. - 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
Allgemein
| Anzeige | Code | Erläuterungen |
|---|---|---|
| | Geschütztes Leerzeichen | |
| ▋ ▍ ▎ |
▋ ▍ ▎ |
Hochgestelltes schmales Rechteck Verdoppelt verwendet geeignet etwa als PAUSE-Button |
| « | « | Doppelte spitze Klammer zu |
| • | • | Dicker Punkt |
| ✂ | ✂ | Schere |
| ☯ | ☯ | Yin Yang |
| 🍀 | 🍀 | Vierblättriges Kleeblatt |
| 💬 | 💬 | Sprechblase |
Essen und Trinken
| Anzeige | Code | Erläuterungen |
|---|---|---|
| 🍴 | 🍴 | Messer und Gabel |
| 🍉 | 🍉 | Wassermelone |
| 🍟 | 🍟 | Pommes frites |
| 🍺 | 🍺 | Bierkrug |
Geografie und Karten
| Anzeige | Code | Erläuterungen |
|---|---|---|
| ● ⚬ • ⚬ |
● ⚬ • ⚬ |
Kleiner Kreis Geeignet etwa als Indikator in einem Slider |
| ◎ | ◎ | Bullauge |
| ◼ | ◼ | Gefülltes Rechteck Geeignet etwa als STOP-Button |
| ∗ | ∗ | Stern |
| 🌍 | 🌍 | Erde zentriert auf Afrika |
| ❍ | ❍ | Schattierter Kreis |
| ⛰ | ⛰ | Berg |
| ⛱ | ⛱ | Strand |
| 🔱 | 🔱 | Dreizack |
| 🌲 | 🌲 | Immergrüne Pflanze |
| 🏔 | 🏔 | Schneebedeckter Berg |
| 🏖 | 🏖 | Strand mit Sonnenschirm |
| 🏛 | 🏛 | Klassisches Gebäude (Archäologischer Platz) |
| 🏝 | 🏝 | Einsame Insel |
IT
| Anzeige | Code | Erläuterungen |
|---|---|---|
| & | & | 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. |
| 🗹 | 🗹; | Fettes Häckchen |
| ☎ | ☎ | Telefon |
| ► ▶ |
► ▶ | Nach rechts zeigendes gefülltes Dreieck Geeignet etwa als PLAY-Button |
| ⏩ | ⏩ | Zwei nach rechts zeigende Dreiecke Geeignet etwa als Indikator für schnellen Vorlauf |
| ⏪ | Ηe; | Zwei nach links zeigende Dreiecke Geeignet etwa als Indikator für schnellen Rücklauf |
| 💻 | 💻 | Laptop |
| 📱 | 📱 | Handy (Mobiltelefon) |
| 🔧 | 🔧 | Schraubenschlüssel |
| 🖥 | 🖥 | PC Desktop Computer |
| 🖮 | 🖮 | Tastatur mit Kabel |
| 🗚 | 🗚 | Schriftgröße erhöhen |
| 🗛 | 🗛 | Schriftgröße verringern |
Mathematik
| Anzeige | Code | Erläuterungen |
|---|---|---|
| ✓ | ✓ | Haken (abgehakt) |
| ✖ | ✖ | Dickes X (Geeignet etwa für Fehlerhinweise) |
| × | × | Multiplikationszeichen |
| ÷ | ÷ | Divisionszeichen |
| ∶ | ∶ ∶ |
Verhältniszeichen |
| ± | ± | Plus-Minus Zeichen |
| ∈ | ∈ | Element-Zeichen |
| ∑ | ∑ | Summe-Zeichen (Sigma) |
| ∨ | ∨ | Logisches ODER - Zeichen (spitzer Winkel nach unten) |
| ∧ | ∧ | Logisches UND-Zeichen (spitzer Winkel nach oben) |
| ≈ | ≈ | fast gleich |
| ≅ | ≅ ≙ | ungefähr gleich |
| ≠ | ≠ | Ungleich-Zeichen |
Musik
| Anzeige | Code | Erläuterungen |
|---|---|---|
| 🎜 | 🎜 | Fliegende aufsteigende Noten |
| 🎹 | 🎹 | Klavier |
| 🎻 | 🎻 | Violine (Geige) |
Optik
| Anzeige | Code | Erläuterungen |
|---|---|---|
| 👁 | 👁 | Auge |
| 👓 | 👓 | Brille |
| 🔍 🔎 |
🔍 🔎 |
Lupe |
Pfeile und Richtungen
| Anzeige | Code | Erläuterungen |
|---|---|---|
| ↓ | ↓ | Pfeil nach unten (Down-Arrow) |
| → | → | Pfeil nach rechts (Right Arrow) |
| ∇ | ∇ ∇ |
Dreieck spitz nach unten |
Tiere
| Anzeige | Code | Erläuterungen |
|---|---|---|
| 🐐 | 🐐 | Ziege |
| 🐢 | 🐢 | Schildkröte |
| 🐬 | 🐬 | Delphin |
Wetter
| Anzeige | Code | Erläuterungen |
|---|---|---|
| ☀ | ☀ | Sonne |
| ☂ | ☂ | Regenschirm |
| 🌪 | 🌪 | Wolke mit Tornado |
| 🌈 | 🌈 | Regenbogen |