Die Zukunft der Web-Barrierefreiheit: KI-Tools zur Förderung von Inklusion im Web

Inhaltsverzeichnis

1. Der aktuelle Stand der Web-Barrierefreiheit 
2. KI-Unterstützung für Content-Ersteller 
3. KI-Unterstützung für Webentwickler 
4. Zusammenfassung 

Derzeit erleben wir einen enormen Technologiesprung dank Fortschritten in Bereichen wie maschinellem Lernen (ML) und künstlicher Intelligenz (KI). Bei all dem Hype vergisst man leicht, dass Technologie nur für einen bestimmten Zweck erfunden wurde – um uns Menschen das Leben einfacher zu machen. Es ist kaum zu bestreiten, dass dieses Ziel mit vielen spektakulären Erfolgen erreicht wurde. Heutzutage ist die Anzahl der Aktivitäten, die online durchgeführt werden können, enorm. Aber funktioniert es wirklich bei allen? Es gibt eine Gruppe, die besonders daran interessiert ist, technologische Errungenschaften in echte Verbesserungen umzusetzen – Menschen mit Behinderungen oder Beeinträchtigungen. Lassen Sie uns in die aufregenden Möglichkeiten eintauchen, die der Welt der Barrierefreiheit im Internet bevorstehen. 

Der aktuelle Stand der Web-Barrierefreiheit 

Bevor wir uns mit der Zukunft der Barrierefreiheit im Internet befassen, werfen wir einen Blick auf den aktuellen Stand und die Probleme, mit denen Menschen mit Behinderungen konfrontiert sind, wenn sie auf digitale Inhalte zugreifen möchten. Laut einer Studie von WebAIM (einer gemeinnützigen Organisation, die online Fachwissen zur Barrierefreiheit anbietet), die im Jahr 2023 durchgeführt wurde, wiesen 96,3 % der Webseiten irgendeine Form der Nichteinhaltung der Web Content Accessibility Guidelines (WCAG) auf. Wenn Sie sich die Daten genauer ansehen, werden Sie feststellen, dass sich die meisten Probleme in sechs Kategorien einteilen lassen: 

• kontrastarmer Text (83.6 %) 
• fehlender alternativer Text zu Bildern (58.2 %) 
• leere Links (50.1 %) 
• fehlende Formulareingabebeschriftungen (45.9 %) 
• leere Schaltflächen (27.5 %) 
• fehlende Dokumentsprache (18.6 %)  

Die Liste ist nicht lang und sie hat sich in den letzten 5 Jahren nicht verändert. Das bedeutet, dass die Behebung nur dieser Fehlerliste den Grad der Web-Zugänglichkeit erheblich verbessern würde. 

In den letzten vier Jahren ist die Anzahl der Seiten mit erkennbaren WCAG-Fehlern von 97,8 % nur um 1,5 % zurückgegangen. Es ist zu bedenken, dass diese Zahlen nur Probleme abdecken, die automatisch erkannt werden können – das bedeutet, dass der tatsächliche WCAG-Konformitätsgrad sogar noch niedriger war. 

Die Autoren des Berichts weisen darauf hin, dass die Einhaltung der Barrierefreiheit in einigen Sektoren, wie z. B. Regierung und Bildung, weitaus besser ist als in anderen. Dennoch ist das Gesamttempo der Fortschritte bei der Barrierefreiheit im Internet nicht besonders groß. Es bleibt noch viel zu tun, um das Internet für alle zugänglich zu machen. 

KI-Unterstützung für Content-Ersteller 

Bereits 2016 führte Facebook einen Mechanismus ein, der Bildern automatisch generierten Alternativtext hinzufügt, wenn der Benutzer keinen bereitgestellt hat. Angesichts der Tatsache, dass dieses Problem zu den größten im WebAIM-Bericht hervorgehobenen Problemen gehörte, sollte dies als bedeutender Schritt hin zu einem besseren und zugänglicheren Internet angesehen werden. 

Schauen wir uns an, wie es im Jahr 2023 funktioniert und ob dieser Mechanismus die in ihn gesetzten Hoffnungen erfüllt. Für den ersten Test verwenden wir zwei einfache Bilder, die auf Facebook hochgeladen werden, ohne dass dafür Alternativtexte angegeben werden. Dann prüfen wir den von Facebook bereitgestellten Alternativtext und beurteilen, ob er hilfreich ist oder nicht. 

Quelle 

In diesem Fall lautete der von Facebook bereitgestellte Text „könnte ein Bild von Pizza und Tomate sein“. Dieser Text ist zufriedenstellend und gültig. Wie Sie sehen können, habe ich tatsächlich ein Bild einer Pizza mit einigen Tomaten bereitgestellt. 

Versuchen wir mal ein anderes Bild. 

Quelle 
 Für das Bild oben hat Facebook den folgenden Alternativtext generiert: „Könnte ein Bild von Saft und einer Karaffe sein.“ Beim zweiten Mal haben wir den zweiten Erfolg, da wir einen Alternativtext erhalten haben, der das bereitgestellte Bild genau beschreibt. Natürlich ist es dieses Mal nicht makellos, da das Bild Limonade statt Saft zeigt, aber das sehen wir mal als Detail an, was das Ergebnis nicht beeinflussen sollte. 

Es ist Zeit für eine etwas schwierigere Aufgabe. Betrachten wir das folgende Bild. 

Quelle 

Der generierte Alternativtext lautet: „Könnte ein Bild einer Person, eines Fahrrads und einer Straße sein.“ Ohne eine Ahnung davon zu haben, in welchem ​​Kontext das Foto verwendet wurde, könnte man sagen, dass der Text wahrscheinlich gut genug ist. Zweifellos gibt es eine Person, die mit einem Fahrrad auf einer Straße steht. Wenn dieses Bild als Illustration für einen Beitrag über das wachsende Netzwerk von Stadtfahrrädern dienen würde, wäre diese Beschreibung ein guter Alternativtext. 

Stellen Sie sich nun vor, Sie schreiben einen Beitrag über das wachsende Problem von Graffiti im städtischen Raum. In diesem Fall wären Sie wahrscheinlich nicht bereit den generierten Alternativtext zu akzeptieren, der sich auf das Fahrrad statt auf das Gebäude im Hintergrund konzentriert. Dann würden Sie wahrscheinlich etwas in der Art von „eine Person steht vor einem Gebäude, dessen Fassade durch Graffiti beschädigt wurde“ als bessere Alternative für das Bild bevorzugen. 

Das letzte Beispiel zeigt, dass automatisch generierte Alternativtexte den Kontext, in dem das Bild verwendet wird, möglicherweise nicht ausreichend berücksichtigen. Bei der Barrierefreiheit im Internet geht es nicht darum, technische Anforderungen oder Richtlinien zu erfüllen. Es geht darum, eine gute Benutzererfahrung für ein möglichst breites Publikum zu schaffen. Es sieht so aus, dass immer noch menschliches Urteilsvermögen erforderlich ist, um Benutzern Vorrang vor technischen Kennzahlen zu geben. 

Auch wenn solche Systeme einige Nachteile haben, sollten sie auf jeden Fall als Schritt in die richtige Richtung gesehen werden. Einen etwas ungenauen Alternativtext zu haben, ist wahrscheinlich immer noch weitaus besser, als ihn überhaupt nicht bereitzustellen. Sie sollten auch bedenken, dass dies erst der Beginn einer neuen Ära KI-gesteuerter Tools ist. Solche Hilfsmittel werden bald nicht nur auf Facebook, sondern mithilfe von Drittanbieter-Erweiterungen auf allen möglichen Webseiten oder sogar in Browsern selbst verfügbar sein. 

KI-Unterstützung für Webentwickler 

Bisher haben wir ein Beispiel dafür behandelt, wie KI-Tools die Barrierefreiheit im Internet aus der Perspektive des Content-Erstellers beeinflussen können. Automatisch generierte Alternativtexte sollten als großer Fortschritt betrachtet werden, aber seien wir ehrlich: Ohne die Beteiligung von Programmierern, die tatsächlich Webseiten erstellen, werden wir unser ultimatives Ziel, das Web vollständig zugänglich zu machen, nicht erreichen. 

Ich werde nun versuchen herauszufinden, wie künstliche Intelligenz den Webentwicklern bei ihren täglichen Aufgaben unterstützen kann. Um zu demonstrieren, wie unterschiedliche KI-Tools eingesetzt werden können, habe ich zwei Fälle aufgestellt. Diese Use Cases ahmen reale Szenarien nach. 

Use Case 1: Schlechten Code in guten (zugänglichen) umwandeln 

Stellen Sie sich vor, Sie haben eine sehr alte Webseite und Ihr Ziel ist es, sie moderner und zugänglicher zu machen. Ihre Stakeholder kamen zu dem Schluss, dass der Aufbau einer neuen Lösung von Grund auf nicht rentabel ist. Deshalb versuchen Sie, so viel wie möglich mit der vorhandenen Codebasis zu erreichen. 

Als Beispiel dient die Webseite des W3C-Konsortiums. Diese Webseite wurde aus pädagogischen Gründen erstellt – um zu zeigen, wie Webseiten nicht erstellt werden sollten. Es verstößt völlig gegen die Barrierefreiheitsrichtlinien. 

Konzentrieren wir uns auf das Navigationsmenü, das so aussieht: 

Codiert ist sie folgendermaßen: 

<table>
  <tbody>
    [...]
    <tr>
      <td id="home"><a href="javascript:location.href='home.html';"><img src="./img/nav_home.gif"></a></td>
    </tr>
    [...]
    <tr>
      <td id="news"><a href="javascript:location.href='news.html';"><img src="./img/nav_news.gif"></a></td>
    </tr>
    [...]
  </tbody>

Die Lösung: Verwenden Sie ChatGPT 

Nehmen wir für einen Moment an, dass Sie nicht sehr erfahren im Codieren barrierefreier Lösungen sind. Aber Sie verfügen über genügend Wissen, um zu erkennen, dass dieser Code weit von den WCAG-Richtlinien entfernt ist. 

In dieser Situation können Sie sich an ein KI-Tool wie ChatGPT  wenden und um Hilfe bitten. In diesem Beispiel verwende ich die Version 3.5 von ChatGPT, da sie allgemein für jedermann verfügbar ist. Sekunden später ist meine erste Eingabeaufforderung fertig und sieht ungefähr so ​​aus: 

„Kannst du meinen Code verbessern, um ihn zugänglicher zu machen?“ 

ChatGPT hat für uns die folgende Antwort:  
  
“Hier ist die verbesserte Version des Codes”  

<nav>
  <ul>
    <li><a href="home.html">Home Page</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="tickets.html">Tickets</a></li>
    <li><a href="home.html">Home Page</a></li>
    <li><a href="survey.html">Survey</a></li>
  </ul>
</nav>   

Wir erhalten modernen, sauberen und semantischen HTML-Code, der weitaus besser ist als die ursprüngliche Version. Darüber hinaus ist es ChatGPT gelungen, das bildbasierte Menü in sein Textäquivalent umzuwandeln. Mit dieser Resonanz können wir uns auf jeden Fall freuen und markieren diese Aufgabe als erfolgreich erledigt. 

Eine noch bessere Lösung: Bleiben Sie im Code-Editor und verwenden Sie GitHub Copilot 

Der vorherige Fall war ziemlich beeindruckend aber einige mögen sagen, dass er einen Übergang von der Codierungsumgebung zu einem Browser erforderte und für die meisten Programmierer möglicherweise nicht geeignet ist. Versuchen wir mal dies in Frage zu stellen und eine andere Lösung zu finden. Dieses Mal kommt GitHub Copilot zum Spiel. 

Betrachten wir eine sehr ähnliche Situation. Wir überarbeiten eine hypothetische Hauptnavigationskomponente, die vor langer Zeit auf der Grundlage nicht-semantischer div-Elemente erstellt wurde. 

Der anfängliche Code sieht so aus: 

function MainNavigation() {
  return (
    <div>
      <div>
       <div>My Great App</div>
        <div>
          <div>
            <a href="#users">Users</a>
          </div>
          <div>
            <a href="#admin">Admin</a>
          </div>
        </div>
      </div>
    </div>
  );
} 

Um GitHub Copilot auszulösen, schreibe ich die Eingabeaufforderung wie folgt: 

function MainNavigation() {

  // improve accessibility by using semantic elements
   return (
    <div>
      <div>
        <div>My Great App</div>
          [...]
      </div>
    </div>
  );
}

Im nächsten Schritt entferne ich den ungültigen Code, um Platz für KI zu schaffen. Als nächstes ist es an der Zeit, den Cursor in den Hauptteil der Return-Anweisung zu bewegen. 

function MainNavigation() { 
  // improve accessibility by using semantic elements 
  return ( 
  ); 
} 

GitHub Copilot führt seine Aufgabe aus und hier ist das Endergebnis: 

function MainNavigation() { 
  // improve accessibility by using semantic elements 
  return (
    <nav>
      <ul>
        <li>
          <a href="#users">Users</a>
        </li>
        <li>
          <a href="#admin">Admin</a>
        </li>
      </ul>
    </nav>
  );
}

Nach wie vor konnte die KI das Problem zufriedenstellend lösen und die Navigation ist nun mit semantischen Elementen geschrieben. 

Use Case 2: Guten (zugänglichen) Code von Grund auf erstellen 

Das Arbeiten mit einer vorhandenen Codebasis ist durchaus üblich, es gibt jedoch auch Fälle, in denen Sie eine Lösung von Grund auf neu erstellen müssen. Bleiben wir beim sehr anspruchsvollen Beispiel der Hauptnavigation. Stellen Sie sich einen Programmierer vor, der die Grundstruktur für eine solche Navigation schreiben muss und überhaupt keine Ahnung hat, was Barrierefreiheit bedeutet (überraschenderweise ist dies auch nicht so ungewöhnlich). 

Dieser Fall ist schwieriger als der vorherige, da Sie mit einem leeren Blatt Papier (Datei) beginnen. Lassen Sie uns also prüfen, ob die KI damit umgehen kann. 

Das ist unser Ausgangspunkt. Eine sehr grundlegende Struktur einer HTML-Seite, nichts Besonderes. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body> 
</html>

Der Programmierer muss den Cursor nach dem öffnenden Body-Tag platzieren und die Eingabeaufforderung wie folgt schreiben: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body> 
<!-- create accessible navigation --> 
</body> 
</html> 

Zuvor hatte GitHub Copilot eine einfachere Aufgabe. Es erhielt einige Anregungen, mit denen man arbeiten konnte. Diesmal ist da nichts. 

Der von AI geschriebene Code sah folgendermaßen aus: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body> 
  <!-- create accessible navigation --> 
  <nav>
    <ul>
      <li><a href="#home">Home Page</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav> 
</body> 
</html>

Auch hier handelt es sich um eine vollkommen akzeptable Lösung und GitHub Copilot erwies sich durchaus als hilfreich. 

Zusammenfassung 

Wie in diesem Artikel gezeigt wird, haben KI-Tools großes Potenzial, die Barrierefreiheit im Internet insgesamt zu verbessern. Technologie hat die Chance, zu einem echten Game-Changer zu werden, da ihre Auswirkungen so viele verschiedene Bereiche erreichen. Ich habe reale Anwendungsfälle aus der Perspektive von Softwareentwicklern und Content-Erstellern vorgestellt, aber KI hat das Potenzial, weit darüber hinauszugehen. 

Auch unterstützende Technologien wie Screenreader oder sogar Webbrowser könnten durch die Integration von KI verbessert werden, um Benutzern ein besseres Erlebnis zu bieten. Es ist auch leicht vorstellbar, dass KI einen erheblichen Einfluss auf die Entwicklung von Bereichen wie Sprachschnittstellen, Verarbeitung natürlicher Sprache oder Gesten- und Emotionserkennung haben wird. All dies zusammen kann die Art und Weise, wie Menschen mit Einschränkungen mit dem Internet interagieren, neu definieren. Das Interessanteste daran ist die Tatsache, dass wir ganz am Anfang dieser faszinierenden Reise stehen.