Ein barrierefreies Webformular mit einem KI-Prompt von Google AI Studio programmieren

In diesem Blogartikel wird erklärt wie man mit der Künstlichen Intelligenz Google AI Studio ein barrierefreies Webformular programmieren kann.

In der heutigen digitalen Welt ist Barrierefreiheit nicht nur eine ethische Verpflichtung, sondern auch ein entscheidender Faktor für den Erfolg einer Website. Jedes Detail zählt, und Webformulare sind oft die Schnittstelle, an der Nutzer mit deiner Marke interagieren. Ein barrierefreies Formular stellt sicher, dass jeder, unabhängig von seinen Fähigkeiten, Informationen eingeben und senden kann.

Was wäre, wenn du den Prozess der Erstellung eines solchen Formulars beschleunigen könntest? Genau das haben wir getan, indem wir Google AI Studio um Hilfe gebeten haben. In diesem Artikel zeigen wir dir, wie ein einfacher KI-Prompt zu einem vollständig funktionierenden und barrierefreien HTML- und CSS-Formular führte.

Was ist ein Webformular?

Ein Webformular ist im Wesentlichen ein digitaler Fragebogen auf einer Webseite, der es Benutzern ermöglicht, Informationen einzugeben und an den Server zu senden. Du kennst sie von Online-Shops (Bestellformulare), Registrierungen für Newsletter oder der Eingabe deiner Login-Daten. Sie bestehen typischerweise aus Eingabefeldern (für Text, Zahlen, E-Mails), Auswahllisten, Checkboxen und einem „Absenden“-Button.

Besonders wichtig sind Webformulare auch bei der Kontaktaufnahme mit Behörden und Ämtern. Ob es um die Beantragung eines Dokuments, die Meldung eines Anliegens oder die Übermittlung von persönlichen Daten geht – immer häufiger werden diese Prozesse online über Webformulare abgewickelt. Hier ist Barrierefreiheit von größter Bedeutung, damit alle Bürgerinnen und Bürger uneingeschränkt Zugang zu öffentlichen Dienstleistungen haben.

Im Hintergrund wird künstliche Intelligenz angedeutet im Vordergrund sieht man ein barrierefreies Formular

„Ein barrierefreies Webformular mit einem KI-Prompt von Google AI Studio programmieren“ weiterlesen

Gemini: Aus dem Google Assistent wird ein barrierefreier Sprachassistent mit Künstlicher Intelligenz

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.

Ein Mann mit einer Hand bedient sein Smartphone per Sprache und spricht lächelnd mit dem KI-Assistenten Gemini.
„Gemini: Aus dem Google Assistent wird ein barrierefreier Sprachassistent mit Künstlicher Intelligenz“ weiterlesen

Barrierefreiheit und Künstliche Intelligenz: Der komplette Leitfaden (nach EN 301 549 + WCAG 2.2)

Künstliche Intelligenz (KI) ist überall. Von textbasierten Modellen wie ChatGPT und Google AI Studio über kreative Bildgeneratoren bis hin zu intelligenten Assistenten – moderne KI-Tools und diese neue Technologie verändern unseren digitalen Alltag rasant. Doch während die faszinierenden Möglichkeiten bestaunt werden, wird eine entscheidende Frage oft übersehen: Ist diese Technologie wirklich für alle Menschen zugänglich und sorgt sie für digitale Teilhabe?

Für Millionen von Menschen mit Behinderungen lautet die Antwort oft „Nein“. Eine KI, die nicht barrierefrei ist, schließt Nutzerinnen und Nutzer von wichtigen digitalen Angeboten aus, schafft neue digitale Barrieren und verstärkt bestehende Hürden. Das muss nicht sein. Für Unternehmen, die KI-Lösungen entwickeln oder einsetzen, entsteht hier eine doppelte Verantwortung: eine ethische und bald auch eine rechtliche.

Dieser Artikel erklärt, was eine künstliche Intelligenz erfüllen muss, um umfassend barrierefrei und inklusiv zu sein. Als Leitfaden dienen die wichtigsten Prüfschritte und Erfolgskriterien der europäischen Norm EN 301 549 und der WCAG. Folgende Anforderungen für spezifische Nutzergruppen stehen dabei im Fokus:

  • Blinde Menschen (Nutzung mit Screenreader)
  • Menschen mit Sehbehinderung
  • Menschen mit Farbfehlsichtigkeit
  • Menschen mit motorisch eingeschränkten Händen
Ein blinder Mensch interagiert mit einem Bildschirm, der Symbole für die KI-Anwendungen ChatGPT und Google AI sowie das internationale Symbol für Barrierefreiheit anzeigt
Ein blinder Mensch interagiert mit einem Bildschirm, der Symbole für die KI-Anwendungen ChatGPT und Google AI sowie das internationale Symbol für Barrierefreiheit anzeigt

„Barrierefreiheit und Künstliche Intelligenz: Der komplette Leitfaden (nach EN 301 549 + WCAG 2.2)“ weiterlesen

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
Ein Männchen, eine Webseite mit barrierefreier Navigation, ein KI-Prompt, ein Lautsprecher und eine Wolke in der AI steht
Barrierefreie Webseiten-Navigation programmieren mit künstlicher Intelligenz

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

Barrierefreies Webformular programmieren mit künstlicher Intelligenz (KI) – Anleitung

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 Webformular, ein Männchen als Symbol für künstliche Intelligenz. Schrift: Barrierefrei Webformular KI
Ein Bild, das symbolisiert, dass ein Webformular mithilfe künstlicher Intelligenz erstellt wurde.

„Barrierefreies Webformular programmieren mit künstlicher Intelligenz (KI) – Anleitung“ weiterlesen

Wie barrierefrei ist die künstliche Intelligenz ChatGPT im Betriebssystem Windows 11

In diesem Blogartikel geht es darum, wie Menschen mit verschiedenen Behinderungen die künstliche Intelligenz ChatGPT unter Windows 11 bedienen können. Der Fokus liegt auf Barrierefreiheit – also wie gut die Software für alle Menschen nutzbar ist.

Was ist künstliche Intelligenz?

Künstliche Intelligenz, abgekürzt KI, bedeutet: Ein Computerprogramm kann Dinge tun, die sonst Menschen mit ihrem Verstand machen – zum Beispiel Texte schreiben, Fragen beantworten oder Zusammenhänge erkennen.

ChatGPT ist so ein KI-Programm. Man kann ihm Fragen stellen oder Aufgaben geben – und es antwortet in ganzen Sätzen, fast wie ein Mensch.

In diesem Blogartikel geht es darum, wie Menschen mit verschiedenen Behinderungen die künstliche Intelligenz ChatGPT unter Windows 11 nutzen können.

Der Fokus liegt auf Barrierefreiheit – also darauf, wie gut die Software für alle Menschen bedienbar ist.

Barrierefreiheit bei ChatGPT im Betriebssystem Windows 11. Rollstuhlsymbol. ChatGPT-Symbol. Windows-Logo
Barrierefreiheit von der Künstlichen Intelligenz ChatGPT im Betriebssystem Windows 11

„Wie barrierefrei ist die künstliche Intelligenz ChatGPT im Betriebssystem Windows 11“ weiterlesen

Blinde Menschen bedienen die künstliche Intelligenz ChatGPT – Eine ausführliche Anleitung

Moderne Technik macht es möglich: Auch blinde Menschen können heute ganz selbstverständlich Computer und sogar künstliche Intelligenz, abgekürzt KI, wie ChatGPT nutzen. Für viele Blinden in Deutschland bedeutet der Einsatz von KI-Anwendungen einen wichtigen Schritt in Richtung gleichberechtigter digitaler Teilhabe. In diesem Artikel erkläre ich, wie das funktioniert – Schritt für Schritt, einfach erklärt.

Was ist künstliche Intelligenz (KI)?

Künstliche Intelligenz – kurz KI – ist eine Technik, bei der Computer so programmiert werden, dass sie „mitdenken“ können. Das bedeutet: Sie lernen aus Beispielen, erkennen Zusammenhänge und geben Antworten oder Lösungen, die sinnvoll erscheinen.

Ein gutes Beispiel ist ChatGPT. Diese KI wurde mit sehr vielen Texten aus dem Internet trainiert. Dadurch kann sie Sprache verstehen und eigene Texte formulieren – fast so, als würde man mit einem echten Menschen sprechen.

KI kann also Fragen beantworten, Texte schreiben, Zusammenfassungen erstellen oder sogar Geschichten erzählen – je nachdem, was man eingibt.

Ein blinder Mann sitzt vor einem Laptop und bedient die künstliche Intelligenz ChatGPT
Ein blinder Mann sitzt vor einem Laptop und bedient die künstliche Intelligenz ChatGPT

„Blinde Menschen bedienen die künstliche Intelligenz ChatGPT – Eine ausführliche Anleitung“ weiterlesen

Künstliche Intelligenz und digitale Barrierefreiheit – Stand im Jahr 2025

In diesem Blogartikel wird untersucht, ob der Einsatz von künstlicher Intelligenz sich lohnt oder nicht. Vielleicht können ja genau die richtigen digitalen Tools und moderne Technologie dabei helfen, Barrieren abzubauen und digitale Zugänglichkeit für alle deutlich zu verbessern.

Das Internet und digitale Angebote sollten für alle Menschen zugänglich sein. Doch viele Webseiten, Software, Apps und digitale Inhalte sind nicht barrierefrei. Künstliche Intelligenz, abgekürzt KI, kann helfen, digitale Barrieren abzubauen. Doch wie genau funktioniert das? In diesem Artikel erkläre ich, was KI und digitale Barrierefreiheit sind und wie KI helfen kann, digitale Inhalte für alle Menschen zugänglicher zu machen.

Was ist künstliche Intelligenz?

Künstliche Intelligenz, abgekürzt KI, ist eine Technologie, die Maschinen dazu befähigt, Aufgaben zu erledigen, die normalerweise menschliche Intelligenz erfordern. Dazu gehören zum Beispiel das Verstehen von Sprache, das Erkennen von Bildern oder das Treffen von Entscheidungen. KI basiert auf Daten und Algorithmen, die es den Maschinen ermöglichen, aus Erfahrungen zu lernen und sich zu verbessern.

Was ist digitale Barrierefreiheit?

Digitale Barrierefreiheit bedeutet, dass alle Menschen, auch Menschen mit Behinderungen oder anderen körperlichen Einschränkungen, Webseiten, Software, Apps und Betriebssysteme uneingeschränkt bedienen und nutzen können. Anders ausgedrückt: Es geht um Webseiten, Software und Apps ohne Barrieren.

Symbol für künstliche Intelligenz und Symbol für Barrierefreiheit Einstellungen. Monitor mit Rollstuhlfahrer
Künstliche Intelligenz und digitale Barrierefreiheit

„Künstliche Intelligenz und digitale Barrierefreiheit – Stand im Jahr 2025“ weiterlesen

Digitale Barrierefreiheit – warum wird das bis 2025 wichtig?

In diesem Blogartikel wird erklärt, was digitale Barrierefreiheit ist und warum das im Jahr 2025 wichtig wird. 

Digitale Barrierefreiheit bedeutet, dass alle Menschen, unabhängig von ihren Fähigkeiten oder Einschränkungen, digitale Inhalte wie Webseiten, Apps und Software problemlos nutzen können. Dies ist wichtig, da immer mehr Menschen online arbeiten, kommunizieren und einkaufen. Ab 2025 wird dies besonders wichtig, da es gesetzliche Regelungen gibt, die Unternehmen dazu verpflichten, ihre digitalen Angebote barrierefrei zu gestalten.

Was ist digitale Barrierefreiheit?

Für eine inklusive Zukunft muss digital der Zugang für alle Menschen gewährleistet sein. Inklusion digital bedeutet, dass Personen mit und ohne Behinderung die gleichen Websites, Software und Apps nutzen.

Digitale Barrierefreiheit bedeutet, dass Webseiten, Software und Apps so entwickelt werden, dass sie für alle Menschen, auch für Menschen mit Behinderungen und anderen körperlichen Einschränkungen bedienbar sind. Dazu gehört zum Beispiel, dass blinde Menschen eine Webseite mit einem Screenreader lesen können oder dass Videos Untertitel haben, damit auch gehörlose Menschen den Inhalt der Videos wahrnehmen können.

Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„Digitale Barrierefreiheit – warum wird das bis 2025 wichtig?“ weiterlesen

Barrierefreie Web-Entwicklung mit KI: HTML-Tabellen einfach programmiert

In diesem Blogartikel wird erklärt wie mit Unterstützung von künstlicher Intelligenz eine barrierefreie HTML-Tabelle programmiert werden kann.

Was ist HTML und CSS?

HTML ist die Abkürzung für „Hypertext Markup Language“ und bildet das Grundgerüst einer Webseite. Es handelt sich um eine Auszeichnungssprache, die verwendet wird, um den Inhalt einer Webseite strukturiert darzustellen. HTML definiert die verschiedenen Elemente einer Webseite, wie z.B. Überschriften, Absätze, Bilder, Links und Tabellen. Diese Elemente werden durch Tags gekennzeichnet, die in spitzen Klammern geschrieben sind, z.B.
<h1>,</h1>, <img />, <a>, </a> usw.

CSS steht für „Cascading Style Sheets“ und ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und die Formatierung einer Webseite zu gestalten. Während HTML den Inhalt strukturiert, erlaubt CSS es, diesen Inhalt zu designen und zu präsentieren. Mit CSS können verschiedene Stileigenschaften definiert werden, wie z.B. Farben, Schriftarten, Abstände, Positionierungen und vieles mehr. CSS-Regeln bestehen aus Selektoren (z.B. Elementnamen, Klassen oder IDs) und Deklarationen (Eigenschaften und Werte), die angeben, wie Elemente auf der Webseite dargestellt werden sollen.

Was ist Künstliche Intelligenz (KI)?

Künstliche Intelligenz, abgekürzt KI, bezieht sich auf Computerprogramme und Systeme, die entwickelt wurden, um Aufgaben auszuführen, die normalerweise menschliche Intelligenz erfordern würden. KI-Systeme können Daten analysieren, Muster erkennen, Probleme lösen und Entscheidungen treffen, ähnlich wie Menschen es tun würden, aber oft viel schneller und in größerem Umfang.
ChatGPT ist ein Beispiel für eine spezielle Art von Künstlicher Intelligenz, genannt Chatbot oder Conversational AI. ChatGPT, steht für „Chat Generative Pre-trained Transformer“. ChatGPT wurde trainiert, um natürliche Sprache zu verstehen und darauf basierend sinnvolle Antworten zu generieren.
Ich habe bei der künstlichen Intelligenz ChatGPT ein kostenloses Benutzerkonto.
„Barrierefreie Web-Entwicklung mit KI: HTML-Tabellen einfach programmiert“ weiterlesen