Verwendung von künstlicher Intelligenz zur Generierung von Alt-Text für Bilder

Webentwickler und Content-Redakteure vergessen oder ignorieren oft einen der wichtigsten Aspekte, um eine Website barrierefrei und SEO-performant zu machen: Alternativtexte für Bilder. Sie wissen schon, dieses scheinbar kleine Bildattribut, das ein Bild beschreibt

​​​<img src="/cute/sloth/image.jpg" alt="A brown baby sloth staring straight into the camera with a tongue sticking out." >

Wenn Sie regelmäßig Inhalte im Web veröffentlichen, wissen Sie, dass es mühsam sein kann, sich beschreibende Texte auszudenken. Sicher, 5-10 Bilder sind machbar. Aber was ist, wenn wir von Hunderten oder Tausenden von Bildern sprechen? Haben Sie die Ressourcen dafür?

Betrachten wir einige Möglichkeiten zur automatischen Generierung von Alt-Text für Bilder mit Hilfe von Computer Vision und Bilderkennungsdiensten von Anbietern wie Google, IBM und Microsoft. Sie haben die Ressourcen!

Erinnerung: Wofür ist Alt-Text gut?

Oft übersehen bei der Webentwicklung und der Inhaltseingabe, ist das alt-Attribut ein kleiner HTML-Code, der ein Bild beschreibt, das auf einer Seite erscheint. Es ist so unauffällig, dass es für den durchschnittlichen Benutzer keine Auswirkungen zu haben scheint, aber es hat tatsächlich sehr wichtige Verwendungszwecke.

• Web-Zugänglichkeit für Screenreader: Stellen Sie sich eine Seite mit vielen Bildern vor, auf denen keines davon Alt-Text enthält. Ein Benutzer, der einen Screenreader verwendet, hört nur das Wort "Bild" und das ist nicht sehr hilfreich. Toll, da ist ein Bild, aber was ist es? Inklusive Alt-Text ermöglicht es Screenreadern, sehbehinderten Menschen zu helfen, zu "sehen", was da ist und ein besseres Verständnis des Seiteninhalts zu erhalten. Man sagt, ein Bild sagt mehr als tausend Worte – das sind tausend Worte Kontext, die ein Benutzer möglicherweise verpasst.
• Anzeigetext, wenn ein Bild nicht geladen wird: Das World Wide Web scheint unfehlbar zu sein und, wie New York City, schläft es niemals, aber wackelige und fehlerhafte Verbindungen sind eine reale Sache, und wenn das passiert, neigen Bilder dazu, nicht richtig zu laden und zu "brechen". Alt-Text ist eine Absicherung, da er auf der Seite anstelle des "kaputten" Bildes angezeigt wird und den Benutzern als Fallback Inhalte bietet.
• SEO-Performance: Alt-Text auf Bildern trägt auch zur SEO-Performance bei. Obwohl er einer Website oder Seite nicht direkt zu einem Aufstieg an die Spitze der Suchergebnisse verhilft, ist er ein Faktor, den man für die SEO-Performance im Auge behalten sollte.

Wenn Sie wissen, wie wichtig diese Dinge sind, können Sie hoffentlich beim Entwickeln und Eingeben von Inhalten den richtigen Alt-Text einfügen. Aber sind Ihre Archive in einem guten Zustand? Der Versuch, eine detaillierte Beschreibung für einen großen Rückstand an Bildern zu finden, kann eine entmutigende Aufgabe sein, besonders wenn Sie unter engen Fristen arbeiten oder ihn zwischen anderen Projekten unterbringen müssen.

Was wäre, wenn es eine Möglichkeit gäbe, Alt-Text beim Hochladen eines Bildes anzuwenden? Und! Was wäre, wenn es eine Möglichkeit gäbe, die Seite auf fehlende Alt-Tags zu überprüfen und diese automatisch auszufüllen?

Es gibt verfügbare Lösungen!

Computer Vision (oder Bilderkennung) wird bereits seit einiger Zeit angeboten. Unternehmen wie Google, IBM und Microsoft haben ihre eigenen APIs öffentlich verfügbar gemacht, damit Entwickler auf diese Funktionen zugreifen und sie zur Identifizierung von Bildern und deren Inhalt nutzen können.

Es gibt Entwickler, die diese Dienste bereits genutzt und ihre eigenen Plugins zur Generierung von Alt-Text erstellt haben. Nehmen Sie zum Beispiel Sarah Drasners Generator, der zeigt, wie die Computer Vision API von Azure verwendet werden kann, um Alt-Text für jedes Bild per Upload oder URL zu erstellen. Ziemlich genial!

​​Siehe den Pen
​​Dynamisch generierter Alt-Text mit der Computer Vision API von Azure von Sarah Drasner (@sdras)
​​auf CodePen.​​

Es gibt auch Automatic Alternative Text von Jacob Peattie, ein WordPress-Plugin, das die gleiche Computer Vision API verwendet. Es ist im Grunde eine Ergänzung des Workflows, die es dem Benutzer ermöglicht, ein Bild hochzuladen und automatisch generierten Alt-Text zu erhalten.

​​Werkzeuge wie diese helfen im Allgemeinen, den Prozess der Inhaltsverwaltung, -bearbeitung und -wartung zu beschleunigen. Selbst die Anstrengung, sich einen beschreibenden Text auszudenken, wurde minimiert und an die Maschine delegiert!

Hände schmutzig machen mit KI

Ich habe ein paar KI-Dienste ausprobiert und bin zuversichtlich zu sagen, dass Microsoft Azures Computer Vision die besten Ergebnisse liefert. Die von Google und IBM angebotenen Dienste haben sicherlich ihre Vorteile und können immer noch Bilder und korrekte Ergebnisse identifizieren, aber die von Microsoft ist so gut und so genau, dass es sich nicht lohnt, sich mit etwas anderem zufrieden zu geben, zumindest meiner Meinung nach.

Das Erstellen eines eigenen Bilderkennungs-Plugins ist ziemlich einfach. Gehen Sie zuerst zu Microsoft Azure Computer Vision. Sie müssen sich anmelden oder ein Konto erstellen, um einen API-Schlüssel für das Plugin zu erhalten.

Sobald Sie sich im Dashboard befinden, suchen Sie nach und wählen Sie Computer Vision aus und füllen Sie die erforderlichen Details aus.

Warten Sie, bis die Plattform eine Instanz Ihres Computer Vision hochgefahren hat. Die API-Schlüssel für die Entwicklung sind verfügbar, sobald dies abgeschlossen ist.

Lassen Sie uns nun zu den interessanten und kniffligen Teilen kommen! Ich werde Vanilla JavaScript zur Demonstration verwenden. Für andere Sprachen können Sie die Dokumentation einsehen. Unten finden Sie eine direkte Kopie und Einfügung des Codes, den Sie zum Ersetzen der Platzhalter verwenden können.

​​var request = new XMLHttpRequest();
request.open('POST', 'https://[LOCATION]/vision/v1.0/describe?maxCandidates=1&language=en', true);
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Ocp-Apim-Subscription-Key', '[SUBSCRIPTION_KEY]');
request.send(JSON.stringify({ "url": "[IMAGE_URL]" }));
request.onload = function () {
    var resp = request.responseText;
    if (request.status >= 200 && request.status < 400) {
        // Success!
        console.log('Success!');
    } else {
        // We reached our target server, but it returned an error
        console.error('Error!');
    }

    console.log(JSON.parse(resp));
};

request.onerror = function (e) {
    console.log(e);
};

Okay, lassen Sie uns einige Schlüsselbegriffe des KI-Dienstes durchgehen.

• Standort: Dies ist der Abonnementstandort des Dienstes, der vor dem Abrufen der Abonnement-Schlüssel ausgewählt wurde. Wenn Sie den Standort aus irgendeinem Grund nicht mehr wissen, können Sie zum Bildschirm Übersicht gehen und ihn unter Endpunkt finden.

​​

• Abonnement-Schlüssel: Dies ist der Schlüssel, der den Dienst für unsere Plugin-Nutzung freischaltet und unter Schlüssel bezogen werden kann. Es gibt zwei davon, aber es spielt keine Rolle, welcher verwendet wird.
• Bild-URL: Dies ist der Pfad zum Bild, das den Alt-Text erhält. Beachten Sie, dass die an die API gesendeten Bilder bestimmte Anforderungen erfüllen müssen.
  • Dateityp muss JPEG, PNG, GIF, BMP sein
  • ​​Dateigröße muss kleiner als 4MB sein
  • ​​Abmessungen sollten größer als 50px mal 50px sein

Kinderleicht

​​Dank großer Unternehmen, die ihre Dienste und APIs für Entwickler öffnen, ist es nun relativ einfach für jeden, Computer Vision zu nutzen. Als einfaches Beispiel habe ich das folgende Bild an die Computer Vision API von Microsoft Azure hochgeladen.

​​Der Dienst lieferte folgende Details

​​{
    "description": {
        "tags": [
            "person",
            "holding",
            "cellphone",
            "phone",
            "hand",
            "screen",
            "looking",
            "camera",
            "small",
            "held",
            "someone",
            "man",
            "using",
            "orange",
            "display",
            "blue"
        ],
        "captions": [
            {
                "text": "a hand holding a cellphone",
                "confidence": 0.9583763512737793
            }
        ]
    },
    "requestId": "31084ce4-94fe-4776-bb31-448d9b83c730",
    "metadata": {
        "width": 920,
        "height": 613,
        "format": "Jpeg"
    }
}

​​Von dort aus könnten Sie den Alt-Text auswählen, der potenziell für ein Bild verwendet werden könnte. Wie Sie diese Funktionalität ausbauen, ist Ihre Sache.

• ​​Sie könnten ein CMS-Plugin erstellen und es in den Content-Workflow integrieren, wo der Alt-Text generiert wird, wenn ein Bild hochgeladen und im CMS gespeichert wird.
• ​​Sie könnten ein JavaScript-Plugin schreiben, das Alt-Text "on-the-fly" hinzufügt, nachdem ein Bild mit bemerkenswert fehlendem Alt-Text geladen wurde.
• ​​Sie könnten eine Browser-Erweiterung erstellen, die Alt-Text zu Bildern auf jeder Website hinzufügt, wenn sie Bilder mit fehlendem Alt-Text findet.
• ​​Sie könnten Code schreiben, der Ihre vorhandene Datenbank oder Ihr Content-Repository auf fehlenden Alt-Text durchsucht und diese aktualisiert oder Pull-Requests für vorgeschlagene Änderungen öffnet.

​​Beachten Sie, dass diese Dienste nicht 100%ig genau sind. Sie geben manchmal eine geringe Konfidenzbewertung und eine Beschreibung zurück, die überhaupt nicht mit dem Thema übereinstimmt. Aber diese Plattformen lernen und verbessern sich ständig. Schließlich wurde Rom nicht an einem Tag gebaut.