Das Internet sollte für alle Menschen zugänglich sein – egal, ob jemand eine Sehbehinderung, motorische Einschränkungen oder andere Barrieren hat. In diesem Artikel erkläre, was barrierefreie Web Programmierung bedeutet, warum sie wichtig ist, wie künstliche Intelligenz (KI) dabei helfen kann und welche Richtlinien dabei zu beachten sind.
Barrierefreies Webdesign – Definition
Barrierefreies Webdesign bedeutet, Webseiten so zu gestalten, dass sie von allen Menschen genutzt werden können – auch von Menschen mit körperlichen oder geistigen Einschränkungen. Das betrifft zum Beispiel:
- gut lesbare Schriftgrößen und Kontraste,
- einfache Navigation mit Tastatur,
- Alternativtexte für Bilder,
- klare Sprache.
Das Ziel ist, dass niemand ausgeschlossen wird – unabhängig von Fähigkeiten oder Technik.
Barrierefreie Web Programmierung – Definition
Bei der barrierefreien Web Programmierung um den technischen Aufbau einer Webseite. Sie sorgt dafür, dass Screenreader Inhalte richtig lesen können, dass Formulare verständlich sind und dass alle Funktionen ohne Maus bedient werden können. Es geht also darum, Barrieren im Code zu vermeiden – nicht nur im Design.
Barrierefreie Web Programmierung für Websites, Webanwendungen und Progressive Web Apps
Barrierefreie Web Programmierung sorgt nicht nur bei klassischen Webseiten für mehr Zugänglichkeit, sondern ist auch bei modernen Webanwendungen (z. B. Online-Banking, E-Learning-Plattformen) und Progressive Web Apps unverzichtbar – damit wirklich alle Menschen digitale Angebote nutzen können.
Diese Angebote sind aus unserem Alltag nicht mehr wegzudenken – sie betreffen Verwaltung, Gesundheit, Bildung, Arbeit und Freizeit. Menschen mit Behinderungen müssen dieselben Möglichkeiten zur Nutzung haben wie alle anderen. Dazu gehört zum Beispiel:
- Webseiten, die auch mit Screenreadern oder Tastatur problemlos nutzbar sind,
- interaktive Webanwendungen, bei denen alle Elemente zugänglich und verständlich sind,
- Progressive Web Apps, die auch offline oder mit assistiver Technologie funktionieren.
Barrierefreiheit sorgt dafür, dass niemand ausgeschlossen wird – ganz gleich, ob aufgrund einer dauerhaften Einschränkung, einer temporären Verletzung oder altersbedingten Veränderungen. Sie verbessert auch die allgemeine Benutzerfreundlichkeit für alle und erfüllt gesetzliche Anforderungen, etwa in der EU oder durch das Barrierefreiheitsstärkungsgesetz (BFSG).
Das Barrierefreiheitsstärkungsgesetz (BFSG) – Was es bedeutet und warum es wichtig ist
Das Barrierefreiheitsstärkungsgesetz (BFSG) ist ein deutsches Gesetz, das dafür sorgt, dass digitale Produkte und Dienstleistungen barrierefrei gestaltet werden müssen. Es setzt die europäische EU-Richtlinie über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen (European Accessibility Act) in nationales Recht um.
Was ist das Ziel des Gesetzes?
Das Ziel ist es, Menschen mit Behinderungen den gleichberechtigten Zugang zu digitalen Angeboten zu ermöglichen – zum Beispiel zu Webseiten, mobilen Apps, E-Books, Online-Shops oder Geldautomaten. Alle sollen die gleichen Chancen haben, Informationen zu erhalten oder Produkte und Dienste zu nutzen – ganz ohne Barrieren.
Wann tritt das BFSG in Kraft?
Das Gesetz wurde bereits 2021 verabschiedet, aber die konkreten Verpflichtungen für Unternehmen gelten ab dem 28. Juni 2025. Ab diesem Zeitpunkt müssen viele private Anbieter sicherstellen, dass ihre digitalen Angebote den Anforderungen an Barrierefreiheit entsprechen.
Für wen gilt das Gesetz?
Vor allem für Unternehmen, die digitale Dienstleistungen anbieten – wie z.?B.:
- Online-Shops,
- Anbieter von Bank- oder Versicherungsdienstleistungen,
- Ticketverkaufssysteme,
- Software- und App-Entwickler.
Öffentliche Stellen sind schon länger zur Barrierefreiheit verpflichtet. Mit dem BFSG werden nun auch viele privatwirtschaftliche Angebote einbezogen.
Was ist künstliche Intelligenz?
Künstliche Intelligenz (KI) bezeichnet Programme, die Aufgaben lösen können, für die normalerweise menschliche Intelligenz nötig ist – zum Beispiel Bilder erkennen, Texte verstehen oder Entscheidungen treffen. KI lernt aus Daten und wird dadurch immer besser. In der Webentwicklung kann KI viele Prozesse automatisieren oder verbessern – auch bei der Barrierefreiheit.
Ein bekanntes Beispiel für künstliche Intelligenz ist ChatGPT. Es handelt sich dabei um ein KI-basiertes Sprachmodell, das Texte versteht und auf Fragen oder Aufgaben reagieren kann – so wie in diesem Artikel. Besonders spannend: ChatGPT kann auch von blinden oder sehbehinderten Menschen genutzt werden, zum Beispiel mit einem Screenreader. Das zeigt, wie digitale Tools mit KI nicht nur Barrieren abbauen, sondern auch inklusiv gestaltet sein können.
Eine ausführliche Anleitung gibt es in diesem Blogartikel:
Blinde Menschen bedienen die künstliche Intelligenz ChatGPT – Eine ausführliche Anleitung
Richtlinien
Eine der wichtigsten Richtlinien für barrierefreie Webinhalte sind die Web Content Accessibility Guidelines (WCAG). Sie geben vor, wie Inhalte:
- wahrnehmbar (z.B. für blinde Nutzer),
- bedienbar (z.B. per Tastatur),
- verständlich (z.B. mit klarer Sprache),
- robust (z.B. mit Assistenztechnologien nutzbar)
gestaltet sein sollen. Die WCAG ist eine Internationale Richtlinie.
In Europa gilt außerdem die Norm EN 301 549, besonders für öffentliche Stellen und deren Websites.
Barrierefreie Web Programmierung – Prüfschritte der EN 301 549 mit KI umgesetzt
In diesem Abschnitt möchte ich einige Prüfschritte vorstellen und zeigen wie diese mit Künstlicher Intelligenz umgesetzt werden können.
Für Menschen die lieber ein Video anschauen, gibt es jetzt das Video:
Prüfschritt 7.1.1 Wiedergabe von Untertiteln
Damit gehörlose Menschen wahrnehmen können, was in einem Video gesprochen oder gesungen wird, benötigen Videos Untertitel. Wie die von YouTube automatisch erstellten Untertitel mithilfe Künstlicher Intelligenz verbessert werden können, sodass sie den Text genau wiedergeben, der im Video gesprochen wird, erkläre ich in diesem Blogartikel:
Prüfschritt 9.1.3.1a HTML-Strukturelemente für Überschriften
Überschriften müssen korrekt mit den HTML-Strukturelementen h1 bis h6 oder äquivalenten ARIA-Rollen und Attributen ausgezeichnet sein und die Inhalte der Seite erschließen.
Mein Kommando an die KI ChatGPT:
folgende überschriften möchte ich auf meine Webseite einfügen: Barrierefreie Web Programmierung – Grundlagen + Künstliche Intelligenz, Barrierefreies Webdesign – Definition, Barrierefreie Web Programmierung – Definition, Barrierefreie Web Programmierung für Websites, Webanwendungen und Progressive Web Apps, Das Barrierefreiheitsstärkungsgesetz (BFSG) – Was es bedeutet und warum es wichtig ist . mache daraus html-überschriften so dass das ganze barrierefrei ist.
Antwort von ChatGPT:
<h1>Barrierefreie Web Programmierung - Grundlagen + Künstliche Intelligenz</h1> <h2>Barrierefreies Webdesign – Definition</h2> <h2>Barrierefreie Web Programmierung – Definition</h2> <h2>Barrierefreie Web Programmierung für Websites, Webanwendungen und Progressive Web Apps</h2> <h2>Das Barrierefreiheitsstärkungsgesetz (BFSG) – Was es bedeutet und warum es wichtig ist</h2>
Erklärung:
- <h1> ist die wichtigste Überschrift, sie sollte nur einmal pro Seite verwendet werden und bezeichnet in der Regel den Titel des gesamten Artikels oder der Seite. In deinem Fall handelt es sich um den Haupttitel: „Barrierefreie Web Programmierung – Grundlagen + Künstliche Intelligenz“.
- <h2> wird für die Unterüberschriften verwendet, da sie den Hauptteil des Inhalts strukturieren. In deinem Fall sind das die spezifischen Abschnitte, die sich mit den einzelnen Themen befassen.
Diese Struktur ist nicht nur aus Sicht der Barrierefreiheit wichtig, sondern hilft auch den Suchmaschinen, den Inhalt der Seite besser zu verstehen. Falls du noch ARIA-Attribute oder andere barrierefreie Elemente einbauen möchtest, lass es mich wissen!
Prüfschritt 9.1.3.1b HTML-Strukturelemente für Listen
Zur Auszeichnung von Listen auf der Seite sollen HTML-Strukturelemente für Listen (ul, ol und so weiter) genutzt werden.
Mein Kommando an die KI ChatGPT:
hier eine liste von screenreadern: nvda, jaws, talk back, voice over, orca. ich benötige diese screenreader als html-liste.
Antwort von ChatGPT:
<ul> <li>NVDA</li> <li>JAWS</li> <li>TalkBack</li> <li>VoiceOver</li> <li>Orca</li> </ul>
Diese ungeordnete Liste (<ul>) listet alle fünf Screenreader auf. Wenn du eine nummerierte Liste möchtest, kannst du das <ul> durch <ol> ersetzen. Lass es mich wissen, wenn du noch etwas anpassen möchtest!
Prüfschritt 9.1.3.1c HTML-Strukturelemente für Zitate
Zur Auszeichnung von Zitaten, die als eigenständige Textabschnitte gefasst sind, soll das dafür vorgesehene HTML-Strukturelement blockquote genutzt werden.
Mein Kommando an die KI ChatGPT:
ich möchte den Satz „barrierefreie Web Programmierung ist cool!“ in eine Webseite als zitat einfügen. schreibe mir bitte den entsprechenden code.
Antwort von ChatGPT:
<blockquote> <p>Barrierefreie Web Programmierung ist cool!</p> </blockquote>
Die <blockquote>-Tags kennzeichnen ein Zitat, und der <p>-Tag sorgt dafür, dass der Text korrekt als Absatz angezeigt wird. Falls du das Zitat noch mit einem Autor oder einer Quelle versehen möchtest, kann ich dir auch gerne den entsprechenden Code dazu geben!
Prüfschritt 9.1.3.1e Datentabellen richtig aufgebaut + Prüfschritt 9.1.3.1f
Zuordnung von Tabellenzellen
Datentabellen sind strukturell richtig aufgebaut, Zeilen- und Spaltenüberschriften sind mit th oder den entsprechenden ARIA-Rollen ausgezeichnet.
In komplexen Datentabellen soll der Bezug von Überschriften und Inhalten (über scope oder über id und headers) definiert sein, ausdrückliche Zuordnungen von Überschriften und Inhalten in einfachen Datentabellen sollen korrekt sein.
Mein Kommando an die KI ChatGPT:
Ich möchte eine barrierefreie html-tabelle mit 2 Spalten. die erste spalte hat die Überschrift Screenreader. die zweite spalte hat die Überschrift Betriebssysteme. in spalte 1 stehen die Werte Sprachausgabe, NVDA, Orca, Talkback, Voice Over. In Spalte stehen die werte Windows, Windows, Ubuntu, Android, IOS.
Antwort von ChatGPT:
<table> <caption>Liste von Screenreadern und ihren Betriebssystemen</caption> <thead> <tr> <th scope="col">Screenreader</th> <th scope="col">Betriebssysteme</th> </tr> </thead> <tbody> <tr> <td>Sprachausgabe</td> <td>Windows</td> </tr> <tr> <td>NVDA</td> <td>Windows</td> </tr> <tr> <td>Orca</td> <td>Ubuntu</td> </tr> <tr> <td>TalkBack</td> <td>Android</td> </tr> <tr> <td>VoiceOver</td> <td>iOS</td> </tr> </tbody> </table>
Prüfschritt 9.1.4.4 Text auf 200% vergrößerbar
Text soll um bis zu 200 Prozent vergrößert werden können, ohne dass dabei Inhalt oder Funktionalität verloren geht. Mindestens eine der folgenden Voraussetzungen soll erfüllt sein:
- Mit der Zoom-Funktion des Browsers kann die Schrift auf 200% vergrößert werden (dabei bricht die Seite häufig in ein neues Layout um)
- Über ein Bedienelement oben auf der Seite kann die Schriftgröße vergrößert werden
Mein Kommando an die KI ChatGPT:
Für Menschen mit einer Sehbehinderung ist es wichtig, dass sie die Schrift auf einer Webseite mit dem Browser-Zoom vergrößern können. Deswegen möchte ich mit CSS die Schriftgröße so angeben, dass dies möglich ist. Schreibe mir den erforderlichen css-code.
Antwort von ChatGPT:
Um die Schriftgröße so anzugeben, dass sie mit dem Browser-Zoom vergrößert werden kann und die Zugänglichkeit für Menschen mit Sehbehinderung verbessert wird, kannst du **relative Einheiten** wie `em` oder `rem` verwenden, anstatt feste Pixelwerte. Dies ermöglicht es Nutzern, die Schriftgröße nach ihren Bedürfnissen anzupassen.
Hier ist ein einfaches Beispiel für den CSS-Code, der dies ermöglicht:
body {
font-size: 1rem; /* 1rem entspricht der Standardgröße des Textes, die der Benutzer in den Browsereinstellungen definiert hat */
line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
}
h1 {
font-size: 2rem; /* Überschrift mit einer relativen Größe, die anpassbar ist */
}
p {
font-size: 1rem; /* Standardtext mit relativer Größe */
}
Erklärung:
– `rem` (root em): Diese Einheit ist relativ zur Schriftgröße des Root-Elements (`<html>`), das standardmäßig in den meisten Browsern auf 16px gesetzt ist. Wenn der Benutzer den Zoom in seinem Browser anpasst, wird die Schriftgröße automatisch mitgezoomt.
– `em`: Ähnlich wie `rem`, aber relativ zur Schriftgröße des Elternelements, was bei verschachtelten Elementen nützlich ist.
– `line-height`: Wird oft zusammen mit der Schriftgröße angepasst, um die Lesbarkeit zu verbessern.
Mit diesem CSS wird die Schriftgröße an die Zoom-Einstellungen des Browsers angepasst, sodass Menschen mit Sehbehinderungen die Schriftgröße nach Bedarf ändern können. Wenn du noch zusätzliche Fragen hast, stehe ich gern zur Verfügung! ?
Hier möchte ich aufhören.
Schlussbemerkung
Barrierefreie Web Programmierung ist kein „Extra“, sondern ein wichtiger Bestandteil moderner Webentwicklung. Mit Hilfe von künstlicher Intelligenz können wir sie effizienter gestalten und dafür sorgen, dass digitale Inhalte wirklich für alle zugänglich sind. Es ist nicht nur eine technische Herausforderung, sondern auch eine gesellschaftliche Verantwortung – und mit den richtigen Werkzeugen gut machbar.
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 .
2 Gedanken zu „Barrierefreie Web Programmierung – Grundlagen + Künstliche Intelligenz“