Barrierefreie Website: Darauf musst du achten (inkl. Checkliste)
Das Wort “barrierefrei” verbindet man eher mit keine Stufen, keine Hindernisse und ebenerdigen Duschen.
Eine barrierefreie Umgebung ist für Menschen, die zum Beispiel im Rollstuhl sitzen, wichtig, damit sie sich frei bewegen können.
Aber hast du dir schon einmal Gedanken darüber gemacht, dass es in der digitalen Welt auch jede Menge Barrieren gibt? Das Thema bekommt zu Recht immer mehr Bedeutung und auch wir versuchen, möglichst .
Auch wenn wir selbst noch nicht alles zu 100% umgesetzt haben oder aktuell können, sind wir natürlich bemüht, so gut wie möglich daran zu arbeiten und uns informiert zu halten, um auch unsere Websites und die unserer Kunden barrierefrei zu gestalten.
(Wir werden demnächst auch dazu noch speziell etwas zum Tool Squarespace schreiben.)
Deswegen findest du hier alles, was du zu barrierefreien Websites wissen musst.
Also: Was das genau ist, wie eine barrierefreie Website aussieht und auf was du alles achten solltest, gibt es hier. Wir werden diesen Guide auch erweitern, sobald wir aktualisierte Infos haben, denn die “Best Practices” entwickeln sich gerade laufend weiter.
Ready?
Inhaltsverzeichnis:
Was ist eine barrierefreie Website?
Eine barrierefreie Website ist eine Website, die alle Menschen nutzen und auf deren digitale Inhalte alle Menschen zugreifen können.
Und mit “alle Menschen” meinen wir Menschen mit und ohne Behinderungen. Also auch für Nutzer, die beim Hören, beim Sehen, Bewegen oder bei der Informationsverarbeitung eingeschränkt sind.
Zum Beispiel kann jemand, der gehörlos ist, deine Videos auf der Website nur sehen, aber den Ton nicht hören.
Oder Menschen, die eine Sehschwäche haben oder gar blind sind, können deine Website nur nutzen, wenn du darauf achtest, dass sie von assistiver Technik “gesehen” werden kann.
Oder jemand hat seine Hand gebrochen und kann nicht mehr mit der Maus durch deine Website scrollen.
Es gibt vier Grundprinzipien, die ganz gut verdeutlichen, was eine barrierefreie Website ist und was das Wort “barrierefrei” in der digitalen Welt bedeutet.
Zuallererst geht es um die Wahrnehmung. Deine Website, und damit meinen wir alle Bestandteile deiner Website, muss so gestaltet sein, dass alle Nutzer sie unmissverständlich wahrnehmen können.
Dann gibt es das Prinzip der Bedienbarkeit. Bedeutet, dass deine Website für alle Nutzer bedienbar sein muss. Auch für Menschen, die körperlich und geistig eingeschränkt sind. Und auch für Nutzer, die in ihrer Technik eingeschränkt sind (zum Beispiel durch eine irre langsame Wifi Connection oder ein beschädigtes Smartphone).
Als nächstes geht es um die Verständlichkeit. Deine Website muss verständlich und einfach dargestellt werden und für deine Nutzer einfach zu erfassen und zu verstehen sein. Nichts ist schlimmer, als sich ohne ein klar strukturiertes Menü durch eine Website zu klicken oder die gesuchten Inhalte einfach nicht zu finden.
Last but not least: Das Prinzip Robust. Hört sich zunächst eigenartig an, damit ist aber gemeint, dass deine Website so gestaltet sein muss, dass sie auch von assistiver Technik “gelesen” und interpretiert werden kann. Assistive Technik ist zum Beispiel ein Screenreader oder ein Braille-Editor (für blinde Menschen).
Okay, hätten wir also geklärt, was eine barrierefreie Website ist.
Aber wie sieht das in der Praxis aus?
Barrierefreie Website: So gestaltest du sie
Fangen wir mit dem offensichtlichsten an: Du musst eine klare Struktur in deine Website bringen. Das betrifft die Infos genauso wie das Layout deiner Website.
Was bedeutet das?
Klare Struktur und einfache Navigation
Du hast eine strukturierte und einfache Navigation auf deiner Webseite (Block für Navigation).
Deine URLs und Inhalte sind klar benannt, sodass man immer weiß, wo man sich gerade auf deiner Website befindet.
Auch wichtig: Du solltest deine Navigation einfach halten, deine Nutzer sollten mit wenigen Klicks auf die gewünschten Inhalte kommen.
Wichtig ist es auch, eine Suchfunktion auf deiner Website zu haben. Und man sollte sie mit einer Maus und mit der Tastatur bedienen können.
Nutzerfreundliche Inhalte und Texte
Gleiches gilt für deine Inhalte und Texte auf deiner Website. Du solltest diese so nutzerfreundlich wie möglich gestalten.
Und zwar mit Unterseiten, Überschriften, Listen, Bilder und Fließtexte - damit alles übersichtlich und klar strukturiert wird.
Apropos Texte: Achte bei deinen Texten auf die semantischen Auszeichnungen. Das ist der HTML-Content mit maschinenlesbaren Meta-Angaben.
Zum Beispiel solltest du deine Überschriften nicht nur einfach “fett” machen, sondern sie richtig als “Überschrift 1”, “Überschrift 2” und so weiter auszeichnen.
Warum?
Damit Screenreader deine Inhalte besser lesen können.
(Ist übrigens auch mega wichtig und gut für SEO. Wenn du auf die semantischen Auszeichnungen achtest, können auch Google-Bots und Robots besser verstehen, worum es auf deiner Website geht. Gut für’s Google-Ranking.)
Wenn du Blogartikel auf deiner Website hast, baue auf jeden Fall ein Inhaltsverzeichnis mit Inpage-Links ein.
Das vereinfacht das Leseerlebnis ungemein.
Und ein kleiner Tipp: Wenn ein Crawler oder ein Screenreader deine Inhalte “liest”, dann liest er sie von oben nach unten und zwar von links nach rechts.
Sich wiederholende Elemente und dein Logo werden also jedes Mal mitgelesen. Das kann nicht nur verwirrend, sondern auch nervig sein. Baue hier wenn möglich Skip-Links ein, dann kann sich auch ein blinder Nutzer deinen Text fließend anhören.
Schrift wählen und auf Kontraste achten
Als Nächstes geht es um die Schrift und Kontraste auf deiner Website. Deine Texte müssen gut lesbar sein.
Verwende also nicht eine zu kleine Schriftgröße, achte auf ausreichend Zeilenabstand und am aller besten baust du die Funktion “skalierbare Schrift” mit ein. Auch das ist leider nicht mit allen Tools möglich, aber du kannst dich informieren, ob es bei deinem Website-Programm geht.
Buttons und Links solltest du so hervorheben, dass man sie auch ganz klar als solche erkennt. Dafür kannst du eine andere Farbe als für deinen Text nehmen oder sie visuell hervorheben. Zum Beispiel kannst du deine Buttons so konfigurieren, dass sie größer werden, wenn man mit der Maus darüber fährt.
Dann solltest du dein Layout und deinen Inhalt klar voneinander trennen.
Vorder- und Hintergrund müssen sich klar voneinander abheben, damit der Text und deine anderen Elemente, wie Bilder, sich deutlich vom Hintergrund unterscheiden und gut zu sehen sind. Blauer Text auf grünem Hintergrund kommt nicht so gut und wäre kaum bis gar nicht zu sehen.
Wenn du bestimmte Textpassagen farblich hervorheben möchtest, ist es auch hilfreich, diese mit anderen Hinweis-Signalen auszustatten.
Wenn du zum Beispiel in deinem Kontaktformular oder in deinem Anmeldeformular für den Newsletter die erforderlichen Felder ( = E-Mail Adresse) nicht nur farblich markierst, sondern ebenfalls mit einem Sternchen kennzeichnet, können auch Menschen mit einer Rot-Grün-Schwäche dies besser erkennen.
Oder wenn du Grafiken oder Diagramme auf deiner Website hast, ist es ebenfalls hilfreich, den Farben auch Nummern zu geben.
Zum Beispiel hast du eine Grafik, bei der rot für Social-Media steht und blau für Fernsehen. Dann kannst du in den roten Grafikteil auch die Zahl eins hinterlegen und gleiches bei der Erläuterung. Also rot (eins) steht für Social Media. Und blau (zwei) für Fernseher.
Und noch was zum Thema Kontrast. Versuche, blinkende und flackernde Elemente zu vermeiden, um Menschen, die auf visuelle Reize mit Anfällen, z.B. Epilepsie, reagieren, auch einen nutzerfreundlichen Besuch auf deiner Website zu ermöglichen.
Leichte Sprache verwenden
Kurz vorweg: Es gibt einen Unterschied zwischen “leichter Sprache” und “einfacher Sprache”. Die einfache Sprache soll es Menschen mit geistigen Behinderungen einfacher machen, deine Inhalte und Texte nutzen zu können.
Einfache Sprache besteht aus kurzen Sätzen, die wirklich nur aus Nomen, Verb und Objekt bestehen. Natürlich musst du nicht deine ganzen Texte so gestalten, du solltest deinem Stil und deiner Brand schon treu bleiben. Für Artikel und Co. in leichter Sprache werden separate Seiten erstellt.
Aber nichtsdestotrotz: Deine Texte sollten auf jeden Fall in einer nutzerfreundlichen Sprache geschrieben werden. Vermeide Schachtelsätze und achte auf einen logischen und leicht verständlichen Satzbau. Fachjargon und Fremdwörter solltest du ebenfalls vermeiden.
(Auch hier gilt: Das solltest du eigentlich sowieso!)
Bilder mit Alternativ-Texten
Deine Bilder und Grafiken auf deiner Website sollten nicht nur eine Beschreibung bekommen, sondern du solltest bei ihnen Alternativ-Texte hinterlegen. Und zwar sollten die beschreiben, was auf dem Bild zu sehen ist. Warum?
So können Screenreader die Bilder interpretieren und vorlesen. Blinde oder sehbehinderte Menschen können sich die Bilder dann also auch “ansehen”. Übrigens ist das auch unheimlich praktisch, wenn deine Nutzer gerade eine super schlechte Internetverbindung haben und die Bilder ewig brauchen, um zu laden. Oder gar nicht geladen werden.
Und nicht nur das. Bei deinen Bildern Alternativ-Texte zu hinterlegen, wirkt sich auch positiv auf das SEO aus.
Denn nicht nur assistive Technik wie ein Screenreader kann deine Bilder so lesen, sondern auch Google-Bots und Robots, was auf jeden Fall zu einem besseren Ranking führt.
Dein Audio- und Video Content
Du hast Audio Content, zum Beispiel deine Podcast-Episoden, auf deiner Website? Dann fertige auf jeden Fall immer auch ein Transkript an, damit auch gehörlose und schwerhörige Menschen sich deine Audiodateien “anhören” können.
Bei deinen Videodateien solltest du immer mit Untertiteln arbeiten bzw. die Funktion anbieten, dein Video mit Untertiteln zu sehen. Das ist übrigens nicht nur für gehörlose Menschen super, sondern auch wenn man deine Videos gerade nicht laut gucken möchte oder kann (Kopfhörer vergessen).
Bleiben wir noch kurz bei deinem Video-Content:
Blinde oder sehbehinderte Menschen können deine Videos zwar hören, aber ihnen können zum Beispiel wichtige Handlungen, bei denen nicht gesprochen wird, entgehen.
Da hilft es, wenn du eine zusätzliche Audiospur ergänzt, in der du zum Beispiel beschreibst, was gerade passiert, wenn nicht gesprochen wird. Oder du kannst die Umgebung und die Personen beschreiben.
Dies ist natürlich sehr schwer umzusetzen, wenn du die Videos schon erstellt hast, aber es ist gut möglich, dass hier bereits AI-Programme auf dem Markt sind, die das für dich erledigen.
Warum solltest du deine Website barrierefrei gestalten?
Mit barrierefreien Elementen auf deiner Website hilfst du Menschen, die beim Sehen, Hören und in ihrer Bewegung eingeschränkt sind, deine Website voll und ganz nutzen zu können.
Du nimmst also, wie der Name schon sagt, die Barriere weg, die Menschen vom “Konsumieren” deiner Website abhalten könnte.
Damit erreichst du mehr Nutzer, vielleicht sogar eine ganz neue Zielgruppe, und kannst natürlich somit auch mehr Leads generieren und höhere Conversions erzielen.
Die Themen SEO und Usability solltest du hierbei auch bedenken. Beides Themen, die wichtig fürs Google-Ranking sind.
Natürlich musst du nicht alle Punkte umsetzen, um deine Website barrierefrei zu gestalten. Es kommt immer noch darauf an, welchen Content du auf deiner Website und welche Zielgruppe du hast.
Wie in der Einleitung geschrieben ist es nicht immer einfach, jeden einzelnen Punkt perfekt umzusetzen - und in manchen Tools geht das Ganze sehr schwierig.
Alle wichtigsten Dinge sind aber oft viel einfacher, als du vielleicht denkst - wenn man erstmal weiß, worauf man achten muss. Barrierefreiheit hat sehr viele Elemente von allgemeiner “Benutzerfreundlichkeit” - was ja ohnehin schon immer im Fokus stehen sollte.
Es ist unserer Meinung nach auf jeden Fall, kleine Dinge nach und nach umzusetzen, als zu denken “bekomme ich eh nicht hin”. Jede Verbesserung hilft.
Was ist sind die Web Content Accessibility Guidelines und für wen gelten sie?
Behörden und Bundesverwaltungen sind bereits dazu verpflichtet, ihre Websites barrierefrei zu gestalten, und zwar nach den WCAG (Web Content Accessibility Guidelines).
Ab 2025 kommen da noch ein paar Branchen hinzu - Online-Shops zum Beispiel. Deswegen bereiten sich auch in dieser Branche bereits jetzt viele auf den neuen Standard vor.
Hier bei Wikipedia findest du die genauen aktuellen Daten, wann das wie ausgerollt wird.
Also ist es gar nicht so verkehrt, dich mal mit dem Thema auseinanderzusetzen und zu schauen, wie du deine Website optimieren kannst.
Hier gibt’s eine kleine Checkliste von uns, die dir dabei hilft (keine Gewähr auf Richtigkeit und Vollständigkeit, weil sich die Daten oft ändern):
CHECKLISTE für eine barrierefreie Website
Navigation und Struktur der Website: einfaches Handling, übersichtlich und intuitiv
Texte sind gut lesbar und skalierbar: angemessene Schriftgröße, ausreichend Zeilenabstand
Kontrast von Vorder- und Hintergrund: ausreichend Kontrast zwischen Text und Hintergrundfarbe, Menschen mit Rot-Grün-Schwäche bei Farbtheme berücksichtigen
Links und Buttons gut sichtbar machen: müssen auch mit Tastatur bedienbar sein, auch im responsive Design gut erkennbar sein
Alternativ-Texte bei Bildern hinterlegen
nutzerfreundliche Sprache verwenden: keine Schachtelsätze, verständlicher Satzbau, keine Fremdwörter, kein Fachjargon
barrierefreie Formulare: die Funktionen der Eingabefelder deutlich beschreiben
Videodateien mit Untertiteln versehen und ggf. zusätzliche Audiospur
Audiodateien am besten immer transkribieren
Website muss auf allen Endgeräten (Desktop, Tablet, Smartphone) gut lesbar und barrierefrei sein
Hast du noch Ergänzungen, Erfahrungen oder weitere Tipps? Schreib sie in die Kommentare.
Diese Artikel könnten auch interessant für dich sein:
So erstellst du einen Jahresrückblick (+ deinen Plan für 2024!)
Produktbeschreibungen: So baust du sie fancy (und erfolgserprobt) auf!
Nutzt du das Internet oder nutzt es dich? So bist du bewusster online! (Interview mit Pia Röpke)
