Vier Regeln für weniger Barrieren

„Ein Netz für Alle – viel mehr als eine gute Tat!“ So hieß 2004 mein erster Vortrag für die webgrrls. Seitdem gehört Barrierefreiheit für mich zur Planung und Umsetzung von Websites. In meiner Arbeit war die Nachfrage aus der Privatwirtschaft lange gering. Seit dem 28. Juni 2025 macht das Barrierefreiheits-Stärkungsgesetz (BFSG) Barrierefreiheit für bestimmte Angebote auch dort zur Pflicht.

Mich hat lange gestört, wie wenig Aufmerksamkeit das Thema bekam. Auch mit dem deutschen Begriff habe ich mich nie ganz angefreundet: „Zugänglichkeit“ beschreibt für mich unmittelbarer, worum es geht. Bereits 1997 formulierte Tim Berners-Lee, der Erfinder des World Wide Web, den Grundgedanken: Die Stärke des Webs liegt darin, dass alle Menschen Zugang haben – unabhängig von einer Behinderung.

„The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.“

Vielleicht fällt dein Angebot unter das BFSG, vielleicht auch nicht. Eine erste Orientierung bietet dir der BFSG-Kurz-Check. Unabhängig von einer gesetzlichen Pflicht kannst du mit den folgenden vier Regeln häufige Barrieren auf deiner Website erkennen und abbauen. Eine vollständige Prüfung ersetzen sie nicht.

Was du ohne Programmier­kenntnisse selbst prüfen kannst

1. Achte auf ausreichenden Kontrast

Hellgrauer Text auf weißem Hintergrund mag dezent aussehen, lässt sich aber oft schlecht lesen. Ein ausreichender Kontrast hilft Menschen mit eingeschränktem Sehvermögen. Er erleichtert das Lesen auch dann, wenn Sonnenlicht auf den Bildschirm fällt.

Das Kontrastverhältnis beschreibt, wie stark sich die Helligkeit von Text und Hintergrund unterscheidet. Je höher der Wert, desto größer der Unterschied. Für normalen Text verlangen die Web Content Accessibility Guidelines (WCAG), die internationalen Richtlinien für barrierefreie Webinhalte, in der Stufe AA einen Mindestwert von 4,5:1. Bei großer Schrift reicht 3:1: ab 24 CSS-Pixeln bei normaler Schrift oder rund 19 CSS-Pixeln bei Fettschrift. Auch Symbole und grafische Bestandteile, die zum Verständnis notwendig sind, brauchen ausreichenden Kontrast. Hier gilt ein Verhältnis von mindestens 3:1 zu den angrenzenden Farben. Für reine Dekoration gilt diese Vorgabe nicht.

Prüfe besonders die Farben deiner Fließtexte und Links. Die weiter unten genannten Testtools helfen dir dabei.

2. Gliedere deine Inhalte mit Überschriften

Überschriften machen die Struktur eines Textes sichtbar. Damit diese Gliederung auch technisch erkennbar ist, gibt es in HTML, der Auszeichnungssprache für Webseiten, die Überschriftenebenen H1 bis H6. Die Hauptüberschrift deiner Seite erhält die Ebene H1. Für die folgenden Abschnitte verwendest du H2, für deren Unterabschnitte H3. Wähle die Ebene nach der inhaltlichen Gliederung, nicht nach der gewünschten Schriftgröße.

Das hilft auch Menschen, die einen Screenreader nutzen. Diese Software gibt Bildschirminhalte als Sprache oder über eine Braillezeile aus. Mit ihr lassen sich Überschriften gezielt ansteuern, um einen Überblick zu bekommen oder einen Abschnitt zu finden. Im WordPress-Editor kannst du die Ebene im Überschriften-Block auswählen. Nur größer oder fett gesetzter Absatztext bleibt technisch ein Absatz.

Verwende bei Aufzählungen außerdem die Listenfunktion deines Editors. Nummerierte Listen eignen sich etwa für eine Anleitung, bei der die Reihenfolge der Schritte wichtig ist.

3. Gib deinen Bildern passende Alternativtexte

Ein Screenreader kann den Inhalt eines Bildes nicht einfach erkennen. Dafür braucht das Bild einen Alternativtext, kurz Alt-Text. Dieser wird im HTML-Code im alt-Attribut hinterlegt. Beschreibe, welche Information das Bild an dieser Stelle vermittelt. Bei einem Screenshot zu einer Anleitung kann das die gezeigte Einstellung oder Funktion sein. Eine Beschreibung aller sichtbaren Einzelheiten hilft meist weniger.

In WordPress kannst du einen Alternativtext bereits beim Hochladen in die Mediathek eintragen. Prüfe beim Einfügen im Editor, ob er zum jeweiligen Zusammenhang passt. Dasselbe Bild kann in verschiedenen Beiträgen eine andere Aufgabe haben. Reine Schmuckbilder brauchen keine Beschreibung. Sie erhalten ein leeres Alt-Attribut (alt=""), damit Screenreader sie überspringen. Achte darauf, dass das Attribut tatsächlich leer ausgegeben wird und nicht ganz fehlt.

Bei komplexen Grafiken reicht ein kurzer Alt-Text häufig nicht aus. Erkläre die notwendigen Informationen dann zusätzlich im umgebenden Text oder in einer ausführlichen Bildbeschreibung. Eine Bildunterschrift kann dafür ausreichen, wenn sie alle wesentlichen Informationen vermittelt. Alt-Text und Bildunterschrift müssen sich dabei nicht wortgleich wiederholen.

4. Mach Links erkennbar und bedienbar

Links sollten im Fließtext als solche erkennbar sein. Eine Unterstreichung macht deutlich, dass sich hinter dem Text ein Verweis verbirgt. Eine andere Farbe allein kann leicht übersehen werden. Auch der Linktext sollte erklären, wohin der Verweis führt. „Cheat-Sheet zur Barrierefreiheit“ ist aussagekräftiger als „hier klicken“. Das hilft besonders dann, wenn jemand per Tastatur oder mit einem Screenreader von Link zu Link springt.

Verwende für Verweise echte Links mit einer hinterlegten Zieladresse. Im HTML-Code sind das <a>-Elemente mit einem href-Attribut. Der Link-Dialog im WordPress-Editor erstellt sie für dich. Eine nachgebaute Klickfunktion per JavaScript bietet nicht automatisch dieselben Möglichkeiten.

Teste auf deiner Website: Kannst du die Links mit der Tastatur erreichen? Drücke die Tab-Taste und beobachte, wie die Auswahl durch die Seite wandert. Du solltest jederzeit sehen können, welcher Link gerade ausgewählt ist. Mit der Eingabetaste lässt er sich öffnen.

Testtools für einen ersten Check

Browser-Erweiterungen helfen dir, typische Barrieren aufzuspüren. Diese beiden nutze und empfehle ich:

• WAVE für Chrome, Firefox und Edge zeigt unter anderem Kontrastprobleme, die Überschriftenstruktur und fehlende Alternativtexte an.
• Silktide Toolbar für Chrome bietet neben automatischen Prüfungen auch Simulationen, etwa für Farbsehschwächen, und eine Screenreader-Simulation.

Die Ergebnisse brauchen allerdings einen zweiten Blick. So erkennt ein Tool, dass ein Alt-Text vorhanden ist. Ob er den Bildinhalt im jeweiligen Zusammenhang sinnvoll beschreibt, musst du selbst beurteilen.

Auch die Screenreader-Simulation eignet sich vor allem zum Kennenlernen. Für eine gründliche Prüfung brauchst du einen echten Screenreader, etwa das kostenlose NVDA unter Windows oder VoiceOver, das auf dem Mac bereits installiert ist. Die automatische Prüfung ergänzt also deine eigenen Tests, etwa die Bedienung mit der Tastatur.

Fang mit einem Beitrag an

Mit diesen vier Regeln kannst du häufige Barrieren auf deiner Website abbauen. Einige Änderungen lassen sich direkt im Editor umsetzen. Andere brauchen einen Blick auf die technische Umsetzung. Davon profitiert auch deine Sichtbarkeit: Suchmaschinen und KI-Systeme lesen Überschriften, Alt-Texte und Linktexte ähnlich aus wie ein Screenreader. Mehr Zugänglichkeit hilft deshalb bei Suchmaschinenoptimierung (SEO) und Generativer Engine Optimization (GEO), die Optimierung für KI-Suchen.

Nimm dir zum Einstieg einen Beitrag vor: Prüfe die Kontraste und die Gliederung. Schau dir anschließend die Bilder und Links an. So wird aus den Regeln eine überschaubare Aufgabe, und du merkst, worauf du bei weiteren Beiträgen achten kannst.

Wenn du tiefer einsteigen möchtest, findest du weitere Hinweise in den Unterlagen zu meinem Workshop: Mehr Reichweite – weniger Barrieren: in der Präsentation und im Cheat-Sheet.

Du möchtest deine Website zugänglicher machen und weißt nicht, wo du anfangen sollst? Ich prüfe deine Seite und setze die nötigen Maßnahmen für dich um. Sprechen wir darüber.

Schon gehört? Das DSGVO-Gesetz kommt. Und zwar schon bald. Am 25. Mai tritt sie in Kraft. Die Netzwelt hat eine neue Sau, die sie durchs globale Dorf treiben kann. Ach, Sie haben noch nichts davon gehört? DSGVO oder besser EU-DSGVO steht für Datenschutz-Grundverordnung. Es gibt sie bereits seit 2016. Nach einer Übergangsfrist gilt sie nun ab dem 25. Mai für den Umgang mit personenbezogenen Daten. Sie ist verbindlich in der europäischen Union. Da gibt es aber doch das Bundes-Datenschutzgesetz (BDSG)? Ja, stimmt. Aber das wurde angepasst an die neue EU-Verordnung, gilt ebenfalls ab Mai und löst das bisherige bundesdeutsche Gesetz ab.

Datenschutzerklärung nach DSGVO

Ja und jetzt? Naja, jetzt zittern alle, die sich bisher nicht um den Datenschutz gekümmert haben. Ach nein, nicht alle zittern: Da gibt es die Rechtskundigen in der Netzwelt. Bisher haben sie ihr Fachwissen in Form von Vorlagen für Impressum und Datenschutzerklärung gegen Angabe der Quelle kostenfrei zur Verfügung gestellt. Damit konnten viele Kleinstunternehmerinnen und Einzelkämpfer der Kennzeichnungspflicht ihrer Webseiten nachkommen. Denn Anwälte zahlt diese Klientel nicht aus der Portokasse.

Nun aber herrscht Goldgräberstimmung: Vorlagen, die bereits für die neue EU-Verordnung optimiert sind gibt es fast nur noch gegen Cash. Und da Anwälte ja bekanntlich nicht werben dürfen, heizen sie die Angst vor der DSGVO allerorten an. Da geben wir schon mal Geld aus für ein Papier mit Handlungsanweisungen oder schließen ein Abo ab.

Rechtssicherheit beim DSGVO-Gesetz

Und damit bin ich jetzt im grünen Bereich und vor Abmahnungen geschützt? Leider nein. Keine der derzeitigen Vorlagen für die Datenschutzerklärung kann Rechtssicherheit garantieren. Abmahnanwälte und -vereine stehen vermutlich bereits in den Startlöchern. Ob Einzelkämpferinnen wie ich dem Datenschutz zukünftig genügen können, werden nur Gerichtsentscheide bringen. Oder der Gesetzgeber schiebt diesen Praktiken endlich einen Riegel vor. Denn Deutschland ist das einzige Land in der EU, das Abmahnanwälten oder -vereinen zu ihrer zweifelhaften Daseinsberechtigung verhilft.

Wir werden wohl zunächst damit leben müssen nicht genau zu wissen, ob wir alles richtig machen. Und das geht den Fachanwälten der Branche ebenso. Derzeit weiß niemand, welche Stolperfallen Webworker umgehen müssen, um keine kostenbewährte Abmahnung zu kassieren.

Was ändert sich denn nun?

Was müssen wir denn eigentlich anders machen als bisher? In einschlägigen Foren zu WordPress wird dazu geraten, viele Funktionen einfach abzuschalten. Analyse der Nutzerzugriffe, Abwehr von Spam, Kontrolle über Kommentare im Blog, ja selbst Kontaktformulare und Sicherheits-Plugins. Alles abschalten. Sie könnten gemäß DSGVO-Gesetz Nutzerdaten erheben. Ja, ja, denn auch IP-Adressen sind personenbezogene Daten, die schützenswert sind.

In meiner Berufswelt ist das DSGVO-Gesetz gerade DER Hype. Die meisten scheinen dabei allerdings zu vergessen, dass die neue EU-Verordnung nicht den Verzicht auf Datenerhebung fordert. Es steht sogar ausdrücklich drin, dass Unternehmen ein Recht haben, die für ihre wirtschaftliche Tätigkeit notwendigen Daten zu erheben. Sie sollten damit nur möglichst sparsam umgehen und – ganz wichtig – für Transparenz bei deren Nutzung sorgen.

Wichtig ist auch die Umkehr der Beweislast. Ab Mai müssen Betreiber von Webseiten und -diensten nachweisen, dass sie alle Anforderungen an den Datenschutz befolgt haben. Es besteht die Pflicht zur Dokumentation und zum Schutz der Daten vor dem Zugriff Dritter.

Und was gibt’s gemäß DSGVO-Gesetz zu tun?

Ich bin keine Anwältin und habe mich bisher bei meinen Projekten und für meine Kunden am deutschen Datenschutzgesetz orientiert. Ich sehe bei der Verarbeitung von personenbezogenen Daten keine allzu großen Änderungen und kann daher die Hysterie, die bisherigen Tools und Plugins für WordPress über Bord zu werfen nicht nachvollziehen.

Spürbare Änderungen gibt es aber bei der Dokumentation zur Verarbeitung der Daten. Aus 1 Seite Datenschutzerklärung werden jetzt leicht 3-5 Seiten. Zudem müssen alle, die mit Personendaten umgehen, deren Verarbeitung dokumentieren.

Die ToDo-Liste

• Datenschutzerklärung gemäß DSGVO-Gesetz
  Ja, es gibt sie noch, die kostenfreien Angebote. Ich nutze derzeit den Generator der Deutschen Gesellschaft für Datenschutz (DGD).
• Verzeichnis von Verarbeitungstätigkeiten
  Darin musst du dokumentieren, welche Personen oder Stellen mit den erhobenen Daten umgehen und welche Techniken im Einsatz sind. Das bayerische Landesamt für Datenschutz hat dazu eine „Handreichung für kleine Unternehmen“ ins Netz gestellt.
• Auftragsverarbeitung
  Bisher hieß es Auftragsdatenverarbeitung und war auch bereits eine Vorgabe des Bundes-Datenschutzgesetzes. Wer eine Webseite bei einem Provider hostet, muss mit ihm einen solchen Vertrag zur Auftragsverarbeitung abschließen. Bei den meisten Providern muss man derzeit aber ausdrücklich danach fragen. Auch für die Nutzung von Google-Diensten ist ein solcher Vertrag Pflicht.
• Und was ist mit WordPress?
  Das CMS selbst speichert Daten aus den Nutzerprofilen oder über die Kommentarfunktion. Auch das genutzte Theme könnte Daten speichern oder weiterleiten. Und wer Plugins nutzt für statistische Zwecke oder um die Installation abzusichern erhebt ebenfalls personenbezogene Daten. Die Website enthält ein Kontaktformular? Dann werden auch hier Daten erhoben. Bedenklich dabei sind alle Plugins oder Dienste, die von fremden Server kommen. Insbesondere wenn die Server in Ländern außerhalb der EU betrieben werden.
  • Statistik
    Tools von Automattic, Google-Analytics, Piwik etc.   
  • Schriften und Fonts
    Google-Fonts in Themes enthalten
  • Kommentarfunktion
    Eintrag in die Datenbank etc.
  • Sicherheit
    Spamabwehr, Firewall, Login-Beschränkung
  • Cookies

Noch ein Hinweis

Dann wollen wir mal loslegen und unsere und die Webseiten unserer Auftraggeber:innen möglichst wasserdicht machen. Dabei solltest du aber die Haftung nicht vergessen, denn Webworker haften für ihre Werke. Ich werde daher nur Empfehlungen aussprechen und lasse mir von meinen Kund:innen bestätigen, dass sie mich beauftragt haben, die von ihnen erstellten Inhalte der Datenschutzerklärung in ihre Website zu stellen.

Wie macht ihr das? Habt ihr schon Erfahrungswerte?

Drehen wir den Spieß um – Aussteller als Zielgruppe

Warum also nicht selbst aktiv werden und solche Gespräche für die eigene Akquise auf Messen nutzen? Die gesammelten Daten eignen sich durchaus als Grundlage für eine Neukundenaktion. Allerdings sollte man einen solchen, zielgerichteten Messebesuch gut vorbereiten.

Die richtige Vorbereitung für die Akquise auf Messen:

• Zunächst sollten die Branchen, die auf der Messe vertreten sind zu deinem Zielgruppenraster passen. Dann kennst du im besten Fall bereits die einschlägigen Fachbegriffe.
• Das Ausstellerverzeichnis bietet Unterstützung wenn es darum geht, für dich interessante Firmen auszuwählen. Die wichtigsten Kontaktdaten zum Unternehmen sind dort zu finden. Wie das Unternehmen tatsächlich tickt, sagen diese Daten dir allerdings nicht.
• Der Hallenplan hilft dir, deine Besuchsrunde von Halle zu Halle festzulegen. Dann läufst du dir nicht unnötig die Füße platt. Deine ToDo-Liste sollte auch nur so viele Kontaktwünsche enthalten, wie an einem Messetag bequem zu bewältigen sind.
• Visitenkarten und ggf. Flyer gehören unbedingt ins Gepäck. Meine Fragen notiere ich in Evernote ebenso wie die erhaltenen Infos. Ich nutze diese Anwendung sowohl auf meinem Handy als auch am heimischen Rechner. Meine Messeausbeute kann ich so später bequem auswerten.
• Für die aussagekräftige Vorstellung deines Angebots bereitest du deinen Elevator-Pitch vor und bringst so deine Kernaussage auf den Punkt.

Gespräche auf der Messe

Die Außendienstmitarbeiter einer Firma sind die häufigsten Ansprechpartner, die man am Messestand trifft. Da sie eigens für die Kontaktpflege vor Ort sind, haben sie meist Zeit für Gespräche. Mit deinen Fragen kommst du im besten Fall an Zusatzinformationen, denn im Plauderton erfährst du deutlich mehr als die üblichen Infos aus Website und Werbematerial. Zudem kannst du am Verhalten deiner Gesprächspartnerin oder deines Gesprächspartners deren Zufriedenheit und Motivation mit ihrem Unternehmen ablesen. Wer seinen Mitarbeitern Wertschätzung entgegenbringt, steht auf meiner Wunschkundenliste ganz oben.

Mein Business bringe ich dabei ganz nebenbei ins Spiel und frage nach dem geeigneten Ansprechpartner im Unternehmen. Damit habe ich einen Fuß in der Tür, ganz so als hätte ich angerufen.

Fazit: Akquise auf Messen

Zugegeben diese Methode ist aufwändiger als ein Erstkontakt per Telefon. Du kannst dir aber gleich eine kleine, feine Liste der für dich interessanten Unternehmen zusammenstellen. Bei nachfolgenden Akquise-Maßnahmen kannst du dich zudem besser auf das Gespräch mit dem genannten Ansprechpartner vorbereiten. Und da du dich auf das Messegespräch beziehen kann, nimmt dir das vermutlich deine Berührungsängste. Für mich ist Messe eher „Warm-Akquise“.

Ist das eigentlich nur mein Problem? Was meinst Du dazu?

Für den diesjährigen Webkrauts-Adventskalender habe ich ein Thema gewählt, das mir sehr am Herzen liegt. Konzeption und Projektplanung sind nach meiner Erfahrung die wichtigsten Voraussetzungen für eine erfolgreiche Website. Unternehmensziele klar benennen, die Zielgruppe kennen und das eigene Angebot darauf ausrichten sind die wichtigsten Bausteine bei der Planung und Realisierung einer Website. Und das gilt auch für kleine und mittlere Projekte.

Mit meiner Kollegin und Partnerin, Christa Goede, habe ich bereits mehrere Projekte auf dieser Basis erfolgreich umgesetzt. Unsere Kundinnen und Auftraggeber waren immer äußerst zufrieden mit ihrem neuem Webauftritt, der genau auf sie und ihr Unternehmen zugeschnitten wurde. Für Christa ist die genaue Planung eines Webprojektes ebenso wichtig wie für mich. Sie hat mich daher bei meinem Beitrag gern unterstützt.

• zickige Browser, die nicht so wollen wie ich will,
• Webstandards, die ich möglichst einhalten will/sollte,
• einfache Nutzbarkeit auf Seiten der User
• und natürlich die Vorgaben eines Kundendesigns, das sich vor allem an der Optik orientiert.

Warum ich das liebe? Es ist die tollste Herausforderung in meinem Berufsleben. Das ist mir so richtig bewusst geworden als Annette Lindstädt zu ihrer Blogparade aufgerufen hat. Spät dran bin ich, denn die Worte fließen mir nicht so einfach aus der Feder. Ganz anders, wenn ich komplexe Layouts für die verschiedenen Browser in möglichst einfachen CSS-Code umsetze.

Was ist so toll an diesem Fummelskram?

Ich bin halt stur und gebe mich nicht mit dem einfachen Quadratisch-Praktisch-Gut-Layout zufrieden. Ich reize gern alle Möglichkeiten aus, die diese Stilsprache mir bietet. Rahmen sprengen oder Grenzen überschreiten ist meine Hauptmotivatation dabei. Auch wenn ich selten Neues erfinde – denn es gibt viele mit der gleichen Profession – macht es mir großen Spaß, die vielfältigen verfügbaren Beispiele für meine spezielle Aufgabenstellung umzustricken, anzupassen und im besten Fall zu vereinfachen.

Langeweile? nö

Die Herausforderungen sind dabei so vielfältig, dass mir bisher nie langweilig wurde. Jedes Layout hat neue Feinheiten, die mich ganz fordern und meine Kreativität zu Höchstleistungen treiben. Kreativität in der Beschränkung: Das ist die Gemeinsamkeit mit der Kunst der Fuge. So meisterlich wie Bach bin ich dabei nicht, das maße ich mir nicht an. Aber das Ergebnis kann sich immer sehen lassen. Es freut zunächst meine Kunden, deren Layout ich möglichst genau umsetze. Es freut aber auch mich, wenn nach langem Tüfteln in allen wichtigen Browsern meine Umsetzung so funktioniert, dass

• die Optik stimmt
• und die Usability nicht auf der Strecke bleibt.

Das meiste spielt sich „unter der Haube“ ab. Aber genau das fasziniert mich! Eine Webseite, die schön aussieht und zwar auf vielen Plattformen. Große Bildschirme sollen ebenso davon profitieren wie hochauflösende Tablet-Screens und nicht zuletzt sollen auch Smartphone-Nutzer eine ansprechende Präsentation der Inhalte genießen dürfen.

Weniger ist mehr

Das alles sehen die Nutzer nicht auf den ersten Blick. Es ist aber zu spüren, wenn Webinhalte sowohl am Schreibtisch als auch unterwegs auf dem Phone lesbar und nutzbar sind. Dann bin ich zufrieden mit meiner Arbeit. Und besonders stolz bin ich, wenn ich selbst aufwändige Stilangaben im CSS-Code auf ein Minimum reduzieren konnte.

Echter Lieblingsjob

Ja, ich liebe diesen meinen Lieblingsjob. Denn er fordert von mir alle Talente, die ich habe:

• Kreativität,
• Detailverliebheit,
• ein waches Auge,
• den ordnenden Geist,
• und vor allem das Interesse an immer neuen und gerne verrückten Lösungen.

Kein anderer Job konnte das in meinem vorherigen Berufsleben so gut erfüllen. Ich bin mir ganz sicher: Mit diesem Job gehe ich in Rente :-).

Bildquelle: pixabay