Rosa Text auf weißem Hintergrund, Schnörkelschriften und ein flackerndes Video im Hintergrund. Was für manche nach ihrem mit Leidenschaft kuratierten Pinterest-Board auf dem Weg zur ersten Website aussieht, wird für andere zur Hürde. Designentscheidungen können deine Website für Menschen unbenutzbar machen oder sogar zur Gefahr für ihre Gesundheit werden lassen.
Barrierefreiheit ist auch heute noch ein Thema, das es nicht in alle Ecken des Internets geschafft hat. Obwohl es so wichtig für dein Business ist. Und dabei sollte das total egal sein.
Warum Barrierefreiheit im Internet wichtig ist
2024 gab es in Deutschland 7,9 Millionen Menschen mit einer Schwerbehinderung¹. Das ist fast jeder zehnte Mensch. Einige davon haben Schwierigkeiten beim Verarbeiten von Informationen, beim Sehen, Hören oder sich Bewegen.
Dein Umfeld nutzt deine Website auf ganz unterschiedliche Weise. Während deine Nichte über ihr Smartphone scrollt, zoomt dein Vater auf dem Tablet so weit ran, dass du jedes Pixel einzeln erkennen könntest. Ein Bekannter navigiert deine Website allein mit der Tastatur und die Nachbarin lässt sich deine Bilder von einem Screenreader vorlesen. Und dann ist da noch jemand ein paar Straßen weiter, der eine Spracherkennungssoftware nutzt, um dich zu kontaktieren.
Das wäre zumindest die optimale Vorstellung. Deine Website, die von verschiedenen Menschen navigiert und verstanden werden kann – und zwar so, wie es ihnen am besten liegt. Aber ist das wirklich der Fall?
Wie Barrierefreiheit deinen Umsatz stärkt
Hast du schon einmal versucht, deine Website ohne Maus, nur per Tastatur, zu navigieren? Und was passiert, wenn jemand keine Farben sehen kann? Ist deine schöne Grafik dann noch erkennbar?
Wie viele Menschen mehr würden dich sympathisch finden und bei dir buchen, wenn ihnen nur die Möglichkeit gegeben würde? Eine Website, die nicht barrierefrei ist, kostet dich möglicherweise Umsatz.
Und das nicht nur direkt. Auch Suchmaschinen wie Google und Ecosia lieben Elemente der Barrierefreiheit, wie klare Texthierarchien und Bildbeschreibungen. Barrieren können deine Website also auch weniger sichtbar machen.
Und dann ist da noch das Ding mit den Werten. Menschen kaufen heute lieber bei Marken, die ihre eigenen Ideale und Werte teilen². Ob eine Website barrierefrei ist oder nicht, sagt zumindest etwas über die Prioritäten der Marke dahinter aus. Und wie schön wäre es, wenn dein Online-Zuhause auch ein Safe Space für deine Zielgruppe sein könnte und sie gerne bei dir kauft?
Weshalb das total egal sein sollte
Mal ganz abgesehen vom möglicherweise höheren Umsatz. Wäre es nicht einfach nur fair, allen Menschen den Zugang zum Internet und den darin enthaltenen Informationen zu ermöglichen? Wenn wir dies nur tun, weil dadurch unser Umsatz steigen könnte, reduzieren wir Menschen auf ihre Kaufkraft, anstatt sie als gleichberechtigte Mitmenschen zu sehen.
Als Webdesignerin empfinde ich es jedenfalls als meine Verantwortung, den Zugang für so viele Menschen wie möglich einzurichten und das Internet für alle ein Stückchen gerechter zu machen.
Das bedeutet nicht, dass meine Websites perfekt sind. Es kann schwierig sein, eine Website wirklich frei von Barrieren zu machen. Aber wir können alle unser Bestes geben, sie wenigstens barrierearm zu gestalten und möglichst vielen Menschen die Chance auf Teilhabe zu geben.
3 wirklich einfache Umsetzungsideen für den Start
Damit du gleich beginnen kannst, möchte ich dir hier drei Ideen vorstellen, mit denen du deine Marke und Website ein Stückchen barrierefreier machst.
1. Farben, die nicht nur gut aussehen
Ein ausreichender Farbkontrast zwischen deinen Markenfarben sorgt dafür, dass auch Menschen deine Texte lesen können, die nur einige oder gar keine Farben sehen können.
In einem Farbkontrast-Checker deiner Wahl, z. B. dem Contrast Grid von Eight Shapes, gibst du die HEX-Codes deiner Markenfarben ein. Die Farben, die genügend Kontrast zueinander haben, werden mit den Gütegraden AA oder, noch besser, AAA, markiert. Alle anderen Farbkombinationen solltest du lieber nicht zusammen nutzen.
2. Lesbare Schriftarten
Auch wenn die schnörkelige oder total abgefahrene Schrift in deiner Überschrift cool aussehen mag – nutze sie lieber sparsam, denn sie kann schwer zu lesen sein. Besonders deine Überschriften und Absätze solltest du in einer Schriftart gestalten, die gut lesbar ist. Akzente, wie deine Unterschrift, kannst du dann in deiner schicken Schreibschrift gestalten.
3. Bilder, die sprechen
Nicht alle Menschen können deine Bilder sehen. Damit sie trotzdem wissen, was du ihnen damit sagen möchtest, wird ihnen der Alt-Text vorgelesen. Vorausgesetzt, jemand hat ihn vorher erstellt. Dafür gehst du in die Einstellungen deines Bildes und beschreibst in einem kurzen Stichpunkt, was auf dem Bild zu sehen ist.
Diese Beschreibungen lesen auch die Suchmaschinen und finden so heraus, wann sie dein Bild in der Bildsuche anzeigen.
3 Dinge, an die du noch nicht gedacht hast
Natürlich sind das nur die ersten drei Dinge auf einer langen Liste, die eine Website barriereärmer machen. Wenn du jemand bist, der das Internet ohne Schwierigkeiten navigiert, gibt es sicher einige Hürden, an die du noch gar nicht gedacht hast. Hier kommen drei weitere Denkanstöße.
1. Wo klicken?
Stell dir vor, du möchtest das Kontaktformular einer Dienstleisterin finden. Kein Problem, oder? Was aber, wenn du die Website nicht siehst? Auf einmal stehst du vor einem Meer an „Hier klicken“-Buttons, von denen einer zum Kontaktformular führt. Aber welcher ist es?
Damit dieses Problem auf deiner Website nicht auftritt, solltest du die Buttons eindeutig beschriften. Also zum Beispiel „Schreib mir eine Nachricht“ oder „Zum Kontaktformular“. So wird die Navigation viel einfacher.
2. Die richtige Hierarchie
Websites sind wie Bücher. Es gibt einen Titel, darunter mehrere Kapitel und manchmal sogar Unterkapitel. Wenn all diese Texte gleich aussehen, wird es jedoch schwer, zu erkennen, wann es sich um einen Titel, ein Kapitel oder einen Untertitel handelt.
So ähnlich kannst du dir das auch auf deiner Website vorstellen. Damit Screenreader die Website richtig vorlesen oder von Kapitel zu Kapitel springen können, müssen die Texte im Code richtig eingestellt sein.
Jede Unterseite deiner Website beginnt mit einem Titel, der als Überschrift 1 eingestellt wird. Darunter folgen Unterschrift 2, 3, 4 usw. So wissen übrigens auch die Suchmaschinen, welcher der Titel ist und worum es auf deiner Seite geht.
Wähle die jeweilige Art der Überschrift also nicht nach dem Aussehen aus, sondern folge einer klaren Hierarchie. Natürlich können unter einer Überschrift 1 auch mehrere Überschriften 2 mit Unterüberschriften folgen. So wie ein Buch eben mehrere Kapitel hat.
3. Mach das mal größer
Vielleicht kennst du es aus der Familie: Oma möchte dein Bild auf der Website sehen, also wird erstmal herangezoomt. Vielleicht möchte sie aber auch den Text drumherum lesen? Auf zu vielen Websites ist dieser nun verschwunden, weil sich das Layout der Website nicht an den Zoom und die Größe des Bildschirms anpasst.
Probier’s mal aus. Was passiert, wenn du bei deiner Website auf 200 % zoomst? Ist alles noch da und erkennbar? Ob das funktioniert, hängt oft mit deinem Websitesystem zusammen.
Wie du starten kannst
Bevor du jetzt in Panik verfällst, teste deine Website doch einfach mal. Ohne Maus, ganz doll rangezoomt oder in Schwarz-Weiß mithilfe des Chrome-Entwicklertools (Rechtsklick auf deine Website → Untersuchen → Rendering → Emulate vision deficiencies/Sehschwächen emulieren).
Und dann nimmst du dir die Dinge vor, die einfach zu ändern sind, wie die Farben, Buttons und Bildbeschreibungen. Und schon ist deine Website ein Stückchen barriereärmer. Für die nächsten Schritte lohnt es sich dann, sich in das Thema mehr einzulesen oder sich professionelle Hilfe zu holen.
Lass uns das Internet zu einem besseren und gerechteren Ort für alle machen!
Quellen
¹ Statistisches Bundesamt (2024)
² Narayanan S, Das JR (2022)
Über die Autorin
Maike ist Webdesignerin und Gründerin bei Maia Studio und unterstützt werteorientierte Selbstständige, Sozialunternehmen und gemeinnützige Organisationen dabei, mit menschlichen Squarespace Websites sichtbar zu werden, Haltung zu zeigen und Vertrauen zu potenziellen Kund:innen aufzubauen.
Dabei beschäftigt sie sich zum Beispiel mit:
✿ feministischem Marketing und Diversität in Designs
✿ digitaler Barrierefreiheit
✿ Social, sowie Female Entrepreneurship und Selbstständigkeit
✿ werteorientiertes Webdesign ohne Dark Patterns
Auf www.maiastudio.de kannst du mehr über Maike, ihre Geschäftspartnerin Bex und ihr Angebot erfahren.
