Firefox und Chrome: Alternativ-Texte von Online-Bildern auslesen

Auf einer Webseite verwenden Sie Bilder, vielleicht Produktbilder Ihres Lieferanten, die Sie für diese Zwecke unter Angabe der Quelle meist verwenden dürfen. Damit sehbehinderte Personen erfahren, was auf dem Bild zu sehen ist, sollten Sie unbedingt einen Alternativ-Text hinzufügen. Die betroffenen Surfgäste verwenden in der Regel eine Screenreader-Software, die ihnen nicht nur den sonstigen Text, sondern auch den ALT-Text vorliest.

Damit Sie sich den Text nicht aus den Fingern saugen müssen, können Sie auch die ALT-Texte verwenden, die Ihr Lieferant auf seiner eigenen Webseite benutzt hat. Oder Sie wollen auf Ihrer eigenen Seite prüfen, ob und welche vorhanden sind. Doch wie zeigen Sie diese an?

Lösung: Entweder verwenden Sie ein Bookmarklet, ein Add-On oder Sie finden den ALT-Text im Webseiten-Quelltext. Beides zeigen wir hier.

Variante 1: Bookmarklet oder Add-on

Was Bookmarklets sind und wie Sie diese in Ihrem Browser einbauen, haben Sie in diesem Artikel gelesen: «Vier nützliche kleine Scripts zum Aufpeppen von Firefox und Chrome».

Fürs Anzeigen des ALT-Textes hat ein deutscher Entwickler folgendes Bookmarklet entworfen:

Sie können es unter https://codepo8.github.io/Alt-Text-Rollover-Bookmarklet/ testen. Wenn Sie es in Ihrem Browser hinzufügen wollen, folgen Sie einfach der Anleitung in diesem Artikel und verwenden Sie obige JavaScript-Codezeile.

Vom gleichen Entwickler, der das obige Bookmarklet zur Verfügung stellt, gibt es auch Add-ons für Firefox und Edge. Jenes für Firefox finden Sie hier und jenes für Microsoft Edge hier.

Jenes für Edge lässt sich mit den Hinweisen auf seiner Webseite (engl.) auch in Chrome installieren.

Aufgepasst! Sowohl das Add-on als auch das Bookmarklet basieren offenbar auf demselben JavaScript Code, denn sie zeigen unter manchen Bedingungen dasselbe suboptimale Verhalten. Der im Bookmarklet unter «https://codepo8.github.io/Alt-Text-Rollover-Bookmarklet/alt-text-rollover.js» verknüpfte JavaScript-Code dürfte den «Fehler» enthalten. So erscheint bei meinen Tests das gelbe Pop-up mit dem ALT-Text bei manchen Webseiten (ausgerechnet auch auf pctipp.ch) ein Stück zu weit oben. Daher verschwindet jener Teil des Fensters, der den Drag-Balken (um es zu verschieben) und das Close-X (um es zu schliessen) enthält, ausserhalb des klickbaren Bereichs, zum Beispiel unter eine Titelleiste der Webseite selbst. Wenn das gelbe ALT-Text-Fenster weder verschieb- noch schliessbar ist, müssen Sie das Tab der betroffenen Seite schliessen. Sie können die Seite allerdings sofort wieder mittels Ctrl+Shift+T (Strg+Umschalt+T) öffnen.

Wenn Sie mit dem erwähnten Manko leben können oder es nur auf Seiten verwenden, auf denen das Phänomen nicht auftritt, ist das Bookmarklet oder das Add-on auf jeden Fall die bequemste Variante. Ansonsten prüfen Sie die Tipps auf der Folgeseite.

Variante 2: ALT-Text aus dem Quellcode

Im Firefox klicken Sie mit rechter Maustaste aufs Bild, das Sie interessiert, und wählen Sie Barrierefreiheit-Eigenschaften untersuchen. Im unteren Teil erscheinen technische Informationen. In der rechten Spalte unter Überprüfungen/Eigenschaften finden Sie ein Feld «name:». Dahinter steht, falls vorhanden, der ALT-Text. Dreifachklicken Sie ihn (nur so lässt er sich gesamthaft markieren) und drücken Sie Ctrl+C (Strg+C), um ihn zu kopieren. Jetzt können Sie ihn mit Ctrl+V (Strg+V) in ihrem CMS oder in einem Texteditor einfügen.

In Google Chrome ist es nur unwesentlich schwieriger. Klicken Sie mit rechter Maustaste aufs Bild auf der Webseite und wählen Sie Untersuchen. Rechts erscheint auch hier eine Spalte mit vielen Quellcode-Daten. Oben finden Sie allerdings die Zeile <img> mit dem HTML-Tag «alt=», das den vorhandenen ALT-Text zeigt. Auf ihn können Sie direkt doppelklicken, um ihn zu markieren. Auch hier lässt er sich nun mit Ctrl+C (Strg+C) kopieren und mit Ctrl+V (Strg+V) einfügen.