Barrierefreiheit im Internet: ein Plädoyer mit Anleitung

Barrierefreie Webseiten
– besseres UX, besseres SEO, mehr Menschlichkeit!

Ist dein Blog/ deine Webseite barrierefrei? Weißt du welche Maßnahmen und Punkte eine Webseite barrierefrei machen? Ich verrate dir, wie du deine Webseite mit kleinen Anpassungen optimieren und für jeden zugänglich machen kannst. 

Barrierefreiheit hört sich vielleicht nicht so sexy an wie SEO, UX und Social Media, doch es ist ein Thema, dem wir unbedingt mehr Beachtung schenken sollten.
Oft wird Barrierefreiheit nämlich eher stiefmütterlich behandelt. Vermutlich deshalb, weil Unsicherheiten darüber herrschen, wie man barrierefreie Webseiten umsetzt und was dazu nötig ist.
Zudem kommt die Sorge, dass es das schöne Design der eigenen Seite stören könnte.

Dabei ist Barrierefreiheit und gutes Design kein Wiederspruch, sondern sie verstärken sich untereinander.
Eine gute barrierefreie Seite ist auch stark auf Benutzerfreundlichkeit (UX) optimiert, was jedem Besucher zu Gute kommt.

Zudem ist Google der größte Blinde im Netz. Ist deine Webseite barrierefrei, dann ist sie auch für Google zugänglicher.

Wer benötigt barrierefreie Webseiten

Barrierefreie Webseiten benötigen Menschen, die eine körperliche Einschränkung haben. Für das Internet sind da natürlich Einschränkungen im Sehen und Hören zu nennen, aber auch Menschen, die motorische Probleme haben eine Maus oder eine Tastatur zu bedienen.

Als Sehstörung ist hier aber nicht nur die totale Blindheit zu nennen, sondern zum Beispiel auch eine Rot-Grün-Schwäche.

Barrierefreiheit erleichtert die Bedienung auch auf Smartphones, sowie bei technischen Problemen mit Tastatur, Maus oder Touchpad – es kommt daher allen deinen Besucher zu Gute.

Das Argument, dass deine Zielgruppe kein barrierefreies Webdesign benötigt, lasse ich also nicht gelten :-) Allein schon weil 8% der Männer farbenblind sind und Google der größte Blinde im Internet.
Und Google willst du sicherlich nicht ausschließen, oder?

So machts du deine Seite barrierefrei

Links:

Bei den Links werden oft die meisten Fehler gemacht. Ein Link sollte klar erkennbar sein als Link.

Es ist relativ populär geworden Links nur farblich zu kennzeichnen. Eine Person mit einer Farbsehstörung kann diesen Link unter Umständen nicht erkennen und es gehen ihm oder ihr wichtige Informationen verloren. Daher sollte man einen Link mit Unterstrich darstellen.

Auch für Personen ohne Farbsehstörung ist ein Link beim überfliegen leichter zu erkennen, wenn dieser unterstrichen ist.
Solltest du deine Links nicht unterstreichen wollen, dann solltest du zumindest eine weitere Eigenschaft außer der Farbe zur Verfügung stellen – zum Beispiel in Fett darstellen.

Allerdings hat sich ein Unterstrich zur Linkkennzeichnung etabliert, womit es für jeden klar verständlich ist – ein wichtiger Punkt auch in der Benutzerfreundlichkeit (UX).

Ein weiteres Problem: Links sollten nicht automatisch im neuen Tab öffnen.
Dies ist für Personen mit einem Reader für Blinde und für Smartphone-Nutzer ein Problem.

Öffnet sich der Link ein einem neuen Tab, kann ich nicht über den Zurück-Button zu meiner Ausgangsseite, sondern muss umständlich auf dem Gerät den Tab wechseln.

Außer der fehlenden Barrierefreiheit, sprechen auch andere Argumente dagegen einen Link automatisch in einem neuen Tab öffnen zu lassen.
Mehr Informationen dazu findest du in diesem Artikel.

Schriftart:

Wähle eine Schriftart die man gut lesen kann.
Stark verschnörkelte oder sehr grafische Schriften sind manchmal schwer zu lesen.

Für den Fließtext eignet sich im Web eher eine serifenlose Schrift.
Je nach Thema, zum Beispiel bei einer Zeitungswebsite, kann man auch eine Serifen-Schrift nehmen. Allerdings sollte man dann darauf achten dass die Schrift groß genug ist.

Schriftgröße:

Oft erlebe ich es, dass die Texte auf einer Seite zu klein sind.
Das macht es sehr schwer sie  zu lesen und wenn man lange vorm Bildschirm sitzt ist es auch anstregend mit der Zeit.
Als Richtlinie würde ich dir 16px für den Fließtext (p) empfehlen. Das kann je nach Schriftart auch variieren.

Zu der Schriftgröße kommt auch der Zeilenabstand hinzu. Dieser sollte bei Websiten nicht zu klein ausfallen. Auch das Spacing, also der Abstand zwischen den Buchstaben sollte angenehm zu lesen sein.

Schreibweise:

ÜBERSCHRIFTEN WERDEN OFT IN GROßBUCHSTABEN GESCHRIEBEN. DAMIT VERLIEREN WÖRTER JEDOCH IHR NATÜRLICHES AUSSSEHEN. Für Menschen mit einer Leseschwäche wie Legasthenie wird es damit sehr schwer Wörter zu lesen, allerdings ist es auch für andere Leser etwas mühseliger den Text zu erfassen.
Wenn du diese Schreibweise dennoch verwenden möchtest, dann solltest du dies nur punktuell tun und bei der Auswahl deiner Schrift darauf achten, dass sie auch in Großbuchstaben gut zu lesen ist.

Kontraste (Farben):

Deine Schrift, Buttons und andere Elemente sollte sich stark genug vom Hintergrund abheben. Achte daher darauf, dass der Kontrast groß genug ist.
Auf einem Smartphone im Sonnenlicht, schlecht eingestellten Monitoren oder für Menschen mit einer geschwächten Sehkraft wird deine Webseite sonst schwer zu lesen sein.

Zudem solltest du helle Schrift auf dunklem Grund vermeiden, da dies schwerer zu lesen. Besser sind dunkle Schrift auf hellem Grund.

Ob deine Farbkombination Kontratsreich genug ist kannst du mit diversen Kontrast-Checkern überprüfen. Zum Beispiel mit contrastchecker.com.

Texte

Deinen Text solltest du am Besten mit Absätzen und Zwischenüberschriften untergliedern.
So ist es leichter den Text aufzunehmen und deine Leser bekommen einen leichteren Zugang zum Text. Denn Leser scannen eher Beiträge im Web anstatt sie von vorne nach hinten durchzulesen.

Überschriften-Hierarchie

Überschriften haben eine bestimmte Hierarchie, je nach ihrer Wichtigkeit.

• H1
  • H2
    • H3
    • H3
      • H4
      • H4
    • H3
    • H3
      • H4
      • H4

Daran solltest du dich beim Erstellen deiner Text halten, weil Reader für blinde Menschen diese Hierarchie erkennen und zum nächsten Unterpunkt oder auch zu einem gleichwertigen Punkt springen können

Google erkennt diese Hierarchie übrigens auch und kann deine Seite besser analysieren.

• Die H1 sollte pro Seite nur einmal vergeben werden. Das ist dein Beitragstitel.
• Die H2 kannst du für den Teaser oder den ersten Abschnitt nutzen
• die nächsten Überschriften sollten sollten dann ihrer Wichtigkeit nach geordnet werden.

Menüstruktur

Deine Menüstruktur und der Aufbau deiner Seite sollte klar verständlich sein.
Vermeide poetische Betitelungen deiner Menüpunkte. Der Leser sollte sofort verstehen, was sich hinter dem Punkt verbirgt. Zudem sollten Menüpunkte nicht zu lang sein.

Bilder und andere Medien

„Ein Bild sagt mehr als Tausend Worte!“
Daher ist es gut und sinnvoll Bilder in Beiträgen und auf der Seite einzubinden.
Blöd nur das Blinde Menschen und Google das Bild nicht sehen können.

Dafür gibt es jedoch das Attribut „Alt-Text“ also der Alternative Text.
Dieser ist, wie der Name schon sagt, eine Alternative dafür, wenn man das Bild nicht sehen kann oder es nicht angezeigt werden kann.
Trage hier die Information ein, die du eigentlich über das Bild transportieren möchtest. Deine sehenden Leser werden diesen Text auch nicht sehen.

Außer dem Alt-Attribut solltest du auch dem Bild einen eindeutigen Titel mit den Keywords geben und die Bildunterschrift nutzen. So können Blinde Menschen und auch Google deine Seite besser auslesen und Zusammenhänge verstehen.

Slider, Filme und Musik

Slider, Filme und Musik sollten nicht automatisch starten und abspielen, denn dies kann bei Personen mit einem Aufmerksamkeitsdefizit-Problem die Aufmerksamkeit sehr stark beeinträchtigen.

Außerdem verbraucht das automatische starten Datenvolumen deiner Besucher – sehr ärgerlich für Smartphone-Nutzer.
Es ist zudem sehr sehr nervig. Wenn ich eine Website öffne und jemand fängt an mich vollzuquatschen aus einem Video oder es wird direkt Musik abgespielt, dann schließe ich die Website sofort, vor allem wenn ich über die Google-Suche gekommen bin und mehrere Tabs gleichzeitig geöffnet habe.

Lasse lieber deinen User selber die Medien starten und abspielen.

Flackernde Elemente

Füge keine flackernden und blinkenden Elemente ein. Abgesehen davon, dass sie hässlich sind, können sie auch epileptische Anfälle auslösen.

Buttons

Buttons und andere „Call to Actions“ sollten klar betitelt und dargestellt werden. Es sollte klar sein, was passiert wenn ich auf den Button klicke und auch der klickbare Bereich des Buttons sollte gut zu erkennen sein. Das ist für alle Leser sinnvoll und erleichtert die Bedienung der Webseite – UX lässt grüßen :-)

Captcha

Nutze keine Captchas auf deiner Seite.
Captchas sind diese kleinen Bilder mit Text, den man dann eingeben muss.
Sie werden eingesetzt um Spam-Kommentare und Spam-Mails zu reduzieren die von Robots gesetzte werden.

Das Problem ist, dass die Robots immer besser werden und somit die Captcha-Bilder immer schwieriger.

Das macht es mittlerweile sogar für normal sehende Menschen schwer ein Captcha zu lesen. Manchmal gibt es auch bei Browsern Darstellungsprobleme, sodass man das Captcha nicht sehen kann und erstmal den Browser wechseln muss. Captchas sind außerdem sehr nervig für jeden der sie eingeben muss.

Captchas sind nicht barrierefrei, weil blinde Menschen das Captcha nicht sehen können. Versuche wie „dann bieten wir ein visuelles und als Alternative ein akustisches Captcha an“ sind sehr aufwendig und immer noch nicht komplett barrierefrei.

Die Lösung dazu: Lasse das Captcha und nutze ein Antispam-Plugin.
Zum Beispiel „AntiSpam-Bee„.
Alle deine Leser werden es dir Danken.

Wenn du dich noch weiter einlesen möchtest, dann kann ich dir diesen Artikel sehr ans Herz legen.

Formulare

Die Beschriftung sollte eindeutig sein. Was muss ich wo eingeben und was passiert wenn ich wo klicke. Hilfetexte bei Formularen können ebenfalls sehr hilfreich sein. Zum Beispiel in welcher Form eine Telefonnumer oder ein Datum eingeben werden soll.

Zudem sollte der Bereich, in denen geschrieben werden kann, klar zu erkennen sein. Oft sind die Umrandungen nämlich nicht dunkel genug.

Fazit

Wenn man von Anfang an beim Erstellen der Webseite auf die Barrierefreiheit achtet, ist es sehr leicht seine Seite barrierefrei zu gestalten. Und auch wenn man erst im Nachhinein damit anfängt genügen wenige Handgriffe.
Zudem nutzt das optimieren allen Lesern, denn auch für sie ist es leichter die Webseite zu benutzten. Und wir wissen ja, User Experience ist sehr wichtig. Zudem optimiert man seine Seite auch gleichzeitig für Google und für mobile Endgeräte.

Plädoyer

Ich finde aber auch, wir sollten unsere Webseiten schon deshalb barrierefrei gestalten um allen Menschen Zugang zum Internet zu ermöglichen und Wissen und Informationen frei zu machen. Denn oft erschweren wir den Zugang oder auch die Teilnahme durch so unnötige Dinge wie Captchas.

Man könnte gar ein moralisches Thema daraus machen. In was für einer Welt wollen wir leben?
Es wird oft über Chancengleichheit in der Bildung gesprochen und versucht Bildung und Wissen nicht nur wohlhabenden Menschen zu ermöglichen.
Da frage ich mich, warum es im Web noch immer Gang und Gäbe ist zu sagen „nur gesunde Menschen seien unsere Zielgruppe“ und Webseiten nicht barrierefrei zu machen. Denn so schließt man mutwillig und bewusst Menschen mit einem Handicap aus.

Es macht mich traurig, dass man so oft mit Googel, UX und responsive argumentieren muss, damit eine Sache barrierefrei umgesetzt wird, statt aus dem Grund jedem Menschen eine Chance zu geben.

Bei Bloggern und Selbstständigen, die sich ohne Webdesign-Kenntnisse eine Webseite aufbauen, ist natürlich oft das Wissen nicht da, wie man eine Seite barrierefrei gestaltet.
Daher habe ich in diesem Artikel Punkte angesprochen, die jeder über Einstellungen und wenn nötig ein wenig CSS umsetzten kann.

Daher ein Appell an alle – bemühen wir uns ein Web aufzubauen zu dem jeder Zugang hat und Werte, die uns sonst auch so wichtig sind, wie Gleichberechtigung und Integration auch ins Web zu übertragen.

Wer sich noch tiefer mit dem Thema beschäftigen möchte, dem kann ich diese Webseite ans Herz legen: www.einfach-fuer-alle.de/umsetzen von Aktion Mensch