Sonderzeichen aus dem Unicode
[Materialsammlung]
Einzelzeichen wie Buchstaben, Ziffern oder Satzzeichen verfügen über einen individuellen Wert, der im Unicode normiert wird. Über diese Standardzeichen hinaus steht eine Unzahl von Sonderzeichen zu einzelnen Sprachen und Symbole zur Verfügung, die technisch einem einzelnen Code zugeordnet werden können.
Auf dieser Seite findest du Beispiele für Zeichen und deren standardisierter Codierung und teilweise die besondere Verwendung der einzelnen Zeichen auf Zweiter Blick.
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
| Zeichen | 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
| Zeichen | Code | Erläuterungen |
|---|---|---|
| 🍴 | 🍴 | Messer und Gabel |
| 🍉 | 🍉 | Wassermelone |
| 🍟 | 🍟 | Pommes frites |
| 🍺 | 🍺 | Bierkrug |
Geografie und Karten
| Zeichen | 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 |
Gesten am Touch Screen
Es gibt keine Zeichen, die explizit für Gesten auf dem Tablet oder Smart Phone vorgesehen sind. Die folgenden Zeichen können jedoch zur Symbolisierung herangezogen werden.
| Zeichen | Code | Erläuterungen |
|---|---|---|
| ↑ | ↑ | Einfacher Pfeil nach oben |
| → | → | Einfacher Pfeil nach rechts |
| ↓ | ↓ | Einfacher Pfeil nach unten |
| ← | ← | Einfacher Pfeil nach links |
| ⇈ | ⇈ | Gepaarte Pfeile nach oben |
| ⇉ | ⇉ | Gepaarte Pfeile nach rechts |
| ⇊ | ⇊ | Gepaarte Pfeile nach unten |
| ⇇ | ⇇ | Gepaarte Pfeile nach links |
| ⤊ | ⤊ | Dreiliniger Pfeil nach oben |
| ⇛ | ⇛ | Dreiliniger Pfeil nach rechts |
| ⤋ | ⤋ | Dreiliniger Pfeil nach unten |
| ⇚ | ⇚ | Dreiliniger Pfeil nach links |
| ⟰ | ⟰ | Vierliniger Pfeil nach oben |
| ⟱ | ⟱ | Vierliniger Pfeil nach oben |
| ↰ | ↰ | Einfacher Pfeil nach oben und dann links |
| ↱ | ↱ | Einfacher Pfeil nach oben und dann rechts |
| ⬏ | ⬏ | Einfacher Pfeil nach rechts und dann oben |
| ⬎ | ⬎ | Einfacher Pfeil nach rechts und dann unten |
| ↳ | ↳ | Einfacher Pfeil nach unten und dann rechts |
| ↲ | ↲ | Einfacher Pfeil nach unten und dann links |
| ⬐ | ⬐ | Einfacher Pfeil nach links und dann unten |
| ⬑ | ⬑ | Einfacher Pfeil nach links und dann oben |
IT
| Zeichen | 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
| Zeichen | 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
| Zeichen | Code | Erläuterungen |
|---|---|---|
| 🎜 | 🎜 | Fliegende aufsteigende Noten |
| 🎹 | 🎹 | Klavier |
| 🎻 | 🎻 | Violine (Geige) |
Optik
| Zeichen | Code | Erläuterungen |
|---|---|---|
| 👁 | 👁 | Auge |
| 👓 | 👓 | Brille |
| 🔍 🔎 |
🔍 🔎 |
Lupe |
Pfeile und Richtungen
| Zeichen | Code | Erläuterungen |
|---|---|---|
| ↓ | ↓ | Pfeil nach unten (Down-Arrow) |
| → | → | Pfeil nach rechts (Right Arrow) |
| ∇ | ∇ ∇ |
Dreieck spitz nach unten |
Tiere
| Zeichen | Code | Erläuterungen |
|---|---|---|
| 🐐 | 🐐 | Ziege |
| 🐢 | 🐢 | Schildkröte |
| 🐬 | 🐬 | Delphin |
Wetter
| Zeichen | Code | Erläuterungen |
|---|---|---|
| ☀ | ☀ | Sonne |
| ☂ | ☂ | Regenschirm |
| 🌪 | 🌪 | Wolke mit Tornado |
| 🌈 | 🌈 | Regenbogen |