E-Accessibility für Deine Projekte im Webdesign
Ein Gastbeitrag von Alexandra Frey – Expertin für digitale Barrierefreiheit
Inhaltsverzeichnis Show
Du willst gleich wissen wie hoch das Potential ist, deine gestalteten Webseiten BarriereFrey aufzubereiten?
Dann lass die Webseite gleich mal mit WAVE Web Accessibility Evaluation Tool (webaim.org) überprüfen und klicke auf das Wave Logo.
Alternativ kann ich Dir auch den deutschsprachigen Barrierefreiheits-Test von Experte.de empfehlen. Dort werden nicht nur einzelne Unterseiten Deiner Website auf Herz und Nieren geprüft, sondern Deine Website insgesamt.
Und ja. Hier lege ich gleich mit richtig guten Tool los.
Damit du an der Stange bleibst.
Damit du merkst, dass ich Ahnung habe.
Damit du bereits mit nur einem Blogartikel zur digitalen BarriereFreyheit beitragen kannst.
Aber erstmal ganz von Anfang:
Was ist eigentlich diese Digitale BarriereFreyheit?
Die E-Accessibility ist der Zugang zu digitalen Inhalten für alle Personen. Sprich die Webseite mit dem Design und der technischen Komponenten sind so gestaltet, dass sämtliche Personen darauf zugreifen können. Die E-Accessibility ist dazu unter der digitalen Barrierefreiheit bekannt.
Alles schön und gut, aber:
Warum sollte eine Webseite oder das Design barrierefrei sein?
So oder so ähnlich wird mir die Frage gestellt.
Und darauf gibt es eine einfache Antwort:
Von einem barrierefreien Webdesign profitieren nicht nur behinderte Personen, sondern jede Person, die eine Webseite aufruft.
Und welche Punkte das genau sind und wovon auch du profitierst, zeig ich dir im nächsten Abschnitt.
5 Vorteile eines barrierefreien Webdesigns
Es gibt zahlreiche Vorteile einer barrierefreien Webseite.
Konzentrieren wir uns aber auf die 5 wichtigsten:
Inklusion und Chancengleichheit
Vergrößerung der Zielgruppe
Positives Erlebnis einer potentiellen Kundschaft
Image und Ansehen
Vereinbarkeit von UI, UX und Digitale BarriereFreyheit
Gehen wir auf jeden Vorteil einzeln und ein bisschen detaillierter ein.
Inklusion und Chancengleichheit
Durch barrierefreie Webseiten wird natürlich die Inklusion und Chancengleichheit gefördert. Sprich das Webdesign ist für sämtliche Personen zugänglich. Ob es der Farbkontrast, die Sprache und Tonalität der Texte, die Anordnung bestimmter Elemente, die Schrift oder der Checkout sind.
Alles hängt zusammen.
Und jedes Element benötigt eigene Aufmerksamkeit.
Aber dazu später mehr, wie die einzelnen Punkte umgesetzt werden können.
Vergrößerung der Zielgruppe
Dadurch ergibt sich auch eine größere Zielgruppe. Denn auch Personen, die Seh-Beeinträchtigungen haben, können jetzt die Inhalte erkennen. Da reicht es schon, die häufig eingesetzte Farbkombination von Gelb auf Weiß zu ändern. Meistens reicht es auch vollkommen aus, den Farbkontrast zu erhöhen.
Wusstest du, dass auch Google barrierefreies Internet belohnt?
Dabei werden barrierefreie Webseiten höher gerankt und bieten bis zu 10% mehr an Besuchende pro Tag. Einfach mal nach “Google Barrierefreiheit im Internet” suchen, da findest du die Statistik.
Positives Erlebnis einer potentiellen Kundschaft
Dazu kommt, dass ein positives Erlebnis für deine potentielle Kundschaft erzeugt wird. Denn wer mag es nicht, wenn der Checkout ohne Probleme funktioniert. Dass Daten nur einmalig eingegeben werden müssen. Die Formularfelder selbsterklärend sind bzw. einen aussagekräftigen Hinweis bieten. Und für dich ist gut zu wissen, dass bei barrierefreien Webseiten die Conversion-Rate bei mindestens 10% ist.
Und ist es nicht toll, das eigene Webdesign als “accessibile” oder “barrierefrei” zu betiteln? Natürlich nur, sofern sie wirklich weitgehend zugänglich ist. 😉
Durch diese Ergänzung ist das Image von deiner Dienstleistung und das Ansehen gleich viel höher.
Und was natürlich einer der größten und auch wichtigsten Punkte ist:
Wenn dein Design bereits die UI und UX umfasst, ist es nur noch ein kleiner Schritt die E-Accessibility mit umzusetzen. Für mich basiert nämlich ein gutes Design eben auf diesen drei Säulen. Und deine Arbeit ist weitgehend getan.
Aber jetzt zu der spannenden Frage:
Wie kann ein barrierefreies Webdesign erstellt werden?
Es gibt einige Möglichkeiten sowohl im Design selbst als auch auf der technischen Seite.
Wir bleiben bei diesem Blogartikel beim Design.
Hier konzentrieren wir uns auf folgende Punkte:
Farbkontrast
Schrift
Alternativtext
Lesereihenfolge
Sprachwahl
Formatierung
Untertitelung
Transkription
Jeweils am Ende des jeweiligen Punktes befindet sich ein Beispiel. So können die jeweiligen Punkte besser gefasst und sogleich selbst umgesetzt werden.
Farbkontrast
Der Farbkontrast ist der Kontrast, der durch Vordergrundfarbe und Hintergrundfarbe entsteht. Empfehlenswert ist ein Farbkontrast-Verhältnis von mindestens 4,5:1. Das entspricht der Konformitätsstufe AA nach den Web Content Accessibility Guidelines (WCAG).
Für das Design ist wichtig: Fokussiere dich auf drei Farben:
Primärfarbe
Sekundärfarbe
Kontrastfarbe
Dabei ist es wichtig, dass die Sekundärfarbe zur Primärfarbe und die Kontrastfarbe zur Primärfarbe mindestens ein Kontrastverhältnis von 4,5:1 aufweisen.
Bei der Sekundärfarbe zur Kontrastfarbe ist das Kontrastverhältnis nicht so wichtig, sofern die beiden Farben NICHT nebeneinander eingesetzt werden.
Vorteil, wenn ausschließlich drei Farben fokussiert werden: Du schaffst hohe Kontraste beim Text und achtest auf das Look & Feel in deinem Design.
Wichtig ist hier: Die verwendeten Farben müssen zu deiner Zielgruppe passen.
Beispiel:
Orange zu Petrol: 2,2:1
Hellblau zu Petrol: 5,4:1
Gelb zu Petrol: 5,3:1
Rosé zu Petrol: 6:1
Grün zu Petrol: 2,8:1
Rot zu Petrol: 1,5:1
Schwarz zu Weiß: 21:1
Möglicher Alternativ-Text:
Text steht auf einem Hintergrund. Der Hintergrund ist Petrol. Darauf steht der Satz: “Der richtige Farbkontrast macht den Unterschied." Die einzelnen Wörter im Satz haben jeweils eine andere Farbe. "Der" ist Orange, "richtige" ist Hellblau, "Farbkontrast” ist Gelb, "macht" ist Rosé, "den" ist Grün und "Unterschied" ist Dunkelrot.
Schrift
Für eine gut lesbare Schrift empfiehlt sich, eine serifenfreie Schrift zu verwenden. Dabei sollte eine Schriftgröße von mindestens 14 Punkt im Fließtext angestrebt werden.
Bei Slideshows, die eine Größe von 1080 x 1350 Pixel haben, gibt es eine Faustregel: Zu kleiner Text wird gerne übersehen und zu großer Text kann zu aufdringlich wirken.
Die richtige Mischung macht es. Daher minimal 35 Punkt und maximal 90 Punkt als Schriftgröße wählen.
Wichtig: Keine Blockschrift (nur Großbuchstaben) verwenden. Durch eine Blockschrift wird der Lesefluss erheblich beeinträchtigt. Für einzelne Wörter und zur Hervorhebung geht es. Jedoch nicht für komplette Überschriften oder Texte.
Hier ein Beispiel: DAS IST DIE BLOCKSCHRIFT.
Alternativtext
Der Alternativtext ist bei jeder grafischen Darstellung essentiell. Egal ob es sich um ein Bild, Portrait oder Grafik handelt. Ein Alternativtext muss hinzugefügt werden. By the way: Die SEO (Suchmaschinenoptimierung) mag Alternativtexte ganz besonders und lässt sie in das Google Ranking mit einfließen. Gleichzeitig nur, wenn auch wirklich ein Alternativtext hinterlegt wird und es nicht nur SEO-Ranking-Wörter verwendet werden. 😉
You know, what I mean.
Beim Alternativtext ist wichtig: So kurz wie möglich, aber so ausführlich wie nötig schreiben. Was ist wichtig? Was sagt das Bild für dich aus? Beschreibe es in ein paar wenigen Sätzen. Viele Plattformen haben auch eine maximale Zeichenanzahl, die für Alternativtext zur Verfügung steht. Bei Squarespace ist es zum Beispiel 250 Zeichen.
Bei weiteren Informationen einfach hier reinschauen: LinkedIn Beitrag: 5 Hinweise für einen guten Alternativtext
Hier noch zwei Beispiele für einen möglichen Alternativtext:
Grafik Säulendiagramm
Alternativtext:
Säulendiagramm mit fünf Säulen und einen Balken unterhalb der Säulen. Der Balken verläuft horizontal über alle 5 Säulen. Die fünf Säulen deuten ein lineares Wachstum an. Oberhalb der Säulen ist ein gerader Pfeil. Der Pfeil zeigt nach oben und hat die gleiche Steigung wie die Säulen.. Die Säulen, der Balken und der Pfeil sind im gleichen Stil eingefärbt. Die Fläche ist lila und der Rahmen in Petrol.
Logo Digital BarriereFrey
Alternativtext:
Logo mit einem offenen Vorhängeschloss und dem Schriftzug “DigitalBarriereFrey” daneben.
Das Vorhängeschloss ist in der Farbe Petrol. Auf dem Schloss befinden sich drei Punkte. Zwei Punkte sind nebeneinander und der dritte Punkte befindet sich unterhalb des linken Punktes. Die Wörter des Schriftzuges sind jeweils anders eingefärbt. “Digital” ist Petrol, “Barriere” Lila und “Frey” Petrol.
Lesereihenfolge
Für Screenreader und auch für eine bessere Lesbarkeit ist die Lesereihenfolge ausschlaggebend.
Sofern die Leserichtung von links nach rechts ist, werden die Texte ebenso von links nach rechts und von oben nach unten angeordnet.
Das hilft dir und deinen Lesenden. Und insbesondere Personen, die auf einen Screenreader angewiesen sind oder mit der Tastatur durch eine Webseite navigieren müssen.
Beispiel:
Header
Text
Footer
Sprachauswahl
Durch eine einfache Sprache können Inhalte schneller erfasst werden.
Und ich bin mir sicher, dass du genau das erreichen willst, oder?
Einfache Sprache zeichnet sich durch kurze Sätze mit maximal einem Nebensatz aus.
Fremdwörter oder Fachbegriffe werden extra erklärt.
Abkürzungen werden einmal ausgeschrieben.
Es werden nur Wörter verwendet, die im Sprachgebrauch häufig vorkommen.
Beispiel:
Fachsprache:
Dieser Satz könnte relativ einfach sein, aber um Klarheit und Präzision zu gewährleisten, habe ich mich für eine komplexere Struktur entschieden.
Einfache Sprache:
Dieser Satz ist ganz einfach.
Formatierung
Es ist von sehr großer Bedeutung, wie dein Text formatiert ist. Vorrangig sollte der Text linksbündig sein. Das schafft ein einheitliches Aussehen und schafft einen Ankerpunkt. Ein Ankerpunkt, an dem immer wieder gestartet wird. Bei einzelnen und wenigen Worten kann der Text auch mittig ausgerichtet werden.
Jedoch wirklich nur, wenn es sich um einzelne Wörter handelt.
Beispiel:
Linksbündig:
Was kannst du beispielsweise besser lesen?
Linksbündig, Mittig oder Rechtsbündig?
Mittig:
Für kurze Überschriften.
Oder als Eye-Catcher perfekt.
Ebenso bei rechtsbündig:
Außer es ist so geschrieben,
dass es ungefähr gleich lang ist.
Untertitelung
Die Untertitelung ist bei Videos sehr wichtig.
Der Untertitel lässt sich am besten durch eine serifenfreie Schrift, eine dünne Umrandung und ohne weitere besonderen Stilmittel erstellen.
Ganz fatal sind Änderungen der Textrichtung, einzelne Wörter, die groß aufpoppen oder ein unzureichender Farbkontrast.
Hier ein Ausschnitt eines guten Untertitels:
Quelle: YouTube Shorts: FitFaktor - Ein einzigartiger Abschluss
Der Untertitel geht über zwei Zeilen.
Es ist möglich, dass unterschiedliche Farben eingesetzt werden. Wichtig ist hier, dass es die ganze Zeile betrifft oder nur vereinzelt Wörter hervorgehoben werden.
Generell gilt jedoch: Weniger ist mehr!
Transkription
Bei Audios ist es hilfreich, wenn es eine Transkription gibt.
Dies hilft auch ungemein, einen Untertitel zu erstellen.
Hier bietet Gudrun Wegener einen super Weg.
Sobald eine Podcast-Folge mit ihr aufgenommen wurde, transkribiert sie es und stellt es als Text-Interview bereit.
Sucher gerne mal nach ihr. Sie freut sich bestimmt sehr über einen Besuch, eine Nachricht oder eine Vernetzung.
Ein weitere Tipp hier:
Zu jedem eingesetzten Video auf einer Webseite, sollte ein zweites Medium als Alternative verwendet werden.
So findest du mich
Mit diesem Blogbeitrag hast du ein erstes Überblick zur Digitalen BarriereFreyheit erhalten. Damit du deine Projekte im Webdesign barrierefreier umsetzen kannst.
In Kürze wird mein erster Online-Mini-Kurs veröffentlicht. Folge mir am besten auf LinkedIn und bleib auf dem Laufenden.
Autorin:
Alexandra Frey
Expertin für digitale Barrierefreiheit und Geschäftsführerin bei Digital BarriereFrey. Sie ist E-Accessibility Consultant und berät Unternehmen unter anderem in Bezug auf das Barrierefreiheitsstärkungsgesetz (BFSG).
