Wie prüft man eine Webseite auf barrierefreiheit genau? Testtools accessibility – Was solltest du beachten?

Wie prüft man eine Webseite auf Barrierefreiheit genau und was solltest du wirklich beachten?

Das Barrierefreiheitsstärkungsgesetz

Ab 28. 06.2025 tritt das Barrierefreiheitsstärkungsgesetz in Kraft. Das heißt, du solltest überprüfen, ob du davon betroffen bist und wenn ja, wie du deine Seite barrierefrei gestaltest. Ich möchte hier mal meine eigene Sichtweise dazu schreiben, weil ich selber Code schreibe und vielleicht hilft dir der Artikel, wenn du dich bisher noch nicht mit der gesamten Thematik Barrierefreiheit und Webseiten beschäftigt hast. Ich werde dir dazu viele Tipps und Links geben, die dir helfen, dich durch den Dschungel von praktischen Tipps zu bringen. 

Wozu ist das ganze gut? – Wozu der Aufwand ?    Barrierefreiheit ist extrem wichtig, weil du sonst viele Leute einfach aussperrst. 

Das Hauptproblem ist aus technischer Sicht einfach gesagt: Achtest du nicht auf einen guten Code, oder eine gute Code-Struktur, oder ist dein Code “aufgebläht wie ein Ballon” und hast zum Beispiel keinerlei Alt-Texte im Code verbaut, so sperrst du viele Menschen aus, die vielleicht deine Webseite, App oder deinen Online-Shop besuchen möchten. Auch gibt es viele Menschen, die eine körperliche Beeinträchtigung haben.

Menschen, die keine Computer-Maus nutzen 

Es gibt Menschen, die deshalb überhaupt keine Maus benutzen können, sondern alles was sie machen auf deiner Webseite oder deiner App, sie nutzen z. B. die Tabtaste um durch die Seite zu tabben, und deine Seite kennenzulernen. Sie nutzen einen Screenreader, z. B. Blinde Menschen, diese lassen sich dann die Webseite vorlesen. Außerdem ist es ein großer Vorteil, wenn du deine Webseite oder dein Shop barrierefrei machst, da es auch SEO-technische Auswirkungen auf deine Webseite hat. Das heißt, hast du keinen aufgeblähten unstrukturierten Code, hälst bestimmte Dinge ein, so lieben das Suchmaschinen z. B. und deine Seite wird einfacher und besser gefunden.

Es gibt also sehr viele Gründe, dass du dich unbedingt mit dem Thema beschäftigst. Und ja, bist du betroffen und du machst es nicht, gibt es vom Gesetz her auch drastische Bußgelder, wenn du dich nicht darum kümmerst. Siehe auch aktuelles spanisches Urteil.

Ich habe keine Ahnung, und nun? Wie soll man eine Seite eigentlich auf Barrierefreiheit testen? 

Ich zähle dir hier mal einige Möglichkeiten, die du hast – kostenlose oder kostenpflichtige, so hast du vielleicht eine gute Übersicht

Zunächst einmal ist es wichtig, dass du weißt, dass du deine Seite möglicherweise niemals 100 Prozentig barrierefrei bekommen wirst, und dass Barrierefreiheit ein sogenannter Entwicklungsprozess ist. Das heißt, es reicht nicht aus, dass du einmal durchtestest und dann die Füße hochlegst, den TV anschmeist und dann denkst: “Cool, habe ich gemacht”-.)  Wäre natürlich cool, wenn das so wäre.  Deine Webseite ist ja immer einem großen Änderungsprozess ausgesetzt. Das heißt, du gehst ja her du änderst Texte, Bilder, bindest neue Artikel ein, oder machst auch mal einen Komplett – Ralaunch alle paar Jahre. Das heißt, es ist ratsam, immer wieder neu die Fakten zu checken und deine Seite immer wieder zu testen.

Und ja, es ist zeitaufwendig, aber es lohnt sich für dich, wie bereits o.g erwähnt.

Tacheles – Welche Möglichkeiten hast du  deine Webseite zu testen? 

Ich werde hier zunächst mal auf die kostenlosen Tools eingehen und danach auf kostenpflichtige, wenn du einen Etat dafür hast als Unternehmer z. B.

Selbstkontrolle – Liste  – Freiwillig 

Es ist ratsam, nicht nur ein Tool zu nehmen, sondern ich würde die Tools kombinieren und leg dir eine Liste an, wann du was genau geprüft und gecheckt hast für dich. So hast du immer eine Übersicht und behälst das Thema im Auge.  Informiere dich auf Schulhof-Programmierung, oder im Netz, ob es Neuigkeiten gibt.

Die Liste kann eine einfache Excel-Liste sein : Datum der letzten Prüfung  –   Welche Punkte wurden geprüft? Wie wurde geprüft? Wer hat geprüft? Welche Personen wurden eingebunden? Zum Beispiel wenn du eine blinde Person mit einbindest in den Prüfungsprozess.

Prüfverfahren

Kostenfreie Prüf-Verfahren

Punkt 1 – Tool – Wave

Punkt 2 – Kontrast-Checker

Punkt 3 – Screenreader-Check ( Eine blinde Person arbeitet mit einem Screenreader, diese lässt sich den Text vorlesen)

Punkt 4 – Wenn du einen  Etat hast, kannst du natürlich auch eine blinde Person gegen Bezahlung testen lassen, ob diese zurecht kommt auf deiner Webseite, oder deiner APP, oder deinem Online-Shop,

Das Desaster – kein  ” Alt-Tag im Code ”  – Jetzt wird es etwas technisch  – Das große Problem!

Praktisches Beispiel: Eine blinde Person möchte deine Webseite oder deinen Online-Shop besuchen. Diese arbeitet mit einem sogenannten Screenreader. Das ist eine Software, die hergeht und ihr den Text und alles vorliest, was du auf deiner Webseite so schreibst, denn sie kann die Webseite ja nicht sehen. Nehmen wir an, die blinde Person möchte bei dir einkaufen. Du hast verschiedene Artikel auf deinem Shop und zu jedem Artikel hast du für den User natürlich auch ein passendes Bild dazu, wie der Artikel genau aussieht. Zum Beispiel ein Bild von einer Lampe, oder einem Buch.

Das Problem, selbst wenn die blinde Person sich jetzt den Text vorlesen lassen möchte, macht dies der Screenreader nicht, wenn du im Code keinen sogenannten ” Alt-Text” hinterlegst. Dies ist eine wichtige Bildbeschreibung im Code, die du unbedingt miteinbauen musst, da du die Person sonst komplett ausschließt, denn genau dieser Text innerhalb vom Code wird von dem Screenreader dann vorgelesen und die blinde Person weiß dann, was auf dem Bild ist.  Das heißt konkret, verkaufst du z. B. auf deinem Shop eine Lampe, so könntest du im Alt-Text im Code einfach eintragen, ” weiße Lampe für 25,24Euro oder so”. Die gesamte Problematik betrifft sämtliche Bildbeschreibungen.  Wie groß ist dein Aufwand es zu ändern? CA. 2 Minuten, wenn du genau weißt, wie du es machen musst.

Ein weiteres Beispiel  – Katastrophaler Kontrast – Hellgrüne Schrift auf dunkelgrünem Button. 

Nehmen wir an, eine Frau mit starker Sehbeeinträchtigung besucht deine Webseite besuchen. Dein Kontrast auf der Webseite ist allerdings sehr schlecht, weil du nicht auf einen guten Farbkontrast achtest. Was bedeutet das genau? Nehmen wir an, du hast eine Webseite und dort hast du Buttons, mit grüner Farbe und grauer Aufschrift, weil du das vielleicht cool findest, oder weil der Designer das cool fand, oder weil du irgend so eine Klick-Seite hast, wo nicht darauf geachtet wurde. Das heißt, auch hier schließt du die Leute aus, sie können das nicht lesen. Es gibt einen sogenannten Kontrast-Checker, den du nutzen kannst, um zu schauen, ob du hier cool am Start bist.

Gibt es Agenturen, die das übernehmen, wenn ich einen Etat habe? 

Es gibt natürlich Agenturen, wenn du einen Etat hast, die darauf spezialisiert sind, barrierefreie Webseiten zu entwicklen. Hier ein paar Punkte, auf was du achten könntest und was die Unterschiede sind und auf was ich persönlich achten würde.

Punkt 1 

Zunächst gibt es ja verschiedene Möglichkeiten wie deine Webseite gebaut worden ist. Nehmen wir jetzt mal die 2 häufigsten. Entweder, du hast eine Webseite mit einem sogenannten CMS-System wie WordPress, Joomla, Typo3 oder auch Drupal, oder du hast klassischen statischen Code, das heißt, ein Programmierer ist hergegangen und hat dir die Seite Zeile für Zeile in HTML, CSS und Java-Script in Visual-Studio-Code geschrieben. Ich gehe hier mal gezielt auf Vor-und Nachteile und Aspekte ein.

WordPress

Ist natürlich eines der weitverbreitesten Systeme, weil es recht einfach zu nutzen ist und auch ich nutze es gerne. WordPress selber achtet von Grunde auf an, schon darauf, dass vieles barrierefrei ist, aber ich würde trotzdem egal welches System du hast, alles mit den oben genannten Systemen versuchen durchzutesten.  Das Zauberwort heißt grundsätzlich immer: Testen, Testen und nochmals testen…

Lad dir auch unbedingt den kostenlosen  Screenreader runter und hör dir an, was wird genau vorgelesen, falls eine blinde Person deine Webseite besucht. Oder engagiere eine blinde Person und lass sie deine Webseite gegen Bezahlung durchtesten.  Wie sind deine Bildbeschreibungen im Alt-Tags, wie oben genannt. Wird die Navigation über den Screenreader ordentlich vorgelesen? – Ich habe schon Test gesehen, da hat der Screenreader nicht mal die Navigation vorlesen können, weil der Head-Bereich so ungeschickt gemacht wurde. Das heißt, die Person geht kurz auf deine Seite und geht frustriert wieder, weil sie deine Seite nicht besuchen kann. Das solltest du unbedingt vermeiden. Setze auch den Kontrast-Checker ein, wie oben genannt beschrieben.

 

Klassisch- statischer Code- HTML- CSS- Java-Script – Programmierung 

Das klassische Frontend

Ich persönlich bin in diesem Falle eigentlich mehr ein Freund der klassischen Programmierung und allen, denen es ähnlich geht, möchte ich hier auch noch meinen Senf dazu geben -.)

Agentur ist nicht gleich Agentur –  Tausch dich vorher aus und informiere dich gut. 

Wenn du ein Etat hast und dich darum nicht selber kümmern möchtest, so gibt es eben hier auch Unterschiede. Viele Agenturen bieten dir natürlich barrierefreie Webseiten an wenn du hier anfängst zu googeln, wirst du jetzt schon erschlagen von den vielen Angeboten und auch die Preise sind natürlich unterschiedlich. Doch ist dort wo “barrierefrei” drauf  steht, auch “barrierefrei” drin? Schließlich bezahlst du ja auch dafür.

Wovon du auf jeden Fall meiner Meinung nach die Finger lassen solltest, sind sogenannte Overlays, die teilweise angeboten werden. Ich bin ein sehr kritischer Mensch und ich denke, wenn du dich für eine Agentur entscheidest, ist das in erster Linie natürlich eine Vertrauenssache, denn in der Regel lässt du dort ja auch  Geld liegen. Vertrauen ist gut, Kontrolle und Nachfragen, ist besser-.)

Kriterien, auf die du achten solltest, bei der Auswahl – Barrierefreie Webseitengestaltung 

Punkt 1  –  Gibt es ein öffentliches Portfolio, welche Webseiten bereits barrierefrei technisch umgesetzt wurden, die du dir anschauen kannst

Punkt 2  –  Vergleiche die unterschiedlichen Preise – Notiere dir z. B. 3 Anbieter und vergleiche dann genau, bevor du den Auftrag vergibst.

Punkt 3 –  Mund zu Mund – Geh in Facebook-Gruppen, die sich mit Barrierefreiheit beschäftigen und frage nach – Es wird möglicherweise viele Unternehmen geben, die hier Agenturen beauftragen, viele tauschen sich über die Erfahrungen dort aus.  Ich persönlich würde zusätzlich unbedingt  auch auf Youtube gehen. Gib dort den Agentur-Namen ein  in die Suche und du wirst in der Regel schnell fündig. Viele Anbieter sind dort aktiv und so kannst du dir zusätzlich ein Bild machen, oder auch Fragen stellen und schauen, was sie dort so machen und hast einen weiteren Eindruck.

Profis mit Zertifikate  in der Barrierefreiheit   CPACC – WAS  – CPWA – Was zum Teufel ist das? 

Es besteht die Möglichkeit, einen sogenannten Accessibilty-Experten zu kontaktieren. Diese Leute haben eine spezielle Ausbildung und sind zertifiziert und oftmals kommen diese vielleicht aus dem Frontend-Bereich also aus dem Bereich der Programmierung und haben natürlich entsprechend viel Erfahrung und Expertise. Das klingt interessant, aber wo finde ich so eigentlich jemand und wonach muss ich hier gezielt schauen?

Auch hier gibt es wieder Unterscheidungen, die ich hier gezielt aufführe für dich.

  • Certified Professional in Accessibility Core Competencies (CPACC) – Zertifizierte Fachkraft für Kernkompetenzen der Barrierefreiheit
  • Web Accessibility Specialist (WAS) – Spezialist für Web-Barrierefreiheit
  • Certified Professional in Web Accessibility (CPWA) Designation – Zertifizierte Fachkraft für Web-Barrierefreiheit. Personen, die die CPACC- und die WAS-Zertifizierung halten, erhalten automatisch diese Zertifizierung.
  • Accessible Document Specialist (ADS) – Spezialist für Barrierefreie Dokumente

 

Was heißt das jetzt genau?

Es gibt 2 verschiedene Prüfungen, jemand der z. B. eine CPACC und  eine WAS – Prüfung abgelegt hat, darf sich dann CPWA nennen. Sie können also auch nach einem CPWA also einem Certified Professional in Web Accessibility (CPWA) Designation – Entwickler suchen. 

Weitere Informationen zu dem Thema  Zertifikate – youtube-Video etc, findest du hier 

 

Ich möchte kein WordPress – CMS – System nutzen  – Was dann? 

Praktisches Beispiel: 

Herr X ist Unternehmer von 30 Leuten und braucht eine barrierefreie Webseite. Er nutzt bisher WordPress, er möchte aber dafür gar kein WordPress  nehmen, sondern das ganze klassisch Zeile für Zeile von einem Programmierer coden lassen. Welche Vorteile bzw. Nachteile hat er hier dann?

Welche Techniken könnte der Programmierer für eine einfache Seite einsetzen? Spielen wir hier mal ein einfaches Beispiel durch. 

Wenn es eine einfache Seite werden soll, ohne großen Login, oder ähnliches wird er möglicherweise mit folgenden Techniken arbeiten.

Frontend – Entwicklung

HTML als Markup-Sprache  ( semantisches HTML )

CSS – Code  für das Style und Layout

Java-script  – code ( Zum Schreiben der Funktionen)

Was muss er außerdem wissen?

Da die Webseite ja auch auf Handy und Tablets cool aussehen soll, muss er sich auf jeden Fall mit responsiven -Techniken auskennen. Das heißt, wenn er die Seite in der Regel in Visual-Studio-Code schreibt, sollten Media-Querys, oder sonstige responsiven Techniken keine Fremdwörter für ihn sein.

Natürlich benötigt er ein sehr gutes Wissen, über die allgemeinen Prüfkriterien, was wird überhaupt gefordert von der Norm? Und er sollte sich gut auskennen mit den ganzen Test-Tools und wie ein Screenreader funktioniert.   Nehmen wir an, er hat all dieses Wissen und liefert dir, die Seite aus.

Das Problem, oder was du dir vorher überlegen musst…

Das Problem das du natürlich jetzt hast, wenn du dich für diese statische barrierefreie Web-Seite entscheidest, dass du dann auf jeden Fall Programmier-Kenntnisse haben musst, denn wie willst du sonst die Seite selber  aktualisieren, wenn du keine Ahnung hast, wie Code aufgebaut ist, oder wie du ein Bild direkt im Code barrierefrei einfügen kannst, das dann auch barrierefrei eingebaut wird und von einem Screenreader ausgelesen wird?

Wenn du genug Geld hast, kannst du mit ihm natürlich einen Vertrag abschließen, dass er sich langfristig um die Aktualisierung kümmert, oder du musst jemand finden, der Code schreiben kann. Eine Webseite bleibt ja nie gleich, sondern du hast permanent Änderungen, fügst Texte, Bilder etc. ein.

 

Zuguterletzt – Schlusswort  – Hilfe, ich kenn mich nicht aus mit soviel Technik

Große Verwunderung – Was ist da los? – Facebook

Eigentlich gibt es auf Facebook, über alle Themen der Welt Facebook-Gruppen, leider habe ich keine einzige deutschsprachige Gruppe gefunden, die sich gezielt mit dieser Thematik Code & Barrierefreiheit befasst. Da ich das ändern möchte, habe ich eine Berliner-Facebook-Gruppe gegründet. Wenn du also zu dem Artikel Fragen hast, oder du gerade in der Situation bist, deine Webseite, App, Online-Shop barrierefrei zu machen, dann bist du herzlich eingeladen in meiner Gruppe. Ich denke es ist ein extrem wichtiges Thema. Hntergrund ist natürlich der 28.06.2025 , wo das Barrierefreiheitsstärkungsgesetz in Kraft tritt.

Sei herzlich Willkommen!

Facebook-Gruppe ( Deutsch)  Austausch Gruppe  – Barrierefreie Webseite und Code  – Nur wie? 

Berliner – Gruppe – Barrierefreiheit und Code Facebook 

 

Bitte beachten – Link-Hilfe-Liste – Barrierefreiheit- und Webseiten-Entwicklung 

Bitte beachte, dass ich in diesem kurzen Artikel nicht alle wichtigen Dinge zum Thema Barrierefreiheit aufzählen kann. Ich habe auf meiner Programmier-Plattform wenn du dort etwas nach unten scrollst, auch viele Tipps für Programmierer im unteren Teil der Seite und im oberen Teil allgemeines.

Check die Link-Liste mit vielen weiteren Tipps für Entwickler und Interessierte und schau dir auch als Entwickler an, was du mit der Kolibri-Bibliothek so machen kannst im Bereich Barrierefreiheit und Coding…

Programmierung & Barrierefrei – Tipps für Anfänger  Schulhof-Programmierung- große Übersicht   Liste

 

03.06.2024  – Dienstplan-Maschine.de