barrierefreier-code – schreiben- accessibility – barrierefreie webseiten bauen – auf was muss ich achten?

Barrierefreiheit- Hilfe, ich kenn mich nicht aus

Der Schnell-Einstieg Barrierefreiheit

Barrierefreiheit- Links
Barrierefreiheitsstärkegesetz – Was ist das genau und was solltest du tun?

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!

news-Barrierefrieheit
Check die News – Kurz-notiert

Schnell-News

Schnell-News - Barrierefreiheit 2024 - 2025 - Klick mich - 3 Eintragungen

Kurz-News- Schulhof-Programmierung – Barrierefreiheit

28.05.2024 Als Entwickler ist es hilfreich, wenn du weißt, was der aria authoring practice guide ist Check Topic E 14

26.05.2025 Bundesfachstelle-Barrierefreiheit bringt mehrere Videos zum Thema Online-Shop / E-Commerce heraus. Siehe Topic A4

25.05.2024 neue Bibliothek herausgekommen, für Programmierer – Kolibri Siehe Punkt Topic E10

4 Prinzipien, die du unbedingt kennen solltest

Es gilt die Wahrnehmung – Bedienbarkeit – Verständlichkeit und die Robustheit

Wahrnehmung: Achte darauf, dass du sogenannte Alternativ-Texte im Code einbaust, die vom Screenreader auch erfasst werden können und vorgelesen werden können

Bedienbarkeit: Deine Webseite sollte auch ohne Maus bedienbar sein, nur mit Tastatur

Verständlichkeit: Sie sollte einfach und verständlich sein.

Robustheit: Sie sollte auf verschiedenen Endgeräten problemlos laufen.

Facebook-AustauschgruppeBerlin – Barrierfreiheit ( Neugründung)

Austauschgruppe
Programmierung und Fragen – Facebook-Neugründung- Gruppe – Schulhof-Programmierung.de
Berliner- Facebook-Gruppe- Neugründung - Barrierfrei-Austauschgruppe - Komm rein!

Facebook-Gruppe- Barrierefreiheit – Austausch : Da das Thema sehr komplex ist,hat Schulhof-Programmierung eine Facebook-Gruppe ins Leben gerufen. Schwerpunkt soll auf der einen Seite der technische Austausch für Programmierer sein, die die Dinge umsetzen, aber auf der anderen Seite kommen natürlich bei so einem großen Thema eine Menge Fragen auf. Wie gehe ich vor? Wie kann ich Code anpassen? Wie kriege ich meinen Online-Shop barrierefrei? Bin ich überhaupt betroffen? – Was muss ich jetzt genau machen? Mit welchen Tools kann ich überhaupt testen? Wie kann ich im Code einen Text verfassen, der dann vom Screenreader vorgelesen wird etc.? Was kann ich mit der Bibliothek Kolibri genau machen? Wie funktioniert ein Kontrast-Checker für CSS- Code etc… Wissensaustausch und Programmierung treffen hier also eng zusammen.

Wir wünschen allen viel Erfolg beim Austausch. Link findest du hier:

Facebook-Gruppe Barrierefreiheit – Programmierung und Fragen – Schulhof-Programmierung

letzte Aktualisierung: 24.05.2024

Topic – NEWS – Buchen einer blinden Testperson Wie? – Usability-Check

Top News: Blinde Test-Person buchen für meine Webseite geht das? Video

Top-News: 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

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

barrierefrei

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

6 Video-Tipps

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

barrierefreiheit

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 – BarrierefreiheitUNI

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 14 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 15 – 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

Topic A 16 – 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

Was bedeutet die Kategorie E? - Klick mich - Lies mich
E bedeutet = Entwicklung & Programmierung – Welche Techniken sind am Start? Welche Tools gibt es derzeitig? – Wie kann ich das ganze technisch umsetzen? Was ist Wave? Welche besonderen github-Bibliotheken gibt es? – Was ist überhaupt ein Kontrast-Checker und wie kann ich das im Code realisieren? Welche Werte muss ich genau beachten? Was ist der developer tree? Was ist ein Alt-Text im Code und was muss ich wo eintragen, damit es vom Screenreader gut gelesen werden kann? Oder wie ist eine HTML-Struktur aufgebaut und was zum Teufel ist eine H1 – Überschrift und wie binde ich diese im Code ein? Oder wie navigiere ich ohne Maus auf der Webseite? Oder wie kann ich ein Button im Css selber anpassen, oder einen besseren Farbkontrast mit CSS im Code schreiben? Wie verändere ich die Schriftgröße, oder wie baue ich mir kurz selber einen Beispiel-Code auf?

Eine weitere wichtige Frage ist natürlich, was ist der Unterschied zwischen einem dekorativen – Bild, das ich im Code einbaue und einem inhaltstragenden Bild und wozu ist das überhaupt wichtig? Du siehst sehr schnell treten hier also endlos viele technische Fragen auf, wenn du neu bist, also check einfach hier immer die Seite und bleib stets dran. Eine Webseite barrierefrei zu gestalten ist ein kontinuierlicher Prozess. Viel Erfolg!

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

Wie funktioniert Wave – genau?

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

Der Screenreader - Was ist das genau?

Ein Screenreader (auch Bildschirmleseprogramm genannt) ist eine Softwareanwendung, die für Menschen mit Sehbehinderungen entwickelt wurde. Diese Programme ermöglichen es blinden oder sehbehinderten Personen, Informationen auf einem Computerbildschirm zu verstehen, indem sie den Text in Sprache umwandeln oder Braille-Ausgaben generieren.

Ein Screenreader analysiert den visuellen Inhalt auf dem Bildschirm, wie Text, Symbole und Menüs, und gibt diese Informationen über Sprachausgabe oder Braille-Ausgabe an den Benutzer weiter. Auf diese Weise können Menschen mit Sehbehinderungen den Inhalt von Websites, Anwendungen, Dokumenten und anderen digitalen Medien zugänglich machen.

Wie funktioniert ein Screenreader genau?

Screenreader sind ein wichtiges Hilfsmittel, um die Barrierefreiheit im digitalen Raum zu fördern und Menschen mit Sehbehinderungen die volle Teilnahme an der Informationsgesellschaft zu ermöglichen. Beispiel-Video ( 6 min)

Wie kann ich ein Scrrenreader ausprobieren, der Text vorliest auf meiner Webseite? Beispiel-Webseite

Topic E 4 Was ist W3 org?

Weitere Informationen für Entwickler

Hier findest du noch interessante englische Tipps:

Wichtige englische WebseitenBarrierefreiheit & Code schreiben

Auf dieser Seite werden die internationalen Standards zur Barrierefreiheit von Webinhalten (WCAG) vorgestellt, darunter WCAG 2.0, WCAG 2.1 und WCAG 2.2. In den WCAG-Dokumenten wird erläutert, wie Webinhalte für Menschen mit Behinderungen zugänglicher gemacht werden können. W3org ( englisch)

Topic E-5 google – developer-tree – Was ist das genau? Wie kann ich diesen aufrufen?

barrierefreie tipps

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)

barrierefreie tipps

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  

barrierefreie tipps

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 

barrierefreie tipps

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 

barrierefreie tipps

Webseite: Barrierefreiheit in der Informatik Webseite

Topic E-10 Was ist die Kolibri- Github – Bibliothek

barrierefreie tipps

Die barrierefreie Web Component Bibliothek

Komponentenbibliothek- Barrierefrei Kolibri- Public UI

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

Kolibri-Github-Link

Video- Kolibri

Topic E- 11 Barrierefreiheit – Dienstekonsolidierung- Bund & IT

barrierefreie tipps

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

barrierefreie tipps n

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

barrierefreie tipps n

Webseite

Was genau ist ein Validator ?

Der W3C-Validator ist ein Online-Tool, das von der World Wide Web Consortium (W3C) bereitgestellt wird. Es dient dazu, den Quellcode von Webseiten auf die Einhaltung der W3C-Standards für HTML, XHTML und andere Web-Technologien zu überprüfen. Hier sind einige wichtige Punkte zu diesem Tool:

Syntaxüberprüfung: Der Validator analysiert den HTML- oder XHTML-Code einer Webseite und überprüft, ob er den offiziellen Spezifikationen entspricht. Fehler und Warnungen werden angezeigt, damit Entwickler diese korrigieren können.

Zugänglichkeit: Durch die Einhaltung von W3C-Standards wird sichergestellt, dass Webseiten besser zugänglich sind, z.B. für Menschen mit Behinderungen und für verschiedene Browser und Geräte.

Kompatibilität: Standardskonformer Code hilft, dass Webseiten konsistent in verschiedenen Webbrowsern und auf verschiedenen Geräten angezeigt werden.

Best Practices: Die Nutzung des Validators unterstützt Entwickler dabei, Best Practices zu folgen und qualitativ hochwertigen Code zu schreiben.

Der Validator kann über die Webseite validator.w3.org genutzt werden, indem man die URL der zu prüfenden Seite eingibt oder den Quellcode direkt einfügt.

E 14 – Was ist der aria authoring practice guide

barrierefreiheit code

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

barrierefreier Code schreiben lernen
barrierefreie Webseit mit Wave prüfen - wie geht das?

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

Webseite

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

Zurück zum Programmier-Baum

zurück zum Programmier-Dorf

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen