4 Große Fehler bei Barrierefreiheit deiner Website, die du vermeiden solltest

Deine Website so barrierefrei wie möglich zu machen, ist wichtig, wenn du eine möglichst große Reichweite erreichen willst. Es gibt eine Menge kleiner Fehler, die passieren können wenn du deine Website einrichtest, die die Barrierefreiheit einschränken.

Webdesign beeinflusst eine ganze Menge, zum Beispiel wie deine Nutzer die Website wahrnehmen, bis hin dazu wie sie mit ihr interagieren. In diesem Artikel werden wir darauf eingehen wie diese Entscheidungen die Barrierefreiheit deiner Site beeinflussen. Außerdem werden wir die Designfallen erklären, die Barrierefreiheit einschränken und wie du diese vermeiden kannst.

Webdesign und Barrierefreiheit gehen Hand in Hand

Barrierefreiheit im Web ist ganz einfach gesagt die Optimierung von Inhalten, sodass möglichst viele Besucher deine Seite nutzen können. Dabei geht es hauptsächlich um Nutzer mit Beeinträchtigungen wie etwa Sehschwächen.
Es kann sein, dass du eine super Website gebaut hast, aber ohne ein gutes Design werden Nutzer ihr keine Aufmerksamkeit schenken. Trotzdem sollte das Aussehen deine Website nicht das Einzige sein, worauf du achtest, sondern du solltest auch im Hinterkopf behalten, wie deine Design Entscheidungen die einfache Nutzung deine Website beeinträchtigen. Wenn beispielsweise der Hintergrund deiner Website Weiß ist und du eine Schrift in Pastellfarben auswählst ist es schwerer diese zu lesen, als wenn sie in einer dunkleren Farbe wäre.


Diese Designentscheidung funktioniert nicht, weil Barrierefreiheit nicht in Betracht gezogen wurde. Es gibt eine Menge Fehler, die einem beim Thema Barrierefreiheit unterlaufen können:

  • Die sogenannte Bounce Rate kann erhöht werden. Wenn BesucherInnen deine Seite zu kompliziert finden werden sie diese sofort wieder verlassen.
  • Die Umwandlungsrate von NutzerIn zu KundIn deiner Website kann leiden. Deine Website sollte NutzerIn davon überzeugen, dass es in ihrem besten Interesse ist KundIn zu werden und schlechte Barrierefreiheit kann diesem Ziel im Weg stehen.

Deine Website zu nutzen wird keinen Spaß machen. Wenn das Navigieren deiner Website zu anstrengend ist weil du die falschen Designentscheidungen getroffen hast werden die Leute vermutlich nicht wiederkommen.
Im besten Fall ist deine Website sowohl ästhetisch ansprechend als auch einfach zu nutzen. Wenn du das dann noch mit guten Inhalten kombinierst hast du alles richtig gemacht.

4 Fehler bei Barrierefreiheit im Web die du vermeiden solltest

Es gibt eine Menge Aspekte, die die Barrierefreiheit deine Website beeinflussen. Wenn du aber schon einmal die folgenden 4 Fehler vermeidest hast du eine gute Grundlage geschaffen um eine möglichst zugängliche Website zu kreieren.

1. Wichtigen Text in Bilder einbauen

Einer der häufigsten Fehler die Leute machen ist wichtige Texte in Bilder einzubauen. Das ist ok, wenn die Texte nur dekorativ sind aber wichtige Inhalte sollten niemals Teil eines Bildes sein. Das liegt daran, dass viele NutzerInnen deine Website auf kleineren Bildschirmen, wie ihren Handys lesen. Wenn das Bild mit Text dann zu klein ist, kann es schwierig sein die Texte zu lesen. Außerdem können die Suchmaschinen Texte auf Bildern nicht lesen.
Deswegen sollte man sich immer an folgende Regel halten: Wenn dein Text wichtig ist, baue ihn nicht in ein Bild ein.
Wenn du unbedingt Text in einem Bild einbauen musst, solltest du auch nochmal in deinem Fließtext darauf eingehen. Dann können auch Nutzer mit kleinen Bildschirmen immer verstehen was du ausdrücken möchtest.

2. Überschriften falsch nutzen

Wenn du an einer WordPress Seite mit viel Text arbeitest sind Überschriften und Unterüberschriften dein bester Freund. Viele Leute sind überfordert mit langen Texten, also erklären wir euch wie man diese am besten aufteilt.
Absätze zu setzen ist natürlich wichtig. Du kannst aber auch Bilder, Listen, Tabellen oder andere Visuelle Elemente benutzen, um den Text aufzuteilen. Unserer Meinung nach sind Überschriften und Unterüberschriften aber die beste Art Texte zu unterteilen. Wenn die BesucherInnen durch deine Inhalte scrollen sollten sie ein akkurates Bild davon bekommen, was sie in den Absätzen finden werden.
Es ist außerdem wichtig, dass du nicht einfach irgendeinen Text für die Überschriften benutzt, damit Suchmaschinen wissen was deine Inhalte sind. Deswegen hier einige Tipps, damit deine Überschriften immer präzise sind:

  • Benutze Unterüberschriften um neue Abschnitte deines Textes einzuleiten
  • Vermeide vage Unterüberschriften
  • Benutze Schriftarten, die möglichst einfach zu lesen sind
    Heutzutage überfliegen die meisten NuterInnen Inhalte auf Websites, anstatt sie komplett zu lesen. Deswegen sind Unterüberschriften besonders wichtig um einen schnellen Überblick über die Inhalte zu bieten.

3. Ähnliche Farben im Design verwenden

Die Farben, die du für deine Website auswählst sind wichtiger als man denkt. Es reicht nicht einfach Farben auszuwählen, die gut zueinander passen – sie müssen auch wichtige Sektionen deiner Inhalte in den Mittelpunkt rücken, damit NutzerInnen sie leicht finden.
Am Anfang dieses Artikels haben wir gezeigt was passiert, wenn man helle Schrift auf weißem Untergrund abbildet. Grundsätzlich sollte man immer möglichst große Kontraste haben, damit die NutzerInnen Elemente gut voneinander unterscheiden können.
Auf folgende Elemente solltest du also achten:

  • Achte auf einen guten Kontrast zwischen den Elementen deiner Website. Diene
    BesucherInnen sollten auf den ersten Blick alle Elemente deiner Seite unterscheiden
    können.
  • Benutze ein Farbschema, um die richtigen Farbtöne zu finden. Komplementäre Farben
    sind hilfreich um gute Kontraste zu finden. Dadurch kannst du auch das Branding deines
    Unternehmens unterstützen.
    Kontraste richtig zu nutzen ist eine super Art die Barrierefreiheit deiner Website zu verbessern. Allerdings solltest du auch darauf achten, dass die Farben deines Schemas zueinander passen. Sonst sieht es so aus, als hättest du deine Seite im Null Komma Nix zusammengeschmissen und es wird nicht so viel Spaß machen auf deiner Seite unterwegs zu sein.

4. Schwer zu verwendende Kontaktformulare benutzen

Kontaktformulare bekommen nicht so viel Aufmerksamkeit, wie sie sollten, besonders wenn sich wichtige Elemente deiner Website sind. Sie geben dir die Möglichkeit mit deinen NutzerInnen in Kontakt zu treten, ohne deine Mailadresse teilen zu müssen. Sie sind die Grundlage für viele Gespräche.
Beispielsweise kannst du deinen NutzerInnen die Möglichkeit bieten deinen Newsletter zu erhalten. Wie du vielleicht schon weißt sind Newsletter eines der vielen guten Werkzeuge in deinem Marketing-Werkzeugkasten. Das alleine sollte schon Grund genug sein, um deinen Kontaktformularen ein wenig mehr Aufmerksamkeit zu widmen.
Wenn das Design deiner Formulare nicht intuitiv ist, kann das direkt beeinflussen wie viele deiner NutzerInnen diese verwenden und letztendlich zu weniger Umsatz führen. Hier deswegen einige Tipps die du im Hinterkopf behalten solltest:

  • Setze Rahmen (Borders) um die Felder wann immer möglich. Felder ohne Rahmen können zwar schick aussehen, erschweren aber die Orientierung
  • Beschrifte die Felder. Dann wissen die NuzerInnen was sie wo eintragen sollen
  • Designe deinen Senden-Button aufällig genug, dass NutzerInnen ihn sofort finden. Das ist besonders auch in der mobilen Version deiner Website wichtig
    Wenn du all das beachtest kannst du trotzdem noch deiner Kreativität freien lauf lassen. Nur weil sie übersichtlich seien sollten müssen Kontaktformulare nicht langweilig sein.
       Was ist die Schlussfolgerung?
    Barrierefreiheit und Webdesign sollten Hand in Hand gehen. Das heißt aber nicht, dass deine Website langweilig sein muss. Das heißt nur, dass du einiges betrachten solltest, wenn du deine Website erstellst.

Fazit: Diese 4 oben genannten Fehler solltest du vermeiden:

  • Wichtigen Text in Bilder einbauen
  • Überschriften falsch nutzen
  • Ähnliche Farben im Design verwenden
  • Schwer zu verwendende Kontaktformulare benutzen

übersetzt von Franziska Brinkmeyer
von Website Freiburg

Quelle, unser Divi Websoftware Partner Elegant Themes:
www.elegantthemes.com/blog/tips-tricks/web-design-accessibility-errors-you-should-avoid