Dieser Blogartikel führt Sie durch den Prozess, wie Sie die Künstliche Intelligenz von Google nutzen, um eine voll funktionsfähige und barrierefreie Navigation für Ihre Webseite zu programmieren. Ich erkläre, wie ein präziser Prompt Sie dabei unterstützt.
Barrierefreiheit im Web ist ein Grundpfeiler einer inklusiven digitalen Welt. Alle Menschen sollen das Internet nutzen können, unabhängig von körperlichen Einschränkungen. Doch wie lassen sich die komplexen Anforderungen der Barrierefreiheit effizient und präzise umsetzen? 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ären wir, 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 tiefgreifende Programmierkenntnisse.
Was ist eine Webseiten-Navigation?
Die Navigation ist das Herzstück jeder Website und dient als Wegweiser für Besucher. Sie besteht typischerweise aus Links wie „Startseite“, „Über uns“, „Kontakt“ und weiteren Unterseiten und ist meist im Kopfbereich oder in der Seitenleiste einer Website platziert. Eine gut strukturierte Navigation verbessert nicht nur die allgemeine Nutzerfreundlichkeit, sondern ist auch entscheidend für die Zugänglichkeit – insbesondere 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 problemlos bedienen können. Dies ist essenziell für:
- Tastaturbenutzer: Personen, die nicht mit der Maus navigieren können.
- Screenreader-Nutzer: Menschen mit Sehbehinderungen, die sich Inhalte vorlesen lassen.
- Menschen mit Sehbehinderungen: Die auf klare visuelle Kontraste und deutliche Fokusanzeigen angewiesen sind.
Eine wirklich barrierefreie Navigation erfüllt daher spezifische 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 zur Orientierung.
- Sie unterstützt Screenreader mit entsprechenden ARIA-Labels.
- Sie nutzt gegebenenfalls Tastenkürzel für eine schnellere Bedienung.
Was ist ein Screenreader – Ihr Ohr für das digitale Erlebnis?
Stellen Sie sich vor, Sie könnten einen Computer bedienen, ohne den Bildschirm zu sehen. Genau das ermöglicht ein Screenreader! Es handelt sich um eine spezielle Software, die für viele Menschen eine unschätzbare Brücke zur digitalen Welt darstellt. Im Grunde ist ein Screenreader wie ein „Dolmetscher“ für Bildschirminhalte: Er übersetzt alles, was auf dem Bildschirm angezeigt wird – seien es Texte, Überschriften, Links, Schaltflächen oder Formularfelder – in eine Form, die für Menschen mit Sehbehinderung oder Blindheit zugänglich ist.
Dabei gibt es hauptsächlich zwei Wege, wie ein Screenreader diese Informationen vermittelt:
Gesprochene Sprache: Dies ist die häufigste Funktion. Der Screenreader liest den gesamten Bildschirminhalt oder ausgewählte Bereiche laut vor. Nutzer können mit der Tastatur navigieren und sich die gewünschten Elemente vorlesen lassen, um Webseiten zu durchsuchen, E-Mails zu schreiben oder Software zu bedienen.
Brailleschrift: Für Menschen, die Braille lesen können, kann der Screenreader die Informationen auch an eine sogenannte Braillezeile senden. Das ist ein spezielles Ausgabegerät, das Text als taktile Braillepunkte darstellt, die man mit den Fingern erfühlen kann.
Damit ein Screenreader seine Aufgabe optimal erfüllen kann, ist es entscheidend, dass Webseiten, Software und Apps von ihren Entwicklern sauber und semantisch korrekt programmiert wurden. Das bedeutet, dass der Code nicht nur visuell ansprechend ist, sondern auch eine logische Struktur aufweist und wichtige Informationen (wie z.B. Alternativtexte für Bilder oder ARIA-Rollen für interaktive Elemente) enthält. Nur so kann der Screenreader die Inhalte richtig erkennen, einordnen und präzise an den Nutzer weitergeben. Er ist somit ein unverzichtbares Werkzeug für eine wirklich inklusive digitale Teilhabe.
Was ist künstliche Intelligenz (KI) – und wie helfen Tools wie Google AI Studio?
Künstliche Intelligenz (KI) ist eine faszinierende Technologie, die Computern ermöglicht, Aufgaben zu erledigen, für die normalerweise menschliches Denken und Lernen nötig wären. Stellen Sie sich vor, ein Computer könnte nicht nur rechnen, sondern auch Texte verstehen, Muster in Daten erkennen, Fragen beantworten oder sogar kreativ werden – das ist KI! Dazu gehören Fähigkeiten wie Sprachverarbeitung, Bilderkennung oder das Lösen komplexer Probleme.
Google AI Studio ist eine Plattform, die es Ihnen ganz einfach macht, mit den neuesten KI-Modellen von Google zu experimentieren und Ihre eigenen KI-Anwendungen zu entwickeln. Es ist ein mächtiges Werkzeug, mit dem Sie Texte generieren, Code schreiben, Bilder erzeugen und viele weitere intelligente Funktionen nutzen können. Ähnlich wie ChatGPT von OpenAI es ermöglicht, in natürlicher Sprache zu kommunizieren und detaillierte Antworten zu erhalten, bietet Google AI Studio Ihnen Zugang zu den Modellen von Google, um beispielsweise Code zu generieren, Barrierefreiheitsanforderungen zu prüfen oder sogar didaktisch zu unterstützen, indem es komplexe Themen erklärt.
Der Schlüssel zur effektiven Nutzung solcher KI-Tools liegt in einem klar formulierten Prompt. Ein Prompt ist einfach gesagt eine genaue Anweisung oder Frage, die Sie der KI geben. Wenn Sie einen Prompt präzise formulieren, führt dies zu erstaunlich hilfreichen und präzisen Ergebnissen – wie das folgende Beispiel zeigen wird, wo wir eine barrierefreie Navigationsstruktur generieren lassen.
Die Barrierefreiheit der Google KI kann in diesem Blogartikel nachgelesen werden:
Googles KI: Google AI Studio und Barrierefreiheit
Der KI-Prompt
Um eine barrierefreie Navigation zu generieren, wurde folgender Prompt an Google AI Studio ü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 im Prompt formulierten 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>
<!-- Verknüpft die CSS-Datei für die Gestaltung -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Hauptnavigation der Webseite -->
<!-- aria-label hilft Screenreadern, den Zweck dieser Navigation zu verstehen -->
<nav aria-label="Hauptnavigation">
<ul>
<!-- Menüeintrag "Startseite" -->
<li>
<!-- accesskey="s" ermöglicht den schnellen Zugriff über Tastenkombinationen (z.B. Alt+S) -->
<a href="index.html" accesskey="s">
<!-- Span-Element für die Unterstreichung des Accesskey-Buchstabens -->
<span class="buchstabe_unterstreichen">S</span>tartseite
</a>
</li>
<!-- Menüeintrag "Über uns" -->
<li>
<a href="index.html" accesskey="u">
<span class="buchstabe_unterstreichen">Ü</span>ber uns
</a>
</li>
<!-- Menüeintrag "Kontakt" -->
<li>
<a href="index.html" accesskey="k">
<span class="buchstabe_unterstreichen">K</span>ontakt
</a>
</li>
</ul>
</nav>
<main>
<h1>Willkommen auf der Startseite</h1>
<p>Dies ist der Hauptinhalt der Seite. Nutzen Sie die Navigation oben, um sich zu orientieren.</p>
</main>
</body>
</html>
CSS
/* Grundlegende Stildefinitionen für die Navigation */
nav {
background-color: #f0f0f0; /* Heller Hintergrund für die Navigation */
padding: 1rem; /* Innenabstand um die gesamte Navigation */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Leichter Schatten für bessere Abgrenzung */
}
/* Stildefinitionen für die ungeordnete Liste innerhalb der Navigation */
nav ul {
list-style: none; /* Entfernt die Standard-Listenpunkte */
padding: 0; /* Entfernt den Standard-Innenabstand des ul-Elements */
margin: 0; /* Entfernt den Standard-Außenabstand des ul-Elements */
display: flex; /* Zeigt die Listenelemente nebeneinander an (horizontale Navigation) */
flex-wrap: wrap; /* Ermöglicht das Umbrechen der Elemente auf kleinere Bildschirme */
gap: 1.5rem; /* Abstand zwischen den einzelnen Menüeinträgen */
justify-content: center; /* Zentriert die Menüeinträge horizontal */
}
/* Stildefinitionen für einzelne Listenelemente (Menüpunkte) */
nav li {
/* display: inline; wurde durch flex-box im ul ersetzt, daher hier nicht zwingend nötig */
}
/* Stildefinitionen für die Links in der Navigation */
nav a {
text-decoration: none; /* Entfernt die Standard-Unterstreichung der Links */
color: #333; /* Dunkle Schriftfarbe für gute Lesbarkeit */
padding: 0.7rem 1.2rem; /* Innenabstand für die Links, damit sie größer und klickbarer/fokussierbarer sind */
display: inline-block; /* Ermöglicht die korrekte Anwendung von Padding und vertikalem Margin */
border-radius: 5px; /* Leicht abgerundete Ecken für die Links */
transition: background-color 0.2s ease, color 0.2s ease; /* Sanfter Übergang bei Hover/Fokus */
}
/* Stil für den fokussierten Link (per Tab, Accesskey oder Klick) */
/* Dies ist entscheidend für Menschen mit Sehbehinderung und Tastaturnutzer */
nav a:focus,
nav a:hover { /* Auch beim Hovern einen visuellen Hinweis geben */
background-color: yellow; /* Gelber Hintergrund beim Fokus/Hover */
color: black; /* Schwarze Schriftfarbe beim Fokus/Hover */
outline: 3px solid black; /* Dicker, schwarzer Rahmen um den fokussierten Link */
outline-offset: 2px; /* Abstand des Rahmens zum Link, um den Text nicht zu überlappen */
text-decoration: none; /* Stellt sicher, dass die Unterstreichung ggf. entfernt wird */
}
/* Stil für unterstrichene Buchstaben (für Accesskey-Hinweise) */
.buchstabe_unterstreichen {
text-decoration: underline; /* Unterstreicht den spezifischen Buchstaben */
font-weight: bold; /* Macht den Accesskey-Buchstaben zusätzlich etwas auffälliger */
}
/* Optional: Grundlegende Stile für den Body und den Main-Bereich, um ein komplettes Layout zu simulieren */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f8f8f8;
color: #333;
}
main {
max-width: 960px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
Schlussbemerkung
Wie wir gesehen haben, kann Künstliche Intelligenz ein außerordentlich wertvolles Werkzeug sein, um die digitale Barrierefreiheit zu fördern. Insbesondere bei der Erstellung von Code für barrierefreie Webseiten – wie einer zugänglichen Navigation – kann KI konkret und sinnvoll helfen. Der Schlüssel liegt darin, zu wissen, wie man einen Prompt präzise formuliert, um die spezifischen Anforderungen an semantisches HTML, Tastaturfreundlichkeit, Screenreader-Optimierung und visuelle Fokusanzeigen zu kommunizieren.
Die Nutzung von KI-Tools wie Google AI Studio oder ähnlichen Sprachmodellen ermöglicht es nicht nur erfahrenen Entwicklern, effizienter zu arbeiten, sondern auch Einsteigern, komplexe Barrierefreiheitskriterien korrekt umzusetzen, selbst ohne tiefes Fachwissen in der Webentwicklung. Dies spart nicht nur Zeit und Ressourcen, sondern trägt maßgeblich dazu bei, eine inklusive digitale Welt zu schaffen, in der alle Menschen gleichberechtigt teilhaben können. Wer heute auf KI im Kontext der Barrierefreiheit setzt, investiert in eine zukunftssichere und gesellschaftlich verantwortungsvolle Webentwicklung.
Wenn Sie Fragen zu den obigen Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463.
Ein Kommentar zu „Barrierefreie Webseiten-Navigation programmiert mit einem KI-Prompt für Google AI Studio“