Barrierefreie Assets erstellen: Bilder und Icons

Um deine Website barrierefrei zu gestalten, musst du sicherstellen, dass alle Besucher, auch diejenigen mit Sehbehinderungen, deine Inhalte in vollem Umfang erleben können. In diesem Artikel wird erklärt, wie du Bilder und Symbole so verwendest, dass sie den Standards für Barrierefreiheit entsprechen, indem du alternativen Text hinzufügst, aussagekräftiges Bildmaterial verwendest und häufige Fallstricke vermeidest. Befolge diese Best Practices, um barrierefreie, benutzerfreundliche Inhalte für deine Website oder Landing Page zu erstellen.

Anforderungen

• Alle Bilder und informationstragenden Symbole sollten mit einem Alternativtext versehen sein, der den Inhalt des Bildes oder Symbols beschreibt
  • Der Alt-Text sollte keine Wörter enthalten, die das Element als Grafik oder Bild kennzeichnen (vermeide z. B. Phrasen wie “Grafik von” oder “Bild von” usw.), da Bildschirmlesegeräte die Rolle bereits angeben (indem sie z. B. “Grafik” sagen und dann den Alternativtext lesen).
  • Vermeide Großbuchstaben, da einige Bildschirmlesegeräte jeden einzelnen Buchstaben lesen
  • Erforderlich für:
    • bilder mit <img>
    • aktive Bilder
    • formulareingabebilder
    • SVG mit <img>
    • SVG unter Verwendung von <SVG>
    • HTML5 Leinwand
    • icon-Schriftarten
• Alt-Text-Beschreibungen sollten den Kontext für den Nutzer liefern und müssen aussagekräftig sein
  • Die Bild/Icon-Links sollten das Linkziel beschreiben.
  • Das Bild/Symbol von Schaltflächen/Steuerungslinks sollte den Zweck der Schaltfläche oder Steuerung und/oder die daraus resultierende Aktion beschreiben.
  • Die Länge des Alternativtextes für informative Bilder/Icons sollte kurz sein (nicht mehr als 250 Zeichen)
• Der Alt-Text sollte je nach der auf der Seite verwendeten Sprache lokalisiert werden.
• Verwende keinen Text in Bildern, wenn du stattdessen echten Text verwenden kannst, es sei denn, er ist unverzichtbar (wie ein Logo) oder du brauchst bestimmte Schriftarten, Größen, Farben oder Hintergründe.
• Wenn es erforderlich ist, das Bild eines Textes zu verwenden, befolge die Richtlinien für Farbe und Kontrast.
• Wenn ein Hintergrundbild nützliche Informationen enthält, muss ein Alt-Text hinzugefügt werden (z. B. durch normalen sichtbaren Text, durch Hinzufügen von role="image" und aria-label oder durch andere Mittel).
• Wenn sich Text über einem Bild befindet, teste den Kontrast des überlagernden Textes mit mindestens 8 Farben des Bildes.
• Biete Steuerelemente (Pausenbuttons, Pfeile) für Inhalte an, die automatisch starten, z. B. Karussells, Bildschieber und Hintergrundvideos.
• Lasse Karussells nicht automatisch abspielen.
• Verwende keine Geisterschaltflächen über Bildern (Schaltflächen ohne Hintergrund oder Umriss).
• Kein Inhalt sollte mehr als dreimal pro Sekunde aufblinken.
• Grafische Objekte wie ein einzelnes Symbol, eine Grafik oder ein Bild haben einen Mindestkontrast von 3:1 zwischen dem Objekt und seinem Hintergrund.
• Icons, die auf mehreren Seiten verwendet werden, müssen die gleiche Bedeutung und Funktionalität haben.
• Wenn wir ein bestimmtes Symbol verwenden, um eine Aktion auszulösen (z. B. einen Abwärtspfeil für Dropdowns oder ein Akkordeon/Erweiterungssymbol), verwenden wir es nicht dekorativ auf einer anderen Seite.

Ausnahmen

Dekorative oder überflüssige Bilder oder Icons

Wenn Bilder keinen inhaltlichen Zweck erfüllen, rein dekorativ sind oder Informationen duplizieren, die bereits in einem Text enthalten sind, empfiehlt es sich, ihnen einen leeren Alternativtext(alt=") zuzuweisen, sie mit ARIA role="presentation" zu kennzeichnen oder sie als CSS-Hintergrund zu implementieren.

Dekorative oder überflüssige Hintergrundbilder

Gib keinen Alt-Text für Hintergrundbilder an, die nicht wichtig sind und keine Informationen für den Nutzer enthalten.

Beispiele

	DO: Der Text im Alt-Text liefert Kontext und Informationen: “Reife Frau arbeitet am Laptop, trägt Bürokleidung und lächelt, steht vor weißem Hintergrund”. DON’T: Eine Beschreibung ist nicht spezifisch genug: “Reife Frau”.
	Das Icon trägt Informationen und ist wichtig für den Nutzer. Text in alt: “Facebook-Symbol”, “Instagram-Symbol”, “Pinterest-Symbol”.
	Auf der Seite gibt es sechs Beschreibungen mit einem illustrativen Icon. Diese Bilder sind dekorative Bilder. Wir stellen sie ein, indem wir ein leeres alt-Attribut hinzufügen: <img src="filename.png" alt="">. Unterstützende Technologien, wie z. B. ein Bildschirmlesegerät, ignorieren dann das Bild. Ohne das leere alt-Attribut könnte ein Screenreader den Dateinamen lesen, was keinen Sinn ergibt und den Nutzer verwirrt.
	In diesem Beispiel dient das Logo zwei Zwecken: Es zeigt dem Nutzer, auf welcher Seite er sich befindet, und bietet einen Link zurück zur Startseite. DO: Beschreibe das Bild und seine Funktion, z. B. mit aria-label-"GetResponse Homepage".