Viele von uns kennen den Satz „Hey Google“ nur zu gut. Er war jahrelang der Schlüssel zu unserem digitalen Helfer auf Android-Smartphones. Doch die Technologie entwickelt sich weiter, und Google läutet nun eine neue Ära ein: Der Google Assistent wird schrittweise durch Gemini ersetzt, einen Sprachassistenten, der von leistungsstarker Künstlicher Intelligenz angetrieben wird.
Was bedeutet das für Sie? Lassen Sie mich das Schritt für Schritt und ganz einfach erklären. Ich habe ein Smartphone Samsung Galaxy A53 5G. Auf diesem Smartphone habe ich Gemini installiert und getestet.
Was ist ein Sprachassistent?
Stellen Sie sich einen persönlichen Helfer vor, der in Ihrem Smartphone oder Tablet wohnt. Sie können mit ihm sprechen, ihm Fragen stellen oder Aufgaben geben. Ein Sprachassistent ist genau das: eine Software, die Ihre gesprochene Sprache versteht und darauf reagiert. Er kann für Sie Informationen suchen, Termine eintragen, Timer stellen oder einfach nur einen Witz erzählen – alles auf Zuruf.
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
Barrierefreie Webseiten-Navigation programmieren mit künstlicher Intelligenz
Barrierefreiheit im Web bedeutet, dass alle Menschen – unabhängig von körperlichen oder geistigen Einschränkungen – Inhalte und Funktionen nutzen können. In diesem Artikel zeige ich, wie man mithilfe von HTML und CSS ein barrierefreies Webformular erstellt. Außerdem erkläre ich, warum bestimmte Maßnahmen wichtig sind und welche Personengruppen davon profitieren.
Was ist ein Webformular?
Ein Webformular ist ein Bereich auf einer Webseite, in dem man Informationen eingeben kann. Du kennst das bestimmt von Anmeldungen, Bestellungen oder Kontaktseiten. Typische Felder in einem Formular sind:
Vorname und Nachname
Adresse
Telefonnummer
E-Mail-Adresse
Man trägt etwas ein und klickt dann meist auf einen Button wie „Absenden“. Die Daten werden dann an den Anbieter geschickt – zum Beispiel an ein Unternehmen oder eine Behörde.
Formulare helfen dabei, Informationen zu sammeln. Damit sie gut funktionieren, müssen sie klar verständlich, leicht bedienbar und für alle Menschen zugänglich sein.
Warum ist das Webformular barrierefrei?
Ein Formular ist barrierefrei, wenn es auch von Menschen mit Behinderungen bzw. körperlichen Einschränkungen problemlos genutzt werden kann – zum Beispiel:
Menschen mit Sehbehinderung oder Blindheit
Menschen mit motorischen Einschränkungen
Menschen mit kognitiven oder Lernschwierigkeiten
Ältere Menschen, die nicht so vertraut mit Technik sind
Menschen, die keine Maus bedienen können und nur die Tastatur nutzen
Das Formular, das in diesem Blogartikel mit HTML und CSS programmiert wird, berücksichtigt genau diese Bedürfnisse. Es enthält verschiedene Merkmale, die die Bedienung erleichtern:
Verknüpfte Labels: Jedes Texteingabefeld ist mit einem Label verbunden. Das hilft vor allem Screenreader-Nutzer:innen.
Tastaturkürzel (Access Keys): Damit kann man per Tastatur schnell zum gewünschten Feld springen – ganz ohne Maus.
Visuelles Feedback bei Fokus: Wenn ein Feld aktiv ist, wird es gelb hinterlegt.
Hoher Kontrast beim Absenden-Button: Bei Fokus mit gelbem Hintergrund und schwarzer Schrift.
All diese Funktionen sorgen dafür, dass mehr Menschen selbstständig das Formular ausfüllen können – ohne Hürden.
Ein Bild, das symbolisiert, dass ein Webformular mithilfe künstlicher Intelligenz erstellt wurde.
