Guide zur Web Accessibility – Richtlinien für barrierefreie Websites in 2021

Barrierefreiheit klingt jetzt erstmal nicht so spannend. Das ist mir durchaus auch bewusst. Trotzdem rate ich jedem Webseiten Betreiber ein Auge auf die Web Accessibility zu werfen!

Das Internet öffnet sich zunehmend einer breiteren Zielgruppe. Immer mehr Menschen sind auf das Internet angewiesen. 

Diese Menschen haben alle unterschiedliche Vorraussetzungen mit denen sie im Web surfen. Manche von ihnen haben sogar körperliche Einschränkungen. 

Der Punkt ist, dass du keinen dieser Menschen ausschließen solltest. Jeder soll die Möglichkeit haben, deinen Content zu konsumieren. Das Web ist für jedermann („A Web for everyone!“)!

UX Designer beschäftigen sich intensiv mit Accessibility. Aber auch im Webdesign ist die Barrierefreiheit mittlerweile angekommen.

Barrierefreiheit sollte also bei jeder Website ganz oben auf der To-Do Liste stehen! 

Sind die WCAG und die BITV rechtlich verpflichtend?

• Die WCAG sind die Web Content Accessibility Guidelines des W3 Consortium.
  
• Die BITV ist die Barrierefreie-Informationstechnik-Verordnung des Bundes.
  

In diesen zwei Verordnungen werden grundsätzliche Richtlinien für ein barrierefreies Web festgelegt.

Die WCAG und BITV sind nicht rechtlich verpflichtend. Ausnahmen hierfür sind öffentliche Einrichtungen. Für alle anderen gilt lediglich eine Empfehlung.

Heißt aber noch lange nicht, dass du die Accessibility mit den Füßen treten darfst. Barrierefreie Websites sind nicht mehr optional, sie sind ein Must-have wenn du mich fragst.

Im Jahre 2021 kann es nicht angehen, dass Menschen mit körperlichen Einschränkungen, sei es aufgrund einer Behinderung oder im Alter, von Content ausgeschlossen werden.

Alt werde wir alle mal. Daher sollte es selbstverständlich sein auf die Barrierefreiheit zu achten.

Inhaltsverzeichnis

Dies ist der komplette Guide zur Web Accessibility für 2021. Hier thematisieren wir folgende Aspekte der Barrierefreiheit:

• Text
  
• Schriftliche Inhalte
• Bilder, Infografiken und Schaubilder
• Videos
• Audio und Podcasts
• Animationen
• Formulare
• Darkmode (dt.: Dunkelmodus)

Alle Informationen sind an den Richtlinien der WCAG und des BITV angelehnt.

Barrierefreier Text

Hier geht weniger um inhaltliche Aspekte deines Textes. Sie werden weiter unten genauer thematisiert. 

Hier geht es um:

• barrierefreie Typographie
  
• korrekte Auszeichnung der Elemente (ordnungsgemäßer Quelltext)

Die korrekte Auszeichnung der Elemente 

Jede Website besteht im Kern aus HTML. Das steht für „Hypertext Text Markup Language“. Markup Language heißt übersetzt Auszeichnungssprache. 

Eine solche Auszeichnungssprache hat die Aufgabe, die logischen Bestandteile eines textorientierten Dokuments zu beschreiben.
Als Auszeichnungssprache bietet HTML daher die Möglichkeit an, typische Elemente eines textorientierten Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen.

Bei dieser Erklärung belasse ich es mal. Es gibt genug Seiten im Internet, wo du mehr über HTML erfahren kannst.

Der Quelltext ist für die Suchmaschine ebenso hochrelevant. Daher denke ich, dass du mit dem Thema HTML schon ein wenig vertraut bist.

Nutze die korrekten Auszeichnungen für Überschriften

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>


Es gibt die HTML Tags H1 bis H6. Diese Überschriften geben die Ebene an.

• <h1>...</h1> ist die Seitenüberschrift.
  (Es sollte immer nur eine Seitenüberschrift geben!) 
• <h2>...</h2> ist eine zweiwertige Überschrift 
• <h3>...</h3> ist eine dreiwertige Überschrift
• <h4>...</h4> ist eine vierwertige Überschrift
• ...

Auf eine zweiwertige Überschrift kann niemals eine vierwertige Überschrift folgen. Davor muss eine dreiwertige Überschrift folgen. Folgendes Schema macht die Auszeichnungsstruktur deutlich:

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h4>...</h4>

<h4>...</h4>

<h4>...</h4>

<h3>...</h3>

<h3>...</h3>

<h4>...</h4>

<h4>...</h4>

<h2>...</h2>

Diese Auszeichnungsstuktur ist besonders für Menschen wichtig, die Screenreadern nutzen. 

Screenreader sind auf guten Quelltext angewiesen. Sie orientieren sich an den HTML Elementen.

Zudem vereitelst du die Art und Weise, wie Nutzer mit Screenreader umgehen.

Ihre „Hörstrategie“ ist nämlich sehr ähnlich zu unserer Lesestrategie.

Wir skimmen und scannen die Texte, d.h. unser Auge überfliegt den Text auf der Suche nach bestimmten Wörtern. Meistens lesen wir die Überschriften und entscheiden dann, ob sich der Text darunter lohnt.

Genauso gehen Menschen mit Screenreader ebenfalls vor. 

Sie springen von Überschrift zu Überschrift, und hören sie an. Dann entscheiden sie, ob sie mehr vom Text hören wollen.

Die Menschen mit Screenreader können aber Überschriften nicht vom Fließtext unterscheiden. In der Regel besitzen sie eine Form der Sehschwäche, und bekommen daher den Inhalt vorgelesen. 

Sie sind also darauf angewiesen, dass die Screenreader Software die Überschriften erkennt. Und die Screenreader Software erkennt die Überschrift nur, wenn sie korrekt ausgezeichnet ist.

Mit der korrektem Quelltext ermöglichst du Menschen mit Screenreader, deinen Text zu überfliegen und die Inhalte effizient aufzunehmen!

Nutze Auszeichnungen für Betonungen

<em>Ich</em> war das nicht!

Beim diesjährigen Festival standen<strong>20 Künstler und 5 Bands</strong> auf der Bühne

Der Internet Explorer ist <b>deprecated</b>, da er schon seit mehreren Jahren keine Updates erhält.

<em>...</em> steht für Emphasis (dt.: Betonung) und wird benutzt, um bestimmte Wörter im Text zu betonen. Stelle dir vor, du liest den Text laut vor: 

• Wo würde sich deine Stimme heben? 
• Welche Wörter würdest du betonen?

Diese Wörter werden mit dem <em>...</em>-Tag hervorgehoben. 

Im übrigen wird <em>...</em> kursiv dargestellt: Genau dieses Wort besitzt das em-Tag.

Der <strong>...</strong>-Tag wird für besonders wichtige Satzteile verwendet. Insbesondere für Informationen, die...:

• als erstes aufgenommen werden sollen,
  
• beim Nutzer hängen bleiben sollen

Der <b>...</b>-Tag wird für einzelne Wörter verwendet, die besonders wichtig sind. Es ist sozusagen das <strong>...</strong>-Tag nur für einzelne Wörter. Insbesondere für:

• Schlüsselwörter
  
• Titel und Namen
• Handlungsauforderungen

Wieso ist es überhaupt wichtig, die Elemente richtig auszuzeichnen?

Richtige Auszeichnung ist essentiell für...:

• ...den Reader Modus
  
• den Screenreader
• (die Suchmaschine)

Der Reader Modus ist bei iOS sehr beliebt. Die Leseansicht ermöglicht es, sich komplett auf den Text zu konzentrieren. Die Typographie ist für den Leser individuell anpassbar.

Wenn Elemente wie Fließtexte und Überschriften richtig ausgezeichnet sind, ist der Reader-Modus verfügbar. Ermögliche deinen Lesern auf textlastigen Sites den Reader-Modus zu nutzen!

Guter Quelltext ist auch für die Suchmaschine wichtig. Du hilfst der Suchmaschine deinen Inhalt besser zu verstehen. Das kann soweit gehen, dass gewisse Inhaltspassagen als Snippet angezeigt werden.

Suchmaschinenoptimierunng ist nicht unbedingt Thema des Artikels, ich wollte es aber hier mal erwähnt haben. Vielleicht kann ich euch so von korrekter Auszeichnung überzeugen.

Barrierefreie Typographie

Barrierefreie Typographie wird durch folgende Aspekte erreicht:

• Vermeide Textwände
  
• verwende viele Absätze
• verwende Listen wo geht
• verwende Tabellen wo geht
• nutze viele aussagekräftige Zwischenüberschriften

• Angenehmes Schriftbild
• verwende sans-serif Schriften für den Fließtext
• Absatz mindestens 2× so groß wie der Fließtext
• Zeilenabstand ca. 1,5× so groß wie der Fließtext
• Zeilenlänge: maximal 2 Alphabetlängen (60 Zeichen)
• Fließtext Größe mindestens 16px
• Fließtext immer linksbündig

• Kontrast für Fließtext mindestens AA (4,5:1)
• Ausnahme: Großer Text (3:1), Dekorativer Text, Logos
• Hauptsächlich Hell-Dunkel-Kontrast
  

• Die Textgröße sollte für den Leser einstellbar sein

• Überschriften müssen herausstechen
• Je niedriger das Überschrift Level, desto weniger markant

Abbildung 1: Das ist ein Beispiel von barrierefreier Typographie.

Vermeide Textwände!

Textwände sind die unüberwindbaren Textabschnitte. 

Die unfassbar langen Absätze, bei denen man keine Lust hat den Text zu lesen. 

Lange Textabschnitte sind nicht nur unangenehm, sondern sie stellen auch ein erhebliches Problem hinsichtlich der Web Accessibility dar. 

• Lange Absätze machen es schwierig, den Text zu überfliegen
  
• Man verliert oft die Zeile beim Zeilenwechsel
• Lange Textabschnitte resultieren in einem Gefühl der Überwältigung

Teile stattdessen deinen Text in viele kleine Häppchen auf.

So machst du es dem Leser wesentlich einfacher und angenehmer, deinen Content zu konsumieren.

Versuche überall wo es Sinn macht Listen und Tabellen einzusetzen. 

Achte besonders auf die Formulierungen deiner Überschriften. Der Leser sollte aus der Überschrift schließen können, worum es im Text geht. Formuliere sie also möglichst aussagekräftig!

Achte auf ein angenehmes Schriftbild!

Als Faustregel gilt: verwende sans-serif Schriften. Das gilt besonders für Fließtext, der ja von Natur aus kleiner ist!

Die WCAG Richtlinien empfehlen einen Zeilenabstand von mindestens 1,5× der Textgröße. Wenn du also z.B. die Schriftgröße 25px verwendest, solltest du einen Zeilenabstand von 37,5px eingestellt haben.

Die Absatzhöhe sollte mindestens 2× der Größe der Schrift betragen. In unserem Beispiel sollte die Absatzhöhe also 50px betragen.

Dein Fließtext sollte mindestens 16px groß sein. Eher größer. 

Der Punkt ist, dass kleiner Text einfach sehr anstrengend für das Auge ist. Außerdem haben wir im Web ja auch keine Papierprobleme wie im Print Bereich. Wir können einfach scrollen und verschwenden keine Ressourcen. Deshalb: sei nicht sparsam mit der Textgröße!

Die Textgröße sollte auch ohne großen Aufwand für den Leser veränderbar sein. Zwar gibt es mittlerweile Tools in Browsern, viele Wissen das jedoch nicht. Stelle daher ein Font Resizer zur Verfügung.

Ich nutze hierfür ein jQuery Plugin.

Abbildung 2: Dies ist ein Screenshot eines Beitrags meines Blogs. Hier kann der Leser individuell den Text vergrößern oder verkleinern, so wie er es gerne hätte.

Barrierefreier Inhalt

Korrekte Auszeichnung und Typographie haben wir also abgehakt.

Nun soll es aber um den Inhalt gehen. 

Genauer gesagt um die Art und Weise, wie wir den Inhalt transportiert. Besonders wichtig für dich, wenn du Artikel für Blogs o.ä. schreibst,

Achte hierfür auf folgende Aspekte:

• einfache Sprache
  
• Fachbegriffe nur wenn nötig
• komplizierte Abkürzungen nur wenn nötig
• kurze Sätze
• möglichst wenige Relativsätze
• Appositionen sparsam einsetzen
• Stelle die Pointe voran
• Nutze hauptsächlich das aktiv
• Wähle eindeutige Überschriften
• Verwende nur die nötigsten Inhalte: keinen Happytalk & Anleitungen
• Keinen Content on Hover

Ich habe einige Artikel dem UX Wirkung gewidmet. Meine 7 Guidelines für gelungene Web Texte können hier helfen. 

Web Texte zu schreiben unterscheidet sich von dem Texte schreiben in der Schule. Strukturiere daher deine Inhalte nach dem Bite, Snack, Meal Prinzip 

Von einfacher Sprache profitieren alle

Vielleicht...

• ...möchtest du besonders intelligent und belesen wirken. 
  
• ...denkst du, komplexe Sprache macht deinen Content glaubwürdiger.
  
• ...denkst du, mit schwieriger Sprache werden deine Inhalte richtiger.
  
• ...denkst du, du sprichst damit eine bestimmte Personengruppe an

Da muss ich dich jedoch enttäuschen!

Das trifft nämlich alles nicht zu.

Der Punkt ist, dass du mit komplexer Sprache niemanden einen gefallen tust. Wirklich niemanden!

Selbst Menschen mit hoher Alphabetisierung können Informationen mit einfacher Sprache schneller und effizienter aufnehmen. 

Ich habe bereits in meinem Artikel über das Texte Schreiben im Web Untersuchungen dazu aufgegriffen. 

Dort hat man einer Gruppe mit hoher und geringer Alphabetisierung untersucht. Genauergesagt hat man beiden Gruppen einen Text mit komplexer und einfacher Sprache gegeben. Beide mussten Aufgaben zu diesen Texten erfüllen. 

Es war natürlich zu erwarten, dass die Gruppe mit hoher Alphabetisierung generell schneller war. Erstaunlich war jedoch, dass die Gruppe mit hoher Alphabetisierung prozentual stärker von einfacher Sprache profitiert hat. 

Du tust also allen einen Gefallen wenn du einfache Sprache nutzt. Auch deinen gebildeten Lesern!

User sollten auf Inhalte sofort zugreifen können – ohne Mouseover Effekt (Hover Effekt)

Hover-Effekte werden dann ausgelöst, wenn du mit der Maus auf das Objekt drauf fährst!

Diese Hover-Effekte sind sehr nützlich. Sie verdeutlichen, dass das Objekt klickbar ist. Links und Buttons werden mit einem Hover-Effekt ausgestattet. Damit macht man dem Nutzer klar, dass das Objekt klickbar ist.

Hover-Effekte sind also ausschließlich unterstützend. Sie dienen als Zusatz, die die User Experience verbessern können.

Du solltest dich niemals auf den Hover Effekt verlassen, denn...:

• es kann gut sein, dass der Nutzer den Hover-Effekt nicht auslöst
  
• manchmal ist Nutzern einfach nicht klar, dass hinter einem Objekt ein Hover-Effekt ist
• auf Touch Geräten gibt es keinen Hover-Effekt
• Der Hover-Effekt verschwindet wenn die Maus das Element wieder verlässt

Content Einblendungen nach einem Mouseover Effekt leisten also keinen Beitrag für barrierefreies Internet.

Deshalb solltest du nie Inhalte hinter eine Hover-Effekt verbergen. Auch wenn du denkst das wäre cool oder Innovativ.

Bei einem meiner ersten Projekte habe ich auf Drängen meines Klienten so etwas eingebaut. Die Seite ist nicht mehr online, aber hier gebe ich euch mal ein Ausschnitt der Seite.

Hier werden Inhalte nach einem Hover-Effekt sichtbar. Genauer gesagt wird nachdem man auf die Überschrift fährt der jeweilige Text sichtbar. Die Accessibility ist absolut miserabel.

Barrierefreie Bilder und Videos

Bilder und Videos gehören natürlich zum barrierefreien Web dazu.

Achte auf folgende Aspekte, damit du die Accessibility deiner Medien sicherst:

• Vermeide Medien bei denen die Sinnhaftigkeit nicht offensichtlich ist
• Gib den Medien bedeutungsvolle Dateinamen
• Stelle Bild, Video und Audiodateien in mehreren Formaten bereit
• Stelle zusätzliche Beschreibungen bereit
• Verwende das ALT-Attribut bei Bildern
  
• Biete deinen Podcast auch als Textform an (Transkript)
• Füge Videos Untertitel hinzu
• Füge Videos eine Kurzbeschreibung hinzu
  
• Vermeide Autoplay Videos
• Deaktiviere standardmäßig bei allen Medien den Sound 

Medien, die nur als dekorative Elemente präsentiert werden, sollten vermieden werden

Wie schon so oft von mir gepredigt: Jedes Element auf einer Website sollte einen informativen Zweck haben! 

Wenn Medien einen rein dekorativen Zweck erfüllen haben sie keine Daseinsberechtigung.

Stelle dir folgende Fragen: 

• Bringt dieses Medium meinen Nutzern einen Mehrwert?
  
• Geht dem Nutzer Informationsgehalt verloren, wenn das Medium weg ist?

Wenn du danach handelst merkst du schnell, dass Stock Bilder und Videos wenig bringen. 

Aber diese kosmetischen Medien sind nicht nur unnötig, sondern sie verschlechtern die Barrierefreiheit:

• Medien, bei denen der Zweck nicht klar ersichtlich ist, verwirren den Nutzer.
  
• Medien, die viel Raum einnehmen, können den Lesefluss massiv stören.
• Je mehr Medien integriert werden, desto stärker verteilt sich die Aufmerksamkeit. Wichtige Informationen werden übergangen.

Achte also darauf, dass alle Medien Informationen transportieren. Dann hast du alles für die Barrierefreiheit getan.

Stelle textbasierte Informationen zu deinen Medien bereit

Dies setzt wieder an der Screenreader Thematik an.

Menschen, die Screenreader nutzen, brauchen für Bildmaterialien zusätzliche Beschreibungen, damit sie wissen worum es geht.

Du versetzt die Accessibility deiner Seite also ganz schön einen Schlag, wenn du einfach Bilder ohne zusätzliche Informationen hochlädt. Menschen mit Screenreadern werden keine Ahnung haben, welchen Inhalt das Bild transportiert.

Wenn du dich dann noch ausschließlich auf dieses Bild beschränkst grenzt du gewisse Personengruppen aus

Für Bilder:

• Verwende das HTML ALT-Attribut
  
• Erkläre darin den Inhalt der Bildes
• Erkläre den Inhalt von Abbildungen oder Infografiken in einem Text darunter

Für Videos:

• Stelle Untertitel bereit – damit ermöglichst du gehörlosen Menschen deinen Content zu konsumieren
  
• Füge den Videos eine kurze Zusammenfassung in Textform bei

Wichtig ist außerdem, dass du möglichst Autoplay Videos vermeidest. Autoplay Videos starten sofort. Man muss also nicht auf „Play“ drücken.

Hier greift jedoch der Grundsatz, dass der User immer die Kontrolle besitzen sollte was als nächstes passiert. 

Wenn der Nutzer das Video sehen möchte, wird er es auch anklicken. Vermeide es also, ihm das Video aufzuzwingen.

Falls du doch zu Autoplay Videos greifst, deaktiviere standardmäßig den Sound. Auch hier sollte der Nutzer die Kontrolle besitzen, was als nächstes passiert.

Stelle dir vor, dein Nutzer sitzt gerade im Großraumbüro und auf einmal dröhnt der Sound deines Videos aus seinen Lautsprechern. Sehr unangenehm! Bringe deine Nutzer also bitte nicht in solche Situationen!

Für Audio / Podcast:

• Stelle ein Transkript deines Podcasts bereit

Mit diesem Transkript ermöglichst du es wieder gehörlosen Menschen, deine Inhalte zu konsumieren.

Aber auch Menschen ohne Behinderungen profitieren vom Transkript. Oftmals hilft der zusätzliche Text beim Verständnis des Gesprochenen, da man parallel folgen kann.

Hierfür gibt es Software, die automatisch deinen Podcast in ein barrierefreies Transkript umwandelt. Einfach mal googeln, da gibt es einige Treffer.

Barrierefreie Animationen

Animationen können Spaß machen und deiner Seite den extra Kick verleihen. 

Aber hier wird es besonders wichtig, damit du Menschen mit Behinderungen und Krankheiten nicht benachteiligst oder womöglich Schaden zufügst.

Folgende Punkte gibt es zu beachten:

• Bewegungsanimationen sollten immer ausgestellt werden können
  
• Für aufleuchtende Animationen weniger als drei Aufblinker in der Sekunde
• Aufleuchtende Animationen sollten such immer unter der roten Schwelle befinden

Stelle ein On/Off für Animationen bereit

Animationen, die weiträumig eingesetzt werden, sollte der Nutzer ausstellen können. 

„Ich sehe die Animation schon zum Xten mal... mich nervt die Animation, ich möchte sie ausschalten!“

Auch wenn Animationen einem auf die Nerven gehen können, ist das nicht der Punkt bei barrierefreien Animationen.

Hier geht es um richtige Barrierefreiheit. 

Hier geht es um Richtlinien, die eingehalten werden müssen, da man sonst ernsthafte Symptome auslöst.

Konkret möchte ich das Vestibularsyndrom ansprechen. Beim Vestibularsyndrom ist das Gleichgewichtsogan gestört. Wenn dieses Syndrom ausgelöst wird, treten Schwindelkeit, Übelkeit und Kopfschmerzen auf. 

Der Einfluss von Animationen auf Menschen mit Vestibularsyndrom kann gewaltig negativ sein. Wenn die Symptome auftreten hilft meistens nur Bettruhe um sich wieder zu erholen.

„Stopp diese unnötigen Bewegung! Ich fühle mich so schwindelig, dass ich mich nicht konzentrieren kann. Jetzt muss ich meinen Computer ausschalten und mich hinlegen!“

Menschen mit diesem Syndrom müssen die Kontrolle über Bewegungen haben, die durch Interaktionen ausgelöst werden. 

Nicht essentielle Bewegungen können Symptome des Vestibularsyndroms auslösen.

Beispiele für nicht-essentielle Animationen, die man als Nutzer abstellen können sollte

• Parallax Scrolling Effekt
  
• Spezielle Animationen wenn neuer Content geladen wird
• Seiten Übergänge

Natürlich kann man sich fragen, ob man nicht-essenzielle Animationen dann nicht gleich weglassen sollte. 

Und das ist ein guter Punkt. 

Aus dem Standpunkt des barrierefreien Webs gibt es keine Argumente für diese Animationen.

Was sind überhaupt essenzielle Animationen?

• Die Information und Funktionalität würde sich grundlegend verändern, wenn die Animation entfernt werden würde.
  
• Die selbe Information und Funktionalität könnte nicht auf eine andere Art und Weise erreicht werden.

Spezifikationen nach den WCAG für aufblinkende Animationen zum Schutze von Menschen mit Epilepsie 

Mit diesen Richtlinien sollte der Benutzer auf den gesamten Inhalt einer Website zugreifen können, ohne dass es aufgrund von Licht- und Farbempfindlichkeit zu Anfällen kommt.

Anfälle können durch Inhalte ausgelöst werden, die bei bestimmten Frequenzen öfter als 3× pro Sekunde blinken. Nutzer reagieren noch wesentlich empfindlicher auf rotes Blinken als auf andere Farben. 

Maßnahmen, mit denen du Lichtempfindlichen Personen einen gefallen tust:

• Reduziere den Kontrast bei blinkenden Inhalten
• Vermeide voll gesättigte Rottöne für blinkende Inhalte
• Reduziere die Anzahl der Lichtblitze
• Stelle einen Mechanismus zum Unterdrücken von blinkenden Inhalten bereit

Besonders Menschen mit Photosensitive Epilepsie sind von dieser Art von Animationen betroffen. 

Ich rate dir, diese Punkte zu beachten. Schließlich möchtest du wahrscheinlich nicht für einen epileptischen Anfall verantwortlich sein.

Du kannst deine Animationen auf Anfall Risiken untersuchen. Hierfür gibt es ein kostenloses Analyse Tool.

Formulare optimiert für die Web Accessibility

Formulare sind wahrscheinlich die wichtigsten Bestandteile einer Websites. 

Umso wichtiger ist es, dass die Barrierefreiheit gegeben ist. Achte daher auf folgend Punkte:

• Nutze klickbare Labels
  
• Vermeide Platzhalter („Placeholder Values“)
• Strukturiere deine Felder semantisch
• Variiere die Input Länge je nach Eingabe Format
• Teile lange Formulare in mehrere Schritte auf
• Halte deine Formulare einspaltig und rechtsbündig
• Setze reCAPTCHAs sparsam ein

Verwende klickbare Labels

Abbildung 3: Das rot umkreiste ist ein Label. Sie sollten immer klickbar sein. Das meint das man auch auf das Label klicken kann um das darunter stehende Eingabefeld anzuwählen. Klicke hier für ein Beispiel.

Gründe für klickbare Labels:

• vergrößert den Klickradius: User müssen nicht mehr genau ins kleine Eingabefeld klicken um es auszuwählen
  
• Die Nutzer sind es gewohnt

Vermeide Platzhalter in Eingabefelder

Die Platzhalter (engl.: Placeholder Values) stehen im Eingabefeld und verschwinden wenn man selber einen Wert eingibt. 

Die Platzhalter sind problematisch, denn...:

• sie haben einen extrem schlechten Kontrast und sind somit schwer zu erkennen
  
• sie werden von unerfahrenen Web Nutzern als eingetragenen Wert verwechselt 
• sie sind limitiert in der Länge des Eingabefeldes 

Besonders kritisch wird es, wenn du dich ausschließlich auf den Platzhalter verlässt. Verwendung von Platzhaltern statt Labels führt zu einer sehr schlechten User Experience, denn...:

• der Browser Support ist nicht perfekt. Unter Umständen wird nichts angezeigt, dann ist es unmöglich das Formular auszufüllen.
  
• Screenreader lesen den Wert des Platzhalters nicht vor. Nutzer mit Sehproblemen können also dein Formular nicht ausfüllen
  
• du reduzierst den klickbaren Bereich (siehe letztes Kapitel)
• sie verschwinden nachdem ein Wert eingetragen wurde. Bei ausführlichen Formularen mit komplexen Eingabefeldern ist es schwierig die Eingabewerte nachzuvollziehen!

So sollte man es nicht machen:

Abbildung 4: Das ist ein Beispiel von einer echten Site, und es ist ein echtes DON'T! Mache es nicht so, wie in diesem Beispiel!

In Abbildung 4 kommen alle Probleme zu tragen, die ich oben erwähnt habe. Der Kontrast liegt übrigens bei 2,17:1. Um Barrierefreiheit zu garantieren wird mindestens ein Kontrast von 4,5:1 benötigt. Das ist ganz weit weg von Accessibility!

In einem meiner Instagram Beiträge habe ich die Verwendung von Platzhaltern visualisiert. Der Content ist zwar auf englisch, kann euch aber denke ich trotzdem helfen. Klicke auf den Pfeil oder Swipe nach rechts um alle Slides anzuschauen:

Strukturiere dein Formulare ordnungsgemäß

Das heißt konkret:

• Teile lange Formulare in mehrere Schritt auf
  
• Gruppiere deine Felder semantisch
• Halte dein Formular linksbündig mit nur einer Spalte

Multi-Step Formulare reduzieren das Gefühl der Überwältigung

Multi-Step Formulare sind bei ausführlichen Formularen die erste Wahl. 

Wenn du viele Daten abfragst, teile dein Formular in mehrere Schritte auf!

Abbildung 4: Für die Quelle klicke hier

Gruppiere deine Felder wenn Multi-Step Formulare nicht möglich sind

Manchmal ist es nicht möglich ein Multi-Step Formular einzubauen. In Chimpify ist die Funktion z.B. nicht verfügbar.

Wenn du trotzdem viele Daten abfragen musst, teile dein Formular in semantische Gruppen auf. 

Abbildung 5: Screenshot einer meiner Projekte (rurton.de). Ein Beispiel eines Formulars, welches auch ohne mehrere Schritte auskommt. Hier werden die semantisch zusammengehörigen Felder einfach gruppiert.

Wie man in Abbildung 5 erkennt werden:

• Kontaktinformationen (Name, E-Mail und Telefonnummer),
  
• Auftragskategorie und
• Auftragsdetails

in eine Gruppe gesteckt.

Das Formular wirkt weniger überwältigend. Die Wahrscheinlichkeit, dass der Nutzer das Formular dann auch wirklich abschickt ist größer. 

Versuche also das nächste mal die Barriere deines Formulars so gering wie möglich zu halten, indem du es in mehrere Gruppen oder Schritte aufteilst.

Um meine Punkte zum Abschluss nochmal besser zu visualisieren, hier einer meiner Instagram Beiträge. Es ist ein Karussell, klicke auf den Pfeil oder stippe nach rechts:

Stelle einen Dunkelmodus bereit

Der Dunkelmodus gehört mittlerweile einfach dazu. Die großen Ökosysteme von Google, Apple und Microsoft stellen auf ihren Betriebssystemen einen Dunkelmodus bereit. Das Web ist nachgezogen, du hoffentlich auch!

Dunkle User Interfaces sind nicht nur ein Trend. 

Sie haben einen erheblichen Einfluss auf die Accessibility und User Experience. Darüber hinaus kann ein Dark Theme erheblich deine Website verbessern.

Internetnutzer Heinz Peter hat den Darmode auf seinem Betriebssystem aktiviert. Im Web surft er auch überwiegend auf Seiten, die einen Darkmode bereitstellen. Das sein Bildschirm so wenig Licht abstrahlt ist das Surfen sehr angenehm für Heinz Peter. Wenn er aber dann doch auf eine Seite stoßt, die keinen Darmode bereit stellt, ist Heinz Peter frustriert. Der plötzliche Wechsel auf den hellen Screen ist sehr unangenehm für seine Augen.

Dieses Beispiel zeigt: Du löst unter Umständen Unbehagen aus wenn du keinen Dunkelmodus bereitstellst.

Die Barrierefreiheit leidet aber auch darunter, denn manche Menschen sind auf den Dunkelmodus angewiesen.

 

Umsetzung eines Dunkelmodus

Ich empfehle allen, sich an den Designsprachen der großen Ökosysteme zu orientieren.

• Googles Material Design
  
• Apples Human Interface Guidelines
• Microsoft Fluent Design System

Fazit

Du bist also am Ende angelangt!

Ich hoffe ich konnte dich ein bisschen besser für barrierefreies Web sensibilisieren!

Es ist wichtig, dass wir das Internet für jeden verfügbar machen und niemanden den Zugang verwehren. 

Du solltest auch den Menschen mit Behinderungen / Krankheiten den Zugang zu deiner Seite ermöglichen. 

Achte auf den Quelltext sowie das grundsätzliche Webdesign. Im Quelltext sollten ausschließlich korrekte Auszeichnungen vorhanden sein. Barrierefreies Webdesign bezieht sich vor allem auf Schrift, Medienauswahl, Formulare und Dunkelmodus.

Das Web ist für jedermann!

Ich lege dir besonders die Web Accessibility Initiative ans Herz. Die Initiative stellt Materialien für die Barrierefreiheit zur Verfügung. Alles auf Englisch.