Bilder benötigen Alternativtext (Alt-Text). Dies ist oft eines der ersten Dinge, die Designer und Entwickler zum Thema Barrierefreiheit lernen. Auf den ersten Blick ist es ein einfach zu verstehendes Konzept, dessen Umsetzung in der Regel unkompliziert ist. Auch die automatische Erkennung, ob ein Bild über Alternativtext verfügt oder nicht, ist relativ einfach. Browserbasierte Tools wie Axe DevTools können den Alt-Text für die meisten Bildtypen ermitteln.
Nicht ganz so einfach zu bestimmen ist, wann man Alt-Text verwenden sollte und wie man einen guten Alt-Text verfasst, der seine Wirkung entfaltet. Um einen passenden Alt-Text zu verfassen, muss man verstehen, für wen man den Alt-Text schreibt und welchem Zweck das Bild dient.
Wer nutzt denn überhaupt Alt-Text?
Alternativtext wird in erster Linie von Menschen genutzt, die Bildschirmleseprogramme nutzen, um auf Websites, Apps und andere Software zuzugreifen. Menschen, die Bildschirmleseprogramme nutzen, sind in der Regel entweder vollständig blind oder gelten als sehbehindert, was es ihnen erschwert, den Text auf einer Seite zu lesen. Sehbehinderte Menschen können ein Bild möglicherweise nicht gut genug erkennen, um zu verstehen, was darauf zu sehen ist, und vollständig blinde Menschen können das Bild überhaupt nicht sehen. Wenn ein Bild wichtige Informationen vermittelt, die an keiner anderen Stelle auf der Seite verfügbar sind, erhält eine Person, die das Bild nicht sehen kann, diese Informationen nicht, wenn das Bild keinen Alt-Text , der über das HTML-Attribut „alt“ angegeben wird.
Auch für Nutzer mit sehr langsamen Internetverbindungen bietet der Alt-Text einen Nutzen. Sie können Bilder deaktivieren, damit Seiten schneller geladen werden, ohne dabei die Informationen zu verlieren, die wichtige Bilder vermitteln. Wenn Sie in den Einstellungen der meisten gängigen Browser die Anzeige von Bildern deaktivieren, wird stattdessen der Alt-Text des Bildes angezeigt.
Die WebAIM-Startseite mit einem Logo, einem großen Hintergrundbild und einer Reihe von Symbolen.
Wieder die WebAIM-Startseite, diesmal jedoch ohne Bilder – Beachten Sie, dass nur die wichtigen Bilder einen Alt-Text haben.
Menschen mit kognitiven Beeinträchtigungen können auch die Bilder auf einer Seite deaktivieren, um Ablenkungen zu reduzieren. Wenn jemand Schwierigkeiten hat, große Informationsmengen zu verarbeiten, oder sich leicht ablenken lässt, kann das Deaktivieren von Bildern hilfreich sein.
Alternativ kann es sein, dass eine Person eine Lernbehinderung hat, die es ihr erschwert, Texte zu verstehen. In diesem Fall ist es sinnvoll, Bilder und andere Medien einzubinden, damit sie die Informationen auf der Seite leichter verarbeiten kann.
Neben der Verbesserung der Barrierefreiheit wird der Alternativtext auch von Suchmaschinen genutzt, um das Thema eines Bildes zu ermitteln, und gilt als Ranking-Faktor für die Bildsuchoptimierung (SEO).
Wann benötigen Bilder einen Alternativtext?
Immer! Jedes Bild sollte einen Alt-Text enthalten, um Nutzern, die auf Screenreader angewiesen sind, ein positives Erlebnis zu gewährleisten. Selbst wenn ein Bild rein dekorativ ist und keinen beschreibenden Alt-Text erfordert (mehr dazu weiter unten), ist es dennoch wichtig, ein alt=""-Tag zu verwenden. Dadurch wird verhindert, dass der Screenreader dem Nutzer den Dateinamen des Bildes vorliest (schlechte Benutzererfahrung), was ein schlechtes Erlebnis darstellt. Kurz gesagt: Alle Bilder benötigen irgendeine Art von Alt-Text – selbst wenn es sich nur um ein leeres Tag („“) handelt.
Nachdem ich oben mit „auf jeden Fall!“ geantwortet habe, möchte ich meine Aussage zu „dekorativen“ Bildern noch etwas präzisieren.Im Bereich der Barrierefreiheit unterscheiden wir zwischen Bildern, die rein dekorativ sind , und Bildern, die informativen Charakter haben .
Dekorative Bilder benötigen in der Regel keinen Alt-Text (abgesehen von dem oben erwähnten leeren Tag). Sie können aus rein ästhetischen Gründen auf der Seite vorhanden sein (mit anderen Worten: um die Seite optisch ansprechend zu gestalten). Oder sie geben Informationen wieder, die bereits als Text auf der Seite vorhanden sind. In diesem Fall wäre das Hinzufügen eines Alt-Texts zum Bild überflüssig.
Informative Bilder hingegen vermitteln eine bestimmte Information. Um festzustellen, ob ein Bild informativ ist oder nicht, stelle ich mir vor, es wäre aus dem Design entfernt worden. Wenn mir dadurch Informationen fehlen würden, bedeutet dies, dass das Bild informativ ist und einen Alt-Text benötigt.
Diese Webseite enthält zwei Bilder: ein großes, farbenfrohes Hintergrundbild und ein Logo. Was passiert, wenn diese entfernt werden?
Hier wurden beide Bilder von der Seite entfernt. Auch ohne das große Bannerbild kann ich alles noch verstehen, aber da das Logo fehlt, bin ich mir nicht sicher, auf welcher Website ich mich befinde.
Die Technik, das Bild zu entfernen, kann Ihnen auch helfen, den Kontext des Bildes zu verstehen. Im Fall des Hintergrundbildes besteht dessen Kontext aus dem Text und den Schaltflächen, die darüber liegen. Der Text und die darunterliegenden Schaltflächen erklären alles, was Sie über dieses Banner wissen müssen. Eine Alt-Text-Beschreibung für das Bannerbild würde der Bedeutung nichts hinzufügen.
Es ist durchaus üblich, dass Bilder in Verbindung mit Text erscheinen, insbesondere auf Nachrichtenseiten, in sozialen Medien und auf E-Commerce-Websites. Oft werden Bilder von einer Überschrift oder einem anderen Text begleitet, der das Bild beschreibt.
Unter dem Bild einer Teekanne, einer Tasse und einer Untertasse, die alle im Darth-Vader-Design gestaltet sind, erscheinen der Text „Star Wars Darth-Vader-Teekannen-Set“ und der Preis (59,99 $).
Im Fall dieses Darth-Vader-Teekannen-Sets (von ThinkGeek, RIP)beschreibt der Text unterhalb des Bildes das Bild und wird ebenfalls mittels HTML dargestellt, was bedeutet, dass Screenreader ihn finden können. Man könnte argumentieren, dass das Bild einen Alt-Text enthalten sollte, der beschreibender ist als der Text darunter. Der Alt-Text könnte beispielsweise die Teekanne auf dem Foto als Darth Vaders ikonischen Helm beschreiben und die Teetasse als mit Darth Vaders beleuchtetem Brustpanzer verziert. Allerdings erfahren Nutzer erst dann alle Details zum Teeservice, wenn sie die entsprechende Produktseite aufrufen. Man könnte also auch argumentieren, dass das Bild keinen Alt-Text benötigt, da sein Zweck – genau wie der des darunterliegenden Textes – darin besteht, den Nutzer dazu zu verleiten, auf den Link zu klicken, um weitere Informationen zu erhalten.
Die Moral der Geschichte lautet: Ob ein Bild als dekorativ gilt oder nicht, hängt oft vom Kontext ab.
Bildtypen, die unbedingt einen Alt-Text benötigen
Es gibt bestimmte Arten von Bildern, die stets informative Inhalte vermitteln und daher immer einen Alt-Text benötigen. Dazu gehören:
- Bilder, die als Links oder Schaltflächen dienen
- Bilder, die wichtigen Text enthalten
- Logos
Auch in diesen Fällen ist es wichtig, den Kontext des Bildes zu berücksichtigen – wenn sich neben dem Bild HTML-Text befindet, der dieselben Informationen vermittelt, kann die Angabe eines Alt-Textes überflüssig sein.
Bilder, die als Links oder Schaltflächen dienen
Es kommt recht häufig vor, dass Bilder – insbesondere auf Marketing- oder E-Commerce-Websites – gleichzeitig als Links fungieren. Bei einer typischen Produktseite auf Amazon beispielsweise sind die meisten Bilder auf der Seite Produktfotos, die bei einem Klick zu weiteren Details zum Produkt führen. Manchmal sind diese Bilder mit Text versehen, manchmal jedoch auch nicht, wie im folgenden Beispiel:
Die Seite „Interessante Fundstücke“ von Amazon enthält eine Rasteransicht mit Bildern ohne Text, die alle auf Produkte verweisen. Glücklicherweise verfügen alle diese Bilder über einen aussagekräftigen Alt-Text!
Es gibt drei wichtige Punkte, die man beim Verfassen von Alternativtext für Bilder (oder Schaltflächen), die gleichzeitig Links sind, beachten sollte:
- Klickbare Bilder sollten einen Alternativtext enthalten oder Teil eines klickbaren Bereichs sein, der auch HTML-Text enthält, der das Bild beschreibt.
- Der Alt-Text oder der mit dem Bild verknüpfte Text sollte deutlich machen, was passiert, wenn man dem Link folgt oder die Schaltfläche betätigt.
- Bilder, bei denen kein Text um das Bild herum steht, müssen einen Alt-Text haben!
Bildschirmleseprogramme lesen Links und Schaltflächen immer vor. Wenn ein Link aus einem Bild besteht und keinen Alternativtext enthält, hört ein Nutzer eines Bildschirmleseprogramms lediglich das Wort „Link“. Das Folgen von Links und das Anklicken von Schaltflächen sind zwei der wichtigsten Möglichkeiten, wie Nutzer mit Websites interagieren. Wenn ein Nutzer nicht erkennen kann, wozu ein Link oder eine Schaltfläche dient, wird er diesen Teil der Seite wahrscheinlich nicht nutzen können.
Bilder von Text
Generell ist es empfehlenswert, Text so weit wie möglich mit HTML darzustellen, anstatt ihn in ein Bild einzubetten. HTML-Text erfordert keinen zusätzlichen Aufwand seitens des Entwicklers, um ihn barrierefrei zu gestalten. Im Marketingkontext wird Text jedoch manchmal auf eine Weise verwendet, die sich mit HTML und CSS nicht ohne Weiteres nachbilden lässt.
Nehmen wir diesen alten Screenshot von Victoria’s Secret:
Diese Banneranzeige für einen Pyjama-Ausverkauf verwendet zwei verschiedene Textstile. Der eine ist eine schlichte serifenlose Schrift in Schwarz, die sich mit HTML und CSS leicht nachbilden ließe. Der andere ist eine serifenlose Schrift, die aussieht, als wäre sie mit Glitzer geschrieben. Es wäre sehr schwierig, den Glitzereffekt mit CSS nachzubilden.
Die gesamte Anzeige besteht jedoch aus einem einzigen Bild und enthält weitere Abbildungen von Pyjama-Sets, Hausschuhpaaren und einer Frau, die ein Geschenk auspackt. Wenn Designer und Entwickler den einfachen schwarzen Text in HTML umwandeln und dabei das Layout beibehalten wollten, müssten sie mithilfe von HTML und CSS ein responsives Layout erstellen, das mehrere Bilder und Textabschnitte unterbringt. Die Lösung, die die Website von Victoria’s Secret gewählt hat, bestand darin, den gesamten Text im Bild als Alt-Text zu replizieren.
Da diese Anzeigen oft nur eine Woche oder weniger geschaltet werden, ist eine schnelle Bearbeitungszeit wichtig. Einige Unternehmen entscheiden sich dafür, einfach Alt-Text für das gesamte Bild zu verwenden, anstatt die Vorgabe einzuhalten, keine Bilder mit Text zu nutzen. Technisch gesehen stellt dies einen Verstoß gegen die WCAG dar, denn obwohl der Alt-Text für Nutzer von Screenreadern hilfreich ist, haben sehbehinderte Nutzer nicht die Möglichkeit, Schriftart, Schriftfarbe und Hintergrundfarbe anzupassen.
Logos
Es kommt nur sehr selten vor, dass ein Produkt- oder Firmenlogo so verwendet wird, dass kein Alternativtext erforderlich ist. Selbst wenn das Logo Text enthält, ist dieser Text in der Regel Teil des Bildes und kann nicht daraus entfernt werden.
Das UserTesting-Logo besteht beispielsweise fast ausschließlich aus Text. Zwar könnte man den Text in HTML nachbilden, um auf einen Alt-Text verzichten zu können, doch gibt es keine gute oder einfache Möglichkeit, dies zu tun, ohne das Design des Logos zu beeinträchtigen. Es ist viel einfacher, dem Bild einen Alt-Text hinzuzufügen.
alt: UserTesting-Logo
Logos werden zudem häufig in der Kopfzeile oder im Banner einer Website verwendet und sind oft Links, die zur Startseite der Website führen. Heutzutage erwarten viele Nutzer diese Funktionalität. Der Alt-Text für das Logo eines Unternehmens in der Kopfzeile sollte zumindest den Namen des Unternehmens enthalten. Für eine etwas bessere Benutzererfahrung kann es hilfreich sein, zusätzlichen Alt-Text hinzuzufügen, der angibt, wohin der Link führt. Für das UserTesting-Logo könnte der Alt-Text beispielsweise lauten: „UserTesting – Startseite“.
Auch Symbole sind Bilder
Es gibt viele Arten von Bildern, die informativ sein können oder auch nicht. Es ist Ihre Aufgabe, zu beurteilen, ob ein Bild informativ ist, bevor Sie entscheiden, ob Sie einen Alt-Text verfassen. Eine Bildart, die in der Designphase häufig vorkommt, sind Icons. Sie verdienen hier einen eigenen Abschnitt, da Designer meiner Erfahrung nach oft vergessen, dass Icons und Symbole ebenfalls Bilder sind.
Symbole folgen denselben Grundsätzen wie andere Bildtypen: Entweder sind sie informativ oder eben nicht. Hier sind ein paar Fragen, die Sie sich in Bezug auf die von Ihnen verwendeten Symbole stellen sollten:
- Befindet sich direkt neben dem Symbol ein Text?
- Wenn Text vorhanden ist, wird darin genau beschrieben, wozu das Symbol dient?
- Wenn das Symbol ein Link oder eine Schaltfläche ist, wohin führt es dann?
Es kommt immer häufiger vor, dass Symbole für sich allein stehen und überhaupt kein Text um sie herum steht. In diesem Fall ist es sehr wichtig, den Symbolen einen Alternativtext hinzuzufügen. Andernfalls sind sie für alle, die sie nicht sehen können, bedeutungslos. Es kommt nur sehr selten vor, dass Symbole rein dekorativ sind.
Auf der Website von Awwwards werden in der Kopfzeile mehrere Symbole ohne Beschriftung verwendet. Leider verfügt keines davon über einen Alt-Text.
Symbole ohne Text sind nicht ideal. Es ist vorzuziehen und weniger mehrdeutig, direkt neben dem Symbol eine Textbeschriftung – die mit HTML dargestellt wird – zu verwenden:
- Symbole können für verschiedene Zwecke verwendet werden (man denke beispielsweise an das Zahnrad-Symbol).
- Wenn man Text mit Symbolen kombiniert, die als Links oder Schaltflächen dienen, vergrößert sich dadurch die anklickbare bzw. berührbare Fläche für den Link oder die Schaltfläche.
- Wenn dem Symbol ein Alternativtext hinzugefügt wird, weil es von keinem Text umgeben ist, wird die Benutzererfahrung für Nutzer von Bildschirmleseprogrammen wahrscheinlich besser sein als für alle anderen.
Wenn Sie Symbole verwenden, versuchen Sie, neben dem Symbol Platz für eine Textbeschriftung zu finden. Ist dies nicht möglich, stellen Sie sicher, dass das Symbol sehr klar und verständlich ist, groß genug, um es leicht zu erkennen (und anzuklicken), und über einen Alt-Text verfügt.
Wann sollte Alt-Text verfasst werden, und wer sollte ihn verfassen?
Wenn Sie das Bild erstellt haben, sollten Sie den Alt-Text verfassen. Wenn Sie das Bild nicht erstellt haben, es aber als Erster in ein Wireframe, ein Mockup oder einen Prototyp einbinden, sollten Sie den Alt-Text verfassen. Wenn Sie als Entwickler eine Benutzeroberfläche mit Bildern implementieren, die auf den Entwürfen eines Content-Erstellers oder Designers basieren, sollten Sie nicht für das Verfassen des Alt-Texts verantwortlich sein – der Alt-Text sollte bereits verfasst sein, wenn er bei Ihnen ankommt. Die Aufgabe des Entwicklers besteht darin, sicherzustellen, dass der Alt-Text korrekt implementiert wird.
Wenn Designer Alt-Text für Bilder (insbesondere Symbole und Logos) verfassen, während sie eine Reihe von Wireframes oder Mockups für eine Funktion oder eine Seite fertigstellen, können sie den Alt-Text als Teil der Anmerkungen zu den Wireframes einfügen. Wenn jemand einen Blogbeitrag verfasst, kann er beim Erstellen des Entwurfs für jedes enthaltene Bild einen Alt-Text oder eine Bildunterschrift (oder manchmal beides) verfassen.
Alt-Text, der erst lange nachträglich verfasst wird (beispielsweise während eines „Barrierefreiheits-Sprints“ oder – schlimmer noch – nachdem die Website bereits online gegangen ist), ist in der Regel weniger effektiv. Die Gründe und der Kontext für die Einbindung eines Bildes könnten dabei verloren gegangen sein. Wie bei allen Aspekten der Barrierefreiheit ist es sowohl schneller als auch einfacher, den Alt-Text von vornherein zu verfassen, anstatt dies erst nachträglich nachzuholen.
Die richtige Balance bei Bildbeschreibungen finden
Während Symbole, Piktogramme und Logos aufgrund ihrer Einfachheit leicht zu beschreiben sind, erfordern detailreichere Bilder eine sorgfältige Abwägung, um den Leser nicht zu überfordern. Konzentrieren Sie sich auf die wesentlichen Elemente des Bildes, beispielsweise darauf, wie viele Personen zu sehen sind, wo sich die Szene abspielt und welche Aktivitäten dargestellt werden. Durchdachte Beschreibungen helfen Menschen mit Behinderungen, Bilder besser zu verstehen, die sie sonst nicht sehen könnten.
Wenn Sie ein Haus im Alt-Text beschreiben, reicht es wahrscheinlich nicht aus, einfach nur „Foto eines Hauses“ zu schreiben. Stattdessen liefert eine aussagekräftigere Beschreibung wie „Modernes einstöckiges Haus in einer ruhigen Wohnstraße, vor dem ein brauner Hund sitzt“ hilfreiche Hintergrundinformationen. Zu viele Details wie „Modernes, großes, weißes, einstöckiges Haus mit großen Glasflächen, grauen Steinakzenten, gepflegter Gartenanlage mit vier ausgewachsenen Bäumen und einem mittelgroßen braun-weißen Hund, der glücklich auf der Veranda sitzt“ können jedoch überfordernd und unnötig sein.
Fazit: Das Verfassen von Alt-Text macht dich zu einem besseren Designer (und sorgt für ein besseres Nutzererlebnis!)
Einer der wertvollsten Aspekte beim Verfassen von Alternativtext ist, dass man dadurch gezwungen ist, sich mit der Bedeutung und dem Zweck eines jeden Bildes auseinanderzusetzen. Und das Verfassen von Alternativtext kann Ihnen dabei helfen, Ihre Designs und Ihre Inhalte zu verbessern.
Beim Verfassen von Alternativtext für ein Symbol stellen Sie möglicherweise fest, dass das Symbol selbst zu vage ist. Dies kann dazu führen, dass Sie Ihre Entwürfe überarbeiten, um das Symbol verständlicher zu gestalten. Wenn Sie einen Blogbeitrag schreiben und Schwierigkeiten haben, eine Bildunterschrift für ein Bild zu verfassen, das Sie einfügen möchten, entfernen Sie das Bild möglicherweise doch, weil Sie erkennen, dass es Ihren Standpunkt nicht so gut veranschaulicht, wie Sie gedacht hatten.
Indem Sie sich intensiver mit den Bildern auseinandersetzen, die Sie in Ihre Design- oder Content-Arbeiten einbinden – und mit der Wirkung, die diese auf die unterschiedlichsten Menschen haben –, können Sie Ihre Arbeit deutlich wirkungsvoller gestalten. Bilder können eine sehr wirkungsvolle Form der Informationsvermittlung sein. Je mehr Gedanken Sie sich darüber machen, desto wirkungsvoller können sie werden.
