Barrierefreiheit- Hilfe, ich kenn mich nicht aus
Der Schnell-Einstieg – Barrierefreiheit –
Link-Liste- Barrierefreiheit
Check die Hilfe-Liste – Barrierfreiheit
Programmierung – – leichte Sprache – Barrierefreies Coden
Barrierefreiheitsstärkungsgesetz : Wie – Wo ? – Was?
Am 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Das Gesetz verpflichtet Unternehmen zur Umsetzung von Barrierefreiheit in verschiedenen Bereichen, zum Beispiel dem Onlinehandel oder bei Telekommunikationsdienstleistungen. Damit müssen auch Websites und Webshops barrierefrei gestaltet sein, aber es gibt auch Ausnahmen.
Schulhof-Programmierung hat hier wichtige Links für dich zusammengetragen, zum Stöbern und für die praktische Anwendung, wenn du Code schreibst, oder Dokumente barrierefrei machen möchtest.
Im ersten Teil findest du allgemeine Informationen über das Thema Barrierefreiheit und Links.
Was sind A-Tipps? ( Allgemeine Tipps), die einen Überblick geben, über Barrierefreiheit
Was sind E- Tipps ? ( Entwickler-Tipps), zur direkten Programmierung und zum Code schreiben, findest du weiter unten, unter dem Buchstaben E , falls du Programmierer bist.
Wichtiger Hinweis !
Die Liste bietet keinen Anspruch auf Vollständigkeit, und stellt keine Rechtsberatung dar, aber vielleicht hilft dir der ein oder andere Tipp, wenn du neu bist in dem Thema. Schulhof-Programmierung übernimmt für die Auswahl der Inhalte, für deren Richtigkeit und für deren Aktualität keine Gewähr. Im Netz gibt es sehr vieles zu dem Thema. Recherchiere entsprechend auch selber. Die Liste wird ständig erweitert, so dass du einen groben Überblick hast. Diese soll als Orientierungshilfe dienen und dir einen leichten Einstieg in das gesamte Thema Barrierefreiheit vermitteln. Schulhof-Programmierung zeigt dir auch viele Beispiele was du im Code beachten musst und stellt kleine Hilfs-Videos auf youtube für dich kostenlos online, damit du cool am Start bist,
Wenn du programmiertechnische Fragen hast zum Thema Barrierefreiheit, dann nutze die neue Facebook-_Gruppe , wo du alle Fragen loswerden kannst. Facebook Viel Erfolg!
Schnell-News
Facebook-Austauschgruppe–Berlin – Barrierfreiheit ( Neugründung)
letzte Aktualisierung: 24.05.2024
Topic – NEWS –
Top-News 1 Brauche ich eine Barrierefreiheitserklärung und wo kriege ich diese her?
Antwort es gibt Generatoren dafür. Z. B. von e-recht-24 zum Beispiel für öffentliche Stellen.
Top-News 2 Wenn du in einem deutschen Text, plötzlich einen längeren Abschnitt auf Englisch bringst. Was ist im Code zu beachten? mehr
Top-News 3 Was du beim Schreiben von Artikeln beachten solltest – Was ist em und strong überhaupt im Code? mehr
Top-News 4 Design und Kontraste und Farbschwäche – Auf was solltest du achten? mehr
Top-News 5 Ich kapier nicht, was ist Skip to link? mehr
Top News 6 Blinde Test-Person buchen für meine Webseite geht das? Video
Top-News 7 Was passiert, wenn eine Person mit starker -Seheinschränkung den CSS-Code abschaltet und warum macht sie das möglicherweise und was ist CSS überhaupt? mehr
Top-News 8 Ein Accordeon ( FAQ) – Text von einem Screenreader vorlesen lassen geht das? Video
Top-News 9 Qualitätsmanagement – Wie kann ich ein Audit machen? IAAP – Englisches Video ( 60 min) Video
Top – News 10 Was genau ist ATAG ? Video / Link
Topic A 0 Schnell-Einstieg : Barrierefreiheit – Einstieg ( Video)
Das Video bietet dir einen Schnell-Einstieg – 18 Tipps, Prüf-Plattformen und Links, die du kennen solltest
20 Minuten- Video ( Barrierefreiheit – Schnell-Einstieg)
Kurz-Vortrag – Barrierefreiheit – Schnell-Übersicht Video
5 Stunden- Video – Hybride – Konferenz – Barrierefreiheitsstärkegesetz
5 Stunden-Video Barrierefreiheitsstärkungsgesetz – Hybride Konferenz vom 2. Juni 2022 Video
Topic A1 Grundlagen & Pflichten + Infos Aktion Mensch – Webseite
Webseite Aktion-Mensch – Infos Überblick
Barrierefreie Webseite Wie? mehr
Audio und Video – Barrierefrei machen mehr
Topic A 2 W3-Org
Webseite W3 org Webseite
W3 – Org – Seite mit Schnell-Filter für Anfänger ( Quick-Reference) Link
Topic A 3 Was ist der BITV-Selbstbewertungs Check ( 98 Fragen)
Das ist ein kostenfreies, webbasiertes Werkzeug für alle, die barrierefreie Webangebote entwickeln und sich dabei an den Vorgaben des BITV-Tests orientieren wollen. ( 98 Fragen ) Webseite
Topic A 4 Bundesfachstelle-Barrierefreiheit
Wichtig
Suchmaschinen und SEO und Barrierefreiheit Link –
Bundesfachstelle Barrierefreiheit Webseite
29 Fragen und Antworten mehr
Topic A 5 Microsoft Word- Excel- Powerpoint – barrierefrei einbinden – Wie?
Word barrierefrei einbinden – Nur Wie? Video (60 Minuten)
Kompetenz-Zentrum Digitale Barrierefreiheit HDM- Stuttgart Homepage
Topic A 6 Freie Uni – Berlin – Informationen – Barrierefreiheit
Freie Uni – Barrierefreheit Webseite
Topic A 7 Ressourenzentrum für Barrierefreiheit ( Accessible Eu)
Ressourcezentrum EU – Webseite
Topic A 8 Körperbehinderung und Programmierung – Beratungsstelle Barrierefreiheit
Beratungsstelle-Barrierefrei – Webseite
Topic A 9 Praktische Beispiele etwas vorlesen lassen mit Sprachausgabe
Wie bedienen Blinde ein Smartphone Video ( 9 Minuten)
4 Minuten Beispiel – auf deinem Handy etwas vorlesen lassen mit Talkback-Funktion Video
Topic A 10 Einfache Sprache und Texte schreiben
Interessante Webseite leichte-Sprache.org – Webseite ( Netzwerk leichte Sprache)
Topic A 11 Verlage, Ebooks-Buchhandlungen
30 Minuten Video zu der Thematik Ebooks und Buchhandlungen – Bundesfachstelle – Barrierefreiheit – Börsenverein deutscher Buchhandlungen mehr
Topic A 12 Welche Möglichkeiten habe ich als Programmierer, mich zertifizieren zu lassen?
Es gibt hier eine deutsche und eine englische Webseite, die du kennen solltest. mehr
Topic A 13 Der Reifegrad – Barrierefreiheit – UNI
Barrierefreiheit Reifgrad und Modelle Video (55 min) IAAP-DACH
Hilfreiche Links: Modelle
Link 2 Homepage – Shuffle-Projekt Reifegrad-Modell – Hochschulen Link
Topic A 14 Flyer – Broschüren – Schriften – Schriftgröße etc.
Flyer- Broschüren – Webseite
Schriftgrößen-Berechner zum Berechnen barrierefreier Schriften Webseite
Topic A 15 Der Härte-Test – Barrierfreie Webseite mit künstlicher Intelligenz erstellen- Das Experiment
Video ( 60 min) Barrierefreie einfache Webseite mit Chat-GPT? – Geht das und was ist wichtig? – Das Experiment- Code-Entwicklung
Video 2 – Hier habe ich einen Screenreader runtergeladen und lasse mir alles im Test vorlesen. Auch die Bildbeschreibung wird vorgelesen, die im Code für die blinde Person hinterlegt wurde.
Topic A 16 – Der Online – Shop – barrierefrei – Video und Link Tipps
Video 1 – Bundesfachstelle Barrierefreiheit 5 Videos E-Commerce & eigener Online-Shop Was tun? Link
Video 2 – 70 Minuten-Video – für Anfänger – Online-Shop Video
Video 3 – Praktisches Video- Online-Shop- Prüfkriterien Video ( Hochzeit)
Topic A 17 Cookie-Banner
Was solltest du beim Thema Cookie-Banner alles beachten. Check die Liste der Bundesfachstelle-Barrierefreiheit mehr
Topic A 18 – Apps
Link- BTV-Test mehr
Topic A 19 – barrierefreie Online-Sitzung organisieren – nur wie?
Check die Seite von Aktion Mensch, dort findest du auch eine große PDF-Anleitung, wie du Schritt für Schritt vorgehen kannst. Link
E = Entwickler – Kategorie – Tipps technische Tools – Links
Rubrik : “ Der Entwickler “ Coding- Tools – Technische Umsetzung
Programmierung- technische Umsetzungen- Tools – Code-Ansätze – Webseiten
Der Entwickler / Programmierung – Tipps Tools und Tipps
Topic E 0 In visual-Studio-code – barrierefreie Extension aktivieren – nur wie?
Visual-Studio-Code Video – ( barrierefreie extension einstellen) 13 Minuten- Video
Topic E 1 Wie funktioniert Wave? Teste deine Seite auf Barrierefreiheit
WAVE kann viele Fehler in Bezug auf Barrierefreiheit und Web Content Accessibility Guideline (WCAG) identifizieren.
Webseite: Wave ( Video englisch Wie funktioniert Wave? YT- Video
Aus dem Netz – Uni- Bielefeld – Was ist Wave ( deutsch) Video
Eine riesige Übersicht mit Linkliste findest du ebenfalls auf der Seite der Bielefelder Uni – Link
Topic E 2 Barrierefreie Lernapps. Auf was sollte man achten? mehr
Topic E 3 Was ist ein Screenreader genau?
1 Minuten- Hör-Test- Wie liest ein Screenreader meine Webseite vor? Video
Woher bekomme ich einen Screenreader, der den Text meiner Webseite vorliest, damit ich das ganze mal testen kann?
Einen Screenreader downloaden – anschalten und mal selber testen, was wird genau vorgelesen auf deiner Webseite, wenn eine blinde Person, diesen nutzt. Video
Wie kann ich ein Scrrenreader ausprobieren, der Text vorliest auf meiner Webseite? Beispiel-Webseite
Topic E 4 Was ist W3 org?
Topic E-5 google – developer-tree – Was ist das genau? Wie kann ich diesen aufrufen?
Full accessibility tree in Chrome Video
Google accessibility-Tree Video
Was ist der Entwickler-Baum und wo finde ich ihn und wie funktioniert dieser? ( google chrome- dev) Webseite
Weiterer Checker für Entwickler in Chrome – axe – Wie funktioniert das? Video (englisch)
Topic E-6 Freecodecamp ( englisches Video)
Freecodecamp hat vor ein paar Monaten ein 90 Minuten Video herausgebracht, zum Thema barrierefreies Coden.
Du findest es hier Video ( 90 min / englisch)
Topic E- 7 Bild einfügen barrierefrei – Alt – Tag – HTML- Struktur
Video Deutsch ( 16 min)
Video Bild einfügen ( 18 Minuten ) Was ist ein dekoratives Bild und was ist ein inhaltstragendes Bild? – Code- Beispiele
Topic E- 8 Kontrast-Checker – CSS-Code / Hexal-Werte optimal barrierefrei anpassen
Für Menschen mit Sehbehinderung ist es wichtig, dass du einen sehr guten Kontrast hast im Bereich Farben. Es gibt hier das Kontrast-Checker-Tool. Webseite Der Contrast-Checker
( Video Anleitung Deutsch – Hilfe, wie funktioniert der Kontrast-Checker? Video Deutsch )
Ein anderer Kontrast-Checker findest du hier ( CCA -Colour Contrast Analyzer (CCA)
Topic E- 9 Barrierefreiheit in der Informatik
Webseite: Barrierefreiheit in der Informatik Webseite
Topic E-10 Was ist die Kolibri- Github – Bibliothek
Die barrierefreie Web Component Bibliothek
KoliBri steht für „Komponentenbibliothek für die Barrierefreiheit“ und ist im ITZBund entwickelt worden. Die Bibliothek steht allen Behörden und auch Unternehmen auf dem Portal Github zur Wiederverwendung und Weiterentwicklung zur Verfügung. Barrierefreiheit ist gleich inklusive. Dadurch werden Aufwände beim Design, bei der Implementierung und im Barrierefreiheitstest gespart. ( Quelle Bundesfachstelle-Barrierefreiheit) Check den Link
Topic E- 11 Barrierefreiheit – Dienstekonsolidierung- Bund & IT
Das Portal bietet praktische Leitfäden und Werkzeuge zur Umsetzung digitaler Barrierefreiheit. Beispielsweise ist der „Standardanforderungskatalog“ ein Werkzeug, mit dem sich Nutzerinnen und Nutzer eine Liste von Anforderungen für eine spezifische IT-Lösung erstellen lassen können. Webseite: Barrierefreiheit-Dienstekonsolidierung – Bund
Topic E- 12 Barrierefreiheits-Navigator – Bund
In dieser Handreichung wird dargestellt, wer in einem Softwareprojekt zu welchem Zeitpunkt was machen muss, damit Barrierefreiheit bei einer neuen IT-Lösung von Anfang an berücksichtigt wird. Projektleitungen können sich an diesem Navigator orientieren und finden hilfreiche Links, Templates und Ansprechpartner in allen Phasen eines IT-Projekts. Dieser im ITZBund etablierte Barrierefreiheits-Navigator kann als Template heruntergeladen und von jeder Behörde an die individuellen Gegebenheiten angepasst werden. ( Quelle Bundesfachstelle Barrierefreiheit) Webseite – Navigator: Check den Link: https://www.itzbund.de/
Top E- 13 Was ist ein Validator? Markup-Validation-Service
E 14 – Was ist der aria authoring practice guide
Eine wichtige Seite, die du kennen solltest, als Entwickler, ist der aria authoring practice guide Du findest die Seite hier. Hier findest du sehr viele Code-Beispiele.
Wie funktioniert die Seite? Tutoral Deutsch Video ( Kurz-Anleitung ca. 18 min Deutsch)
Ich will Programmieren lernen- Check den Programmier-Baum für Anfänger zum Baum
E 15 – Das Übungsprojekt- Erstellen einer barrierefreien Seite – Code Entwicklung
Praktisches Übungsprojekt- Entwicklung eines statischen Codes, in Visual-Studio-Code mit Veröffentlichung des Codes und Überprüfung des Codes mit Wave ( Prüfkriterien). Wie könnte man so etwas machen? Test- Webseiten-Projekt Video ( 40 min)
E16 Lighthouse – Optimierung und Barrierefreiheit und Ladezeit
Kanal Mario- Web-Entwicklung 30 Minuten Video / Barriefreiheit- Ladezeiten etc.
Kanal Mario – Web-Entwicklung – Developer-Tools – Einführung Video ( 18 Minuten)
E17 Formular-Steuer-Elemente HTML
Formular-Steuer-Elemente – HTML
Formulare- barrierefrei W3 org – Snippets mehr
Formular- mit Snippets bauen und Fokus- Video
E18 Aria-Standards die du kennen solltest
E19 Was ist ein Fokus-Zustand? (wichtig)
Der User kann dann auf der Webseite sehen, z. B. in einem Formular oder auf einem Button, dass der Button z. B. rot umrandet ist, wenn er sich ohne Maus nur mit der Tab-Taste auf der Tastatur durch die Webseite klickt. Video
Video – 2 – Fokus-State- Umrandung eines Buttons mit gestrichelter Umrandung – Code Video
E20 Chrome for developers – barrierefreies Coden
Google-Chrome-youtube-Kanal. – Accessibiltiy, ca. 20 Folgen barrierefreies-Coden ( englisch)
HTML-Überschriften-Checker
HTMl-Überschriften-Checker Webseite
Semantischer Aufbau ( Mozilla)
Semantischer Aufbau mehr
A11Yproject
A11Yprojekt Website
Axe – Prüftool
Link – Axe-Prüftool Webseite
Zurück zum Programmier-Baum
zurück zum Programmier-Dorf