Icons

Die Komponente Icons findet an vielen Stellen Verwendung, um platzsparend Informationen zu vermitteln.

Anders als gewöhnliche Komponenten, ist die Einbindung aber nicht nur von der HTML-Klasse abhängig, sondern auch inhaltssensitiv. Zum Beispiel hat eine Verweisliste je nach verlinktem Inhalt (interner Verweis, externer Verweis, Download) ein unterschiedliches Icon. Die Auswahl des richtigen Icons erfolgt durch das CSS, sobald die korrekte Klasse zugewiesen ist.  

Entsprechend der gewählten Portalfarbe werden die Icons farbig dargestellt.

Eine Auswahl aller im Styleguide enthaltenen Icons finden Sie hier:

Alle grafischen Bedienelemente sind nach BITV-Regelung mit Alternativtexten zu versehen. Die Texte sollen dabei das entsprechende Ziel des Links bzw. die Aktion des Buttons bezeichnen. Symbole sollten generell nicht durch Alternativtexte beschrieben, sondern ersetzt werden. Ein Beispiel: Statt für das "Kontakt"-Symbol eine Beschreibung á "Briefumschlag" einzufügen, beschreiben Sie die Bedeutung: "Kontaktanschrift".

Zur Einbindung von Icons empfiehlt sich aus Gründen der Barrierefreiheit das <img>-Element. Hier können Alternativtexte über das alt-Attribut eingefügt werden.
Bei Inline-Einbinden von SVGs muss das erste Kindelement der SVG ein title-Element sein, das die Grafik bzw. die Aktion beschreibt. Dafür muss das SVG-Element per aria-labelledby-Attribut auf das title-Element verweisen. Zusätzlich dazu sollte das SVG-Element role="img" tragen, da sonst ggf. das title-Element nicht ausgegeben wird.