Barrierefreie Bilder auf deiner Website

Wenn Bilder sprechen könnten

Ja wenn … dann könnten sie zum Beispiel blinden Menschen, erzählen, was auf ihnen zu sehen ist. Genial, oder?

Bilder können sprechen!

Bilder können tatsächlich sprechen. Und das ganz ohne KI! Du musst nur in deinem Betriebssystem oder deinem Browser einstellen, dass du Assistenz brauchst. Normalerweise kannst du das unter den Systemeinstellungen tun – unter Windows benötigst du eine spezielle Software, in MacOS ist bereits das Programm „Voice Over“ vorinstalliert. Versuche mal testweise, deinen Computer damit zu bedienen und auch ins Internet zu gehen. Du wirst sehen, dass dir eine Stimme sagt, ob du dich auf einem Bild befindest. Und wenn die Website gut gebaut ist, wird dir eine Bildbeschreibung zu jedem Bild vorgelesen.

Woher kommen Bildbeschreibungen?

Bildbeschreibungen sind kleine Texte, die im HTML-Code der Website hinterlegt sind. Es gibt dafür ein eigenes Attribut names „Alt-Text“  – von Alternativ-Text. Es gehört zum Img-Tag, mit dem Bilder eingefügt werden. Zwischen den Anführungszeichen dieses Alt-Attributes kannst du Text eingeben, der von einem sogenannten Screen-Reader vorgelesen oder auf einer Braille-Zeile ausgegeben wird. So können blinde und taub-blinde Menschen erfahren, was auf Bildern zu sehen ist

Wie schreibt man eine gute Bildbeschreibung?

Das ist gar nicht so einfach. Frag dich zuerst: Welchen Zweck hat das Bild? Ein Beispiel: Wir sehen ein Bild mit einem wunderschönen Sonnenuntergang am Meer. Der Himmel ist rötlich gefärbt, die See ruhig. Am rechten Bildrand ragt noch ein Stück einer Hotelfassade ins Bild. In der Überschrift unter dem Bild steht: „Capri ist berühmt für seine Sonnenuntergänge.“ Jetzt sollte klar sein, dass die Bildbeschreibung auf jeden Fall die untergehende Sonne, die Stimmung und das Meer enthalten muss, nicht unbedingt aber die ins Bild ragende Hotelfassade. Hieße die Überschrift hingegen: „Bei guten Fotos kommt es auf den richtigen Ausschnitt an.“, dann wäre die Hotelfassade das wichtigste Element im Bild, denn sie zeigt, dass der Fotograf offenbar vergessen hat, auf die Bildkomposition zu achten.

Tipp:

Stell dir vor, du müsstest jemand am Telefon deine Website vorlesen. Wie würdest du da vorgehen?

Wo gebe ich Bildbeschreibungen ein?

Achte doch beim nächsten Bildimport zum Beispiel mit WordPress mal auf ein Textfeld, das „Bildbeschreibung“ oder „Alt-Text“ heißt. Das ist dann der richtige Platz für deine Bildbeschreibung. Als Programmierer oder Entwickler weißt du sicher aus dem FF, wo im Code, du den Text einspeisen musst.

Tipp:

Auch hier bei LinkedIn kannst du Alt-Texte zu Bildern in Artikeln hinzufügen.

Netzrebellen-Webinar mit noch viel mehr Wissen und Tipps zum Thema Barrierefreiheit

Bald beginnt das Netzrebellen-Webinar, indem du noch viel mehr solcher Tipps lernen kannst! Extra zugeschnitten auf Designer*innen! Egal ob Visual-Designer, UI-Designer, UX-Designer oder auch Texter. Trage dich unverbindlich für unseren Newsletter ein. Du erfährst sofort, wenn wir starten!

Melde dich hier unverbindlich für den Newsletter an