Barrierefreie Webseiten-Navigation programmieren mit künstlicher Intelligenz (KI) – Anleitung

Barrierefreiheit im Web ist wichtig – denn alle Menschen sollen das Internet nutzen können, unabhängig von körperlichen Einschränkungen. In diesem Artikel zeige ich, wie man mit Hilfe künstlicher Intelligenz (KI) eine barrierefreie Navigation für eine Website erstellen kann. Schritt für Schritt erkläre ich, was eine Webseiten-Navigation ist, warum sie barrierefrei sein sollte und wie ein sogenannter KI-Prompt aussieht. Anschließend sehen wir uns den automatisch generierten HTML- und CSS-Code an. So kann jeder nachvollziehen, wie moderne Technik bei der Webentwicklung hilft – ganz ohne Programmierkenntnisse.

Was ist eine Webseiten-Navigation?

Die Navigation ist ein zentrales Element jeder Website. Sie dient dazu, den Besucher:innen Orientierung zu geben
und ihnen zu ermöglichen, sich schnell und gezielt durch die Inhalte zu bewegen. Typischerweise besteht sie aus Links
wie „Startseite“, „Über uns“, „Kontakt“ oder weiteren Unterseiten und ist meist im Kopfbereich oder in der Seitenleiste
einer Website zu finden.

Eine gut strukturierte Navigation verbessert nicht nur die Nutzerfreundlichkeit, sondern ist auch entscheidend für die
Zugänglichkeit – besonders für Menschen mit Behinderungen.

Warum ist die Webseiten-Navigation barrierefrei?

Eine barrierefreie Navigation stellt sicher, dass alle Menschen – unabhängig von körperlichen oder technischen Einschränkungen – eine Website bedienen können. Dazu zählen u.?a.:

• Tastaturbenutzer:innen, die nicht mit der Maus navigieren können
• Screenreader-Nutzer:innen, die sich Inhalte vorlesen lassen
• Menschen mit Sehbehinderungen, die auf visuelle Kontraste und Fokusanzeigen angewiesen sind

Eine barrierefreie Navigation erfüllt daher bestimmte Kriterien:

• Sie ist per Tastatur zugänglich (z.B. mit der Tabulatortaste)
• Sie nutzt semantisch korrektes HTML (z.B. <nav>, <ul>, <li>)
• Sie verwendet sichtbare Fokusanzeigen für Orientierung
• Sie unterstützt Screenreader mit entsprechenden ARIA-Labels
• Sie nutzt ggf. Tastenkürzel für schnellere Bedienung

Was ist ein Screenreader?

Ein Screenreader ist eine Software, die den Bildschirminhalt in gesprochene Sprache oder Brailleschrift
übersetzt. Menschen mit Sehbehinderung oder Blindheit können so Webseiten und Anwendungen bedienen. Damit das funktioniert,
muss der HTML-Code sauber strukturiert und mit zusätzlichen Informationen (wie ARIA-Rollen) angereichert sein.
Eine korrekt gekennzeichnete Navigation erleichtert es dem Screenreader, diese als solche zu erkennen und korrekt anzukündigen.

Was ist künstliche Intelligenz – und was ist ChatGPT?

Künstliche Intelligenz (KI) beschreibt Systeme, die Aufgaben übernehmen können, die normalerweise menschliche Intelligenz erfordern – z. B. Textverstehen, Mustererkennung oder Sprachverarbeitung.

ChatGPT ist ein KI-Sprachmodell von OpenAI, das in natürlicher Sprache kommunizieren und auf komplexe Fragen antworten kann. Es eignet sich hervorragend dazu, Code zu generieren, Barrierefreiheitsanforderungen umzusetzen und dabei auch didaktisch zu helfen.

Ein klar formulierter Prompt (also eine Anweisung an die KI) führt zu erstaunlich hilfreichen Ergebnissen –
wie das folgende Beispiel zeigt.

Der KI-Prompt

Folgender Prompt wurde an ChatGPT übergeben:

Erstelle mir bitte den HTML- und CSS-Code für eine barrierefreie Website-Navigation.
Ich möchte als Ergebnis eine w3c-valide HTML-Datei.
Die Navigation soll semantisches HTML verwenden (z.?B. <nav>, <ul>, <li>, <a>),
tastaturfreundlich sein (Tab-Reihenfolge, Fokus-Stile) und für Screenreader optimiert sein (ARIA-Labels).
Füge Tastenkürzel hinzu mit dem Attribut accesskey, bei denen die Buchstaben im Menü unterstrichen dargestellt werden.
Verwende dafür die CSS-Klasse .buchstabe_unterstreichen mit text-decoration: underline.
Die Tastenkürzel müssen zu den Menüeinträgen passen.
Für Menschen mit Sehbehinderung soll der fokussierte Link (per Tab oder Accesskey) eine gelbe Hintergrundfarbe, schwarze Schriftfarbe sowie einen sichtbaren Fokusrahmen mit outline: 3px solid black und outline-offset: 2px erhalten.
Die Navigation soll drei Menüeinträge haben: „Startseite“, „Über uns“, „Kontakt“.
Alle Links sollen auf dieselbe HTML-Datei verweisen, die gerade erstellt wird – also alle href-Attribute zeigen auf dieselbe Datei, zum Beispiel index.html.
Der Code soll sauber und verständlich kommentiert sein.

Der KI-generierte Code

Hier ist der automatisch generierte HTML- und CSS-Code, der alle Anforderungen erfüllt:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Barrierefreie Navigation</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <nav aria-label="Hauptnavigation">
    <ul>
      <li>
        <a href="index.html" accesskey="s">
          <span class="buchstabe_unterstreichen">S</span>tartseite
        </a>
      </li>
      <li>
        <a href="index.html" accesskey="u">
          <span class="buchstabe_unterstreichen">Ü</span>ber uns
        </a>
      </li>
      <li>
        <a href="index.html" accesskey="k">
          <span class="buchstabe_unterstreichen">K</span>ontakt
        </a>
      </li>
    </ul>
  </nav>
</body>
</html>

CSS

nav {
  background-color: #f0f0f0;
  padding: 1rem;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
}
nav li {
  display: inline;
}
nav a {
  text-decoration: none;
  color: #000;
  padding: 0.5rem 1rem;
  display: inline-block;
}
nav a:focus {
  background-color: yellow;
  color: black;
  outline: 3px solid black;
  outline-offset: 2px;
}
.buchstabe_unterstreichen {
  text-decoration: underline;
}

Schlussbemerkung

Künstliche Intelligenz kann bei der Erstellung barrierefreier Webseiten konkret und sinnvoll helfen – insbesondere wenn man weiß, wie man den Prompt richtig formuliert. So lassen sich Accessibility-Kriterien effizient und korrekt umsetzen, selbst ohne tiefes Fachwissen in Webentwicklung.

Die Kombination aus technischem Verständnis, Barrierefreiheitsbewusstsein und cleverem KI-Einsatz eröffnet neue Möglichkeiten für inklusive Webentwicklung – und spart dabei auch noch Zeit.

Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Weiterlesen

Barrierefreies Webformular programmieren mit künstlicher Intelligenz (KI) – Anleitung
Experten für digitale Barrierefreiheit: Was sie wirklich können müssen