Bilder

So können Sie Bilder beschreiben: Es gibt zwei Fälle, über die wir sprechen müssen: Alt-Texte für Bilder. Es gibt Bilder, die Informationen enthalten, die man beschreiben muss. Und zweitens: Bilder, die keine Informationen enthalten. Seien Sie vorsichtig, wie Sie das machen. Dazu komme ich später.

Es gibt verschiedene Arten von informativen Bildern.

Das erste sind einfache Bilder

Einfache Bilder sagen mehr als tausend Worte. Wie diese Karte, die zeigt, wo der Pfahlspecht lebt. Ein guter Text für das Bild könnte zum Beispiel so aussehen:

Der Pfahlspecht lebt im Osten der USA, am Mississippi und in Teilen von Kanada bis hinunter zur Pazifikküste in Kalifornien.

Ein schlechter Alt-Text für dieses Bild könnte so aussehen:

“Verbreitungskarte des Helmspechts in Nordamerika.”

Diese Beschreibungen sind zwar korrekt, aber für blinde Benutzer zu wenig aussagekräftig.

Komplexe Bilder

Komplexe Bilder wie Diagramme und Grafiken erfordern längere ergänzende Erklärungen über den Alt-Text hinaus. Diese ergänzenden Erläuterungen könnten gegeben werden Im sichtbaren Text unter dem Bild, In einem Pop-up-Dialog, Oder auf einer separaten Seite oder auf andere Weise.

Blinde Benutzer benötigen Um alle wichtigen Informationen zu verstehen das das komplexe Bild zu vermitteln versucht. Die erweiterte Beschreibung kann Absätze, Listen, oder sogar Tabellen mit Daten.

Es gibt keine technische Begrenzung oder Barrierefreiheitsregel zur maximalen Länge von Alt-Text, Es ist also ein bisschen eine Urteilsache Wenn ein Bild eine zusätzliche lange Beschreibung benötigt. Aber die meisten Leute bevorzugen Alt-Text Nicht länger als eine einzelne Phrase oder ein einzelner Satz sein.

Aktive Bilder

Aktive Bilder sind Bilder, die man anklicken kann. Wenn das Bild das einzige Element in einem aktiven Element ist, muss der Alt-Text erklären, was das Bild zeigt. Für ein Suchsymbol wäre “Suchen” ein passender Alt-Text. Der passende Alt-Text für ein Menüsymbol ist “Menü”. Sie müssen nicht sagen, dass ein Suchsymbol eine Lupe ist. Sie müssen nicht sagen, dass ein Menüsymbol aus drei Linien besteht. Beschreiben Sie, wozu es da ist oder wie es funktioniert.

Bilder von Text

Sie sollten Bilder von Text vermeiden. Das ist ein Verstoß gegen die Barrierefreiheit. Es sei denn, der Text ist erforderlich, zum Beispiel bei Logos oder Kunstwerken. Der Alt-Text für Bilder von Text sollte den visuellen Text enthalten. Vielleicht müssen Sie auch andere Dinge beschreiben. Der passende Alt-Text für dieses Bild könnte zum Beispiel so lauten: “Psychedelische Schriftart aus den 1960ern mit dem Spruch “All you need is love” vor einem bunten, wirbelnden Hintergrund.” Oder wenn das Aussehen nicht wichtig ist. Oder wenn Sie es an anderer Stelle erklären, können Sie einfach sagen: “Alles, was du brauchst, ist Liebe”.

Bild-CAPTCHAs

Bild-CAPTCHAs sind so gemacht, dass man sie mit dem eigenen Gehirn lösen muss. So kann man verhindern, dass Computer einen Vorteil haben. Sie brauchen eine visuelle Wahrnehmung, um Bild-CAPTCHAs zu verwenden. Das ist ein Verstoß gegen die Barrierefreiheit. Außer, es gibt eine nicht-visuelle Methode. Dann ist das okay. Manche Benutzer sind blind und taub. Sie brauchen eine Methode, die weder sehen noch hören. Barrierefreie CAPTCHAs sind schwierig. Wenn möglich, vermeiden Sie sie.

Uninformative Bilder

Bilder können auch uninformativ sein. Sie können zum Beispiel nur schön aussehen, aber keine wichtigen Informationen liefern. Uninformative Bilder können schön sein. Aber sie sagen nichts Neues, was man nicht schon woanders im Text gelesen hat. Blinde Benutzer müssen nicht wissen, dass es die Bilder gibt. Es gibt zwei Möglichkeiten, mit uninformativen Bildern umzugehen: Sie können sie in den CSS-Hintergrund stellen oder ein leeres Alt-Attribut angeben. Das Alt-Attribut sollte nicht weggelassen werden, denn Screenreader können dann einen Fehler vermuten und den Dateinamen oder das Linkziel nicht richtig lesen.

Rein dekorative Bilder

In diesem Beispiel geht es nicht um die Landschaft, sondern um Onkel. Es ist nicht falsch, blinde Benutzer zu informieren, dass es ein Foto einer Landschaft gibt. Aber es ist nicht notwendig.

Redundante Bilder

Bilder, die man nicht braucht, sagen dasselbe wie der Text daneben, zum Beispiel ein Symbol neben dem Wort “Menü”. Wenn Sie dem Bild einen Text hinzufügen, hören Benutzer von Screenreadern das Wort “Menü” zweimal. Das ist kein Verstoß gegen die Barrierefreiheit, aber es ist überflüssig.