Cyberraum 3
Wie schreibt man barrierefreien Code?
Barrierefreiheitsstärkungsetz & Programmierung
Lerne barrierefreien Code zu schreiben – Barrierefreiheit wird zum Gesetz!
Stichtag 28.06.2025
Programmierung & Barrierefreiheit
Am 28.06.2025 tritt das Barrierefreiheitsstärkungsgesetz in Kraft. Das heißt, Webseiten, Apps, Shops sollten barrierefrei aufgebaut sein. Bitte beachte, dass du als erstes Checken solltest, ob du davon überhaupt betroffen bist. ( Es gibt auch Ausnahmen)
Wichtiger Hinweis zu dieser Seite:
Aus programmiertechnischer Sicht
Bitte beachte dass diese Anleitung keinerlei Rechtssicherheit bietet und lediglich eine Darstellung programmmiertechnischer und technischer Ansätze bietet aus Sicht eines Programmierers darstellt. Außerdem haben wir haben hier wichtige Links und Artikel verlinkt, die du mit in deine technische Umsetzung miteinfließen lassen kannst, wenn du vor der Herausforderung stehst deine Webseite barrierefrei hinzukriegen.
Wenn du allgemein im Bereich WordPress, oder der klassischen Programmierung unterwegs bist, solltest du dich unbedingt mit der Thematik beschäftigen, wie man barrierefreien Code schreibt, entwickelt und aufbaut.
Wichtige Links die du kennen solltest.
Punkt 1 Webseite Aktion Mensch
Tolle Webseite, die einen Schnell-Überblick bietet über alles Wissenswerte im Bereich Barrierefreiheit
Webseite Aktion Mensch
Webseite Aktion Mensch – Videos einbinden
Punkt 2 Webseite Bundesfachstelle Barrierefreiheit
Alle gesetzlichen Grundlagen, zur Gesamt-Recherche findest du auf der Webseite Bundesfachstelle Barrierefreiheit Homepage
Punkt 3 W3-Org
Webseite W3-Org
Punkt 4 BITV Selbstbewertung Check ( 98 Fragen)
Kostenloses webbasiertes Werkzeug für alle, die barrierefreie Webangebote entwickeln und sich dabei an den Vorgaben des BITV orientieren wollen. Webseite
Punkt 5 Microsoft – Word- Excel- Powerpoint barrierefrei
Kompetenzzentrum Digitale Barrierefreiheit HDM Stuttgart homepage
Punkt 6 Freie Uni Berlin – Informationen Barrierefreiheit
Barrierefreiheit – Tipps Uni-Berlin
Punkt 7 Ressourcezentrum für Barrierefreiheit Accessible EU
Punkt 8 Ich kapier den authoring-practice-guide nicht
Hilfe ich kapier den authoring practice guide nicht homepage – Das Video deutsch 40 Minuten
Tipps für Entwickler
Tipp 1 – Was ist Wave?
Wave kann viele Fehler in Bezug auf Barrierefreiheit finden. Bitte beachte, dass es ratsam ist sich grundsätzlich nicht nur auf diese genannten Tools zu beschränken, sondern immer auch manuell zu prüfen.
Wenn du hier das Video vorspulst auf 41:20 siehst du Wave im Einsatz Video
Die Webseite, WAVE findest du hier . Man gibt seine Domain ein und viele Fehler werden einem angezeigt.
Tipp 2 Welche Screenreader gibt es überhaupt?
Stell dir vor, eine blinde Person geht auf deine Webseite. Diese sieht deine Texte Bilder, etc nicht, sie lässt sich die Webseite mit Hilfe einer Sprachsoftware, einem sogenannten Screenreader vorlesen.
Es ist ratsam, wenn du deine Webseite, oder deinen Shop testest, dass du deine Seite auf Screenreader-Tauglichkeit testest. Das heißt, du lädtst dir einen Screenreader runter und schaust mal, was liest er genau vor von deinem Shop oder Webseite. Versuch dies mal mit dem NVDA Lässt er vieles aus, oder werden viele Dinge nicht vorgelesen, dann solltest du dem Problem nachgehen. Häufig sind es Code-Probleme oder auch andere Probleme, die du fixen solltest, damit keine Barrieren vorkommen.
Screenreader
NVDA – Screenreader ( kostenlos) Webseite
jaws – Screenreader ( kostenpflichtig) Job Access With Speech
Voice-Over ( Mac)
Wie hört sich so ein Screenreader an? Video Youtube Hörprobe
Tipp 3 Der google developer tree
Developer Tree und Funktionsweise Link
Tipp 4 Bild einfügen – Alt-Texte – Coding – Was ist ein Alt-Text?
Ein Bild barrierefrei einbinden. Hier ist es wichtig, dass du auf deiner Webseite unterscheidest, ist es ein dekoratives Bild, oder ein inhaltstragendes Bild. Bei dekorativen Bildern, die nur zur Verschönerung dienen, ist es nicht zwingend nötig, einen sogenannten Alt-Text einzufügen. Bei dekorativen Bilder, wenn du z.B. einen Shop hast und auf ein wichtiges Produkt hinweisen möchtest, dann ist es natürlich wichtig, dass du einen Alt-Text im Code hinterlegst. Der Alt-Text wird dann von dem Screenreader vorgelesen.
Code-Beispiel Video
#Bild einfügen mit Bricksbuilder (WordPress) Video
Top 5 – Der Contrast-Checker
Für Menschen mit Sehbeeinträchtigung ist es wichtig, dass du einen sehr guten Kontrast im Bereich der Farben wählst. Es gibt hier das Tool Kontrast-Checker. Video
Top 6 Link- Tipp Barrierefreiheit in der Informatik
Barrierefreiheit in der Informatik – Webseite
Top 7 Github Colibri – Bibliothek
Link – Bibliothek Video ( Komponentenbibliothek für die Barrierefreiheit)
Link ( Github)
Top 8 Dienstekonsolidierung Bund und IT
Plattform für Werkzeuge und Umsetzung in die Barrierefreiheit
Top 9 Barrierefreiheitsnavigator Bund
Barrierefreiheitsnavigator Bund
Top 10 – Was ist ein Focus-Zustand – ( Code-Entwicklung)
Top 11 – Tastaturbedienbarkeit – Code-Entwicklung
Extrem wichtig: Grundsätzlich kannst du nicht davon ausgehen, dass jeder Mensch seine Webseite mit der Maus durchklickt. Vielfach wird die sogenannte Tab-Taste genutzt, um sich durch die Gesamtnavigation durchnavigieren zu können. Das heißt, du musst sicherstellen, dass alle Links etc, ohne Probleme ohne Maus mit der Tabtaste erreichbar sind. Achte auch darauf, dass der Cookie-Banner mit eingezogen ist.
Tastatur-Bedienbarkeit Video
Top 11 – Blinde Person buchen
Man kann beim Deutschen Blindenverband auch gezielt jemand kostenpflichtig buchen, der die Seite überprüft. Video
Top 12 Accordeon per Screenreader vorlesen lassen- Code-Entwicklung
Top 13 Crashkurs – Barrierefrei 60 min
60 Min. Crashkurs Video
Top 14 Zertifikate
Zertifikate- Welche gibt es? Video
Top 15 Was kostet eine barrierefreie Webseite?
Video – Barrierefreiheit für 500 Euro? Video
Top 16 Was ist semantisches HTML?
Was ist semantisches HTML? mehr