AccessiBee Prototype

1.1. Zweck dieses Prototyps

Dieser Prototyp demonstriert, wie semantische Richtlinien des WCAG mithilfe künstlicher Intelligenz kontextbezogen und automatisiert umgesetzt werden können. Anhand der Generierung von Alt-Texten für Bilder (WCAG Erfolgskriterium 1.1.1.) wird gezeigt, wie Kontext aus dem HTML-Inhalt einer Webseite extrahiert, Bilder analysiert und passende Bildbeschreibungen erstellt werden.

Er kann sehr gerne mit eigenen Daten ausprobiert werden, aber wir haben auch einige Beispielszenarien vorbereitet. Diese können einfach per Dropdown ausgewählt werden.

1.2. Beispielhafte Seite

Nach der Auswahl eines Szenarios sehen Sie im Folgenden den Screenshot einer Webseite, die potenziell keine Alt-Texte für ihre Bilder enthält. Das ist ein häufiges Problem, das die Zugänglichkeit von Webinhalten einschränkt.

Screenshot einer potenziell problematischen Seite

1.3. Unsere Vorgehensweise

Wir nutzen fortschrittliche KI-Modelle, um den Kontext einer Webseite zu erfassen und in diesem Beispiel Bildbeschreibungen zu generieren. Alles ist modular aufgebaut, sodass verschiedene KI-Modelle je nach Funktion, Situation und Marktlage verwendet werden können.

Kontextextraktion: Verstehen des Umfeldes des Bildes

In diesem Schritt versuchen wir, den Kontext des Bildes aus dem umgebenden Textinhalt zu verstehen. Der Kontext gibt uns wichtige Hinweise darauf, wie das Bild interpretiert werden sollte.

2.1 Textinhalt der Webseite

Hier geben Sie die Textinhalte ein, die in der Umgebung des Bildes auf der Webseite platziert sind. Dies hilft uns, den Kontext des Bildes besser zu verstehen. Zu Testzwecken haben wir für unseren Prototypen auf den Einsatz von Crawlern verzichtet, dieser ist für das Endprodukt jedoch vorgesehen.

Text über die Webseite/das Unternehmen im Allgemeinen (about us): Text der Seite auf der das Bild platziert ist: Direkte Umgebung des Bildes oder Referenz zum Bild:

2.2. Relevante Fragestellungen zum Kontext

Basierend auf dem bereitgestellten Textinhalt, welche Fragen könnten relevant sein, um den Kontext des Bildes zu verstehen?

Fragen zum Kontext des Bildes:

2.3. AI-gestützte Kontextanalyse

Wählen Sie ein KI-Modell aus, das den Kontext analysieren soll. Unterschiedliche Modelle können unterschiedliche Perspektiven bieten.

Ergebnis der Kontextanalyse:

Interpretation und Beschreibung des Bildes

In diesem Schritt verwenden wir die Azure API, um Informationen und Daten aus dem bereitgestellten Bild zu extrahieren. Dies gibt uns Einblick in die Struktur und den Inhalt des Bildes.

3.1. Wie funktioniert das?

In diesem Abschnitt können Sie eine URL zu einem Bild Ihrer Wahl eingeben. Nachdem Sie die URL eingegeben haben, wird das Bild über die Azure API analysiert, und die Ergebnisse werden in der rechten Spalte angezeigt.

Die Analyse hilft uns zu verstehen, was auf dem Bild dargestellt ist, und liefert wichtige Informationen, die später für die Generierung der Bildbeschreibung verwendet werden.

3.2. Auswahl des Bildes

Geben Sie die URL des zu beschreibenden Bildes ein: Hier erscheint ein Bild, wenn es geladen wird.

3.3. Ergebnisse der Analyse

Hier sehen Sie die Ergebnisse der Bildanalyse. Diese Daten geben uns Einblick in die verschiedenen Elemente und Strukturen des Bildes.

Generierung einer barrierefreien Bildbeschreibung

4.1. Informationen zur Beeinträchtigung

Hier können spezifische Informationen über die Beeinträchtigung des Nutzers eingegeben werden, um die Generierung des Alt-Textes anzupassen. Es gibt auch eine Standardvoreinstellung, die über ein Dropdown-Menü geändert werden kann.

4.2. Generierung von Bildbeschreibungen

Mit den vorherigen Informationen können wir nun einen geeigneten Alt-Text für das Bild generieren. Dieser Text soll den Inhalt des Bildes so genau wie möglich beschreiben und für Menschen mit Beeinträchtigungen verständlich sein.

Alt-Text Vorschläge:

4.3. Ergebnis und Ausblick

Nach der Generierung wird der Alt-Text unten angezeigt. Dieser Text kann als Alt-Text für das Bild auf einer Website verwendet werden. Er ermöglicht es Menschen mit Beeinträchtigungen, den Inhalt des Bildes zu verstehen. Unsere Vision ist es, diesen Prozess weiter zu automatisieren und zu verbessern, um das Internet für jeden zugänglich zu machen.

Vereinfachung der Sprache

5.1. Beschreibung

In diesem Abschnitt geht es um die Vereinfachung von Sprache. Das Ziel ist es, komplexen und schwer verständlichen Text in eine Form zu übertragen, die für alle leicht verständlich ist. Dies kann besonders nützlich für Menschen mit kognitiven Beeinträchtigungen sein, da sie Schwierigkeiten haben können, komplexe Informationen oder Sätze zu verarbeiten. Durch die Umwandlung in "leichte Sprache" (WCAG Erfolgskriterium 3.1.5) können Webseiten und Texte allgemein zugänglicher gemacht werden.

Sollte es nicht gewünscht sein, dass die Kontextinformationen aus Abschnitt 2.1. berücksichtigt werden, löschen Sie bitte den Inhalt aus diesen, oder wählen unter Abschnitt 1.1. 'Eigenes Szenario' aus.

5.2. Eingabe des schwer lesbaren Textes

In diesem Feld können Sie einen Text eingeben, der als kompliziert oder schwer verständlich empfunden wird. Das kann ein Fachjargon, lange Sätze oder komplexe Satzstrukturen beinhalten. Nach der Eingabe wird dieser Text mit Hilfe der KI in eine einfachere Formulierung umgewandelt.

Schwer zu verstehender Text: