Ist eine barrierefreie Website für dich Pflicht? Wahrscheinlich nein.

Technische Umsetzungen können schwierig sein, aber das Anpassen von Farben und Schriften schaffst du ganz leicht selbst.

Es geht in der Umsetzung von Barrierefreiheit vor allem um Farbkontraste und Farben, die Menschen anders oder auch gar nicht wahrnehmen können.

Rotgrünschwäche zum Beispiel oder vollständige Farbenblindheit (Achromatopsie), das sind echte Herausforderungen. Wahrscheinlich kennst du sogar jemanden, der einen roten und einen grünen Button nicht richtig unterscheiden kann - denn tatsächlich hat rechnerisch gesehen jeder neunte Mann in Deutschland eine Rotgrünschwäche. Bei Frauen sind es nur 0.5%. Helfen kannst du, indem du farbige Buttons zusätzlich verständlich beschriftest.

Tool zum Testen

Auch schon vor dem ganzen Tamtam um barrierefreie Webseiten hat Google auf gute Kontraste geachtet. Das zeigen auch ihre Empfehlungen und Tools wie Lighthouse.

Ich persönlich liebe Pastelltöne – Rosa, Himmelblau – und ich verstehe dich total, wenn du gerne eine weiße Schrift auf einem cremefarbenen Hintergrund verwendest. Aber glaub mir, das liest sich einfach mega schlecht. Auch wenn es schmerzt: Nimm eine schwarze Schrift. Deine Leserinnen und Leser werden dir dankbar sein!

Gute Tools - Erweiterungen für deinen Browser:

Für Chrome Lighthouse

oder silktide

 

Nur Arial für eine barrierefreie Homepage?

Leserliche Schrifttypen sind angesagt. Niemand will raten, was da in Schnörkelschrift und dann vielleicht noch nur in Großbuchstaben geschrieben steht. Musst du deshalb eine Schrift wie die Arial verwenden?

Nein. Aber überlege dir grundsätzlich, wer deinen Text lesen soll und was du ausdrücken möchtest. Wenn du emotionale Schriften verwenden willst, dann nutze sie für deine Überschriften, die Fließtexte dann besser in einer schlichten, klaren Schrift.

 

Systemschriften sind eine Alternative für deine barrierefreie Website

Was ich eine echt tolle Alternative zu Google Fonts oder Schriften von Adobe empfinde, sind Systemschriften. Schriften, die die Computer und Smartphones schon mitbringen. Damit lädt deine Seite schneller, weil keine zusätzliche Schrift geladen werden muss. Du kannst auch hier eine Auswahl definieren und damit deine gewünschte Optik vorgeben.

Stimmt - deine Website wird dann je nach Nutzer ein bisschen anders aussehen. Der Vorteil ist aber, dass deinem potenziellen Kunden die Schrift vertraut ist oder für ihn besonders gut lesbar ist.

Diese Systemschriften sind übrigens auch einfacher anpassbar, was eine Website natürlich auch barrierefreier macht. Viele Menschen mit einer Beeinträchtigung stellen nämlich Schriftart und Schriftgröße individuell ein.

So könntest du die Schrift auswählen:

body {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

}

Vielleicht noch zur Erklärung was die Schriftauswahl bedeutet:

• -apple-system und BlinkMacSystemFont sorgen dafür, dass auf macOS und iOS (bzw. in Chrome auf macOS) die native Systemschrift (wie San Francisco) verwendet wird.
• "Segoe UI" ist die bevorzugte Schrift auf Windows-Systemen.
• "Helvetica Neue" und Arial dienen als Fallback-Optionen, falls die vorherigen nicht verfügbar sind.
• sans-serif stellt sicher, dass am Ende eine generische serifenlose Schrift genutzt wird, wenn keine der anderen Optionen gefunden wird.

 

Du kannst aber auch kombinieren: Ein schöner Webfont in deinem persönlichen Stil und die Systemschrift für den Fließtext. Wenn dir aber auch da ein einheitliches Schriftbild wichtig ist, musst du grundsätzlich Webfonts laden.

Auch Bilder barrierefrei bezeichnen

Nicht nur für die Barrierefreiheit, sondern auch für deine Suchmaschinen­optimierung solltest du deine Bilder sinnvoll beschreiben. Gemeint sind ALT-Texte. Alternativtexte, die angezeigt werden, wenn ein Bild nicht geladen werden kann. Aber nicht nur das - denn auch die Suchmaschinen oder Screenreader sehen deine Bilder nicht. Sie brauchen deine Bildbeschreibungen. In den meisten CMS oder Baukastensystemen kannst du den Alternativtext für deine Bilder über deine Verwaltung eingeben.

Und: Eine Bildbeschreibung ist dann wirklich das, was auf dem Bild zu sehen ist! Möglichst kurz und relevant zu deinem Inhalt.  

 

Links - geht das auch barrierefrei?

Jap. Wenn ich meinen Kunden erkläre, dass es Tools gibt, die nur die Links auf einer Website anzeigen, kommt meistens ein - ach so! Denn wenn du Links nur mit -Weiter lesen - oder - Hier klicken - bezeichnest, ist klar, dass niemand weiß, wohin diese Links führen.

Deshalb sollte jeder Link eindeutig sein. Nach den sogenannten Erfolgskriterien gibt es hier noch besondere Stufen: den AA- und AAA-Level.

Der AAA-Level ist das aktuelle Höchstmaß, das ein SOLL, aber nicht MUSS bedeutet. Wenn du diese Regel befolgen willst, muss der Kontrast der Farben stimmen und der Linktext aussagekräftig und selbsterklärend sein.

Bei einem AA-Level reicht es aus, wenn der Zweck in einem nebenstehenden Satz erklärt wird, trotzdem ist auch hier ein sinnvollen Linktext wichtig! In jedem Fall, solltest du den Link unterstreichen, damit auch optisch klar wird -> hier ist ein Link.

Fast vergessen: Links sollten im fokussierten Zustand eine Hervorhebung erhalten. Du kannst einen Rahmen dazu nutzen oder eine kontrastreiche Farbe.