Icon-Fonts und ihre Zugänglichkeitsprobleme
Warum Glyphen-Fonts oft unverständliche Zeichen vorlesen.
Icon-Fonts und ihre Zugänglichkeitsprobleme ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was eine Icon Font ist
Eine Icon Font ordnet Zeichen Glyphen zu, sodass ein Buchstabe als Herz oder Pfeil dargestellt wird. Praktisch für die Größenanpassung, aber voller Tücken für Screenreader.
Das Problem mit unlesbaren Zeichen
Viele Icon Fonts verbergen Glyphen im Private-Use-Bereich von Unicode. Wenn die Schriftart fehlt, liest ein Screenreader möglicherweise ein zufälliges Kästchen oder einen merkwürdigen Buchstaben vor.
Schriftarten können nicht geladen werden
Wenn die Schriftartdatei blockiert wird oder fehlschlägt, wird anstelle Ihres Symbols die Ersatzglyphe angezeigt. Nun sehen Nutzende ein einzelnes Zeichen, wo ein klares Symbol stehen sollte.
CSS-Inhalte sind kein echter Text
Icon Fonts fügen Glyphen häufig über CSS-Pseudoelemente ein. Dieser erzeugte Inhalt ist fragil und kann von assistiven Technologien leicht falsch interpretiert werden.
i.icon-star::before {
content: "\e801";
}Verbergen Sie dekorative Symbolglyphen
Wenn eine Glyphe einer Icon Font dekorativ ist, umschließen Sie sie und fügen Sie aria-hidden="true" hinzu, damit das bedeutungslose Zeichen niemals den Accessibility Tree erreicht.
<span class="icon-star" aria-hidden="true"></span>Bedeutungsvolle Glyphen brauchen Text
Wenn die Glyphe eine Bedeutung trägt, kombinieren Sie das verborgene Symbol mit echtem visuell verborgenem Text, damit die Bedeutung auch bei einem Ausfall der Schriftart erhalten bleibt.
<span class="icon-warn" aria-hidden="true"></span>
<span class="sr-only">Warning</span>Benutzerdefinierte Stylesheets machen sie unbrauchbar
Manche Nutzende überschreiben Schriftarten wegen Legasthenie oder eingeschränkten Sehvermögens. Ihre Schriftart ersetzt Ihre eigene, und jede Glyphe der Icon Font wird zu einem normalen Buchstaben.
Übersetzungstools verstümmeln sie
Die Browser-Übersetzung kann die Glyphenzeichen durch anderen Text ersetzen und Ihre Symbole durcheinanderbringen, weil sie technisch gesehen Buchstaben und keine Bilder sind.
Warum SVG gewinnt
Eingebettetes SVG umgeht all diese Probleme: Es ist ein echtes Bild, übersteht den Austausch von Schriftarten und Übersetzungen und lässt sich sauber mit role und label versehen.
Von Icon Fonts umsteigen
Die moderne Empfehlung lautet, Icon Fonts zugunsten von eingebettetem SVG oder SVG-Sprites zu ersetzen. Sie erhalten eine gestochen scharfe Darstellung und deutlich weniger Barrierefallen.
Testen Sie mit deaktivierter Schriftart
Blockieren Sie die Schriftart in den DevTools und laden Sie die Seite neu. Wenn statt der Symbole einzelne Zeichen erscheinen, müssen Ihre Fallbacks und Beschriftungen verbessert werden.
Kurztest
Sie übernehmen eine Seite, die für eine bedeutungsvolle Sternebewertung eine Icon Font verwendet. Was ist die sicherste Lösung für die Barrierefreiheit?
Rückblick: Gehen Sie vorsichtig mit Icon Fonts um
Glyphen von Icon Fonts sind fragiler Text: Verbergen Sie dekorative mit aria-hidden, unterstützen Sie bedeutungsvolle mit echtem Text und bevorzugen Sie SVG. 🎯
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „Icon-Fonts und ihre Zugänglichkeitsprobleme“ kostenlos?
Ja — der vollständige Text von „Icon-Fonts und ihre Zugänglichkeitsprobleme“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Icon-Fonts und ihre Zugänglichkeitsprobleme“?
Warum Glyphen-Fonts oft unverständliche Zeichen vorlesen. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Icon-Fonts und ihre Zugänglichkeitsprobleme“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Inline-SVG: role img und ein title
- Dekorative Symbole mit aria-hidden ausblenden
- Symbolschaltflächen mit zugänglichem Namen
- Icon-Fonts und ihre Zugänglichkeitsprobleme