Wie Menschen Websites nutzen und was gute Bedienbarkeit ausmacht, ist sehr unterschiedlich. Websites können auf vielfältige Weise genutzt werden. Aber das Ziel ist immer dasselbe: Sich zurechtfinden. Inhalte erfassen. Selbstständig handeln können.
Was dafür gebraucht wird, hängt stark davon ab, wer vor dem Bildschirm sitzt und welche Möglichkeiten zur Verfügung stehen.
Einige nutzen die Maus, andere arbeiten ausschließlich mit der Tastatur, mit Sprache oder einem Bildschirmlesegerät. Manche benötigen klare Kontraste, andere einfache Sprache oder visuelle Unterstützung.
Viele Barrieren auf Websites entstehen nicht durch Absicht, sondern durch fehlendes Wissen darüber, wie unterschiedlich Menschen digitale Angebote bedienen.
In diesem Beitrag erkläre ich dir, worauf es ankommt, dass möglichst viel Menschen Websites bedienen können.
Wie benutzen Menschen Websites?
Nach dem Ziel
Etwas Konkretes finden
Diese Gruppe von Nutzer:innen besucht Websites mit einem klaren Ziel vor Augen. Sie möchten schnell und effizient Informationen finden oder eine bestimmte Aktion durchführen. Für sie ist eine intuitive Navigation, eine Suchfunktion und eine klare, logische Struktur der Website wichtig.
Lesen
Die Leser:innen nehmen sich Zeit, Inhalte auf Websites vollständig zu erfassen. Diese Nutzer:innen schätzen hochwertige, informative und gut recherchierte Inhalte, aber auch eine klare, angenehme Gestaltung um lange auf der Seite verweilen zu können.
Entdecken und treiben lassen
Entdecker:innen ziehen es vor, Informationen über Bilder, Videos und Infografiken aufzunehmen. Um ihre Aufmerksamkeit zu gewinnen braucht die Website hochwertiges Bildmaterial, ansprechende Grafiken oder multimediale Inhalte.
Immer dabei
Mobile Surfer:innen greifen hauptsächlich über Smartphones oder Tablets auf Websites zu. Sie bevorzugen Websites , die für mobile Endgeräte optimiert sind, mit schnellen Ladezeiten, kurzen, prägnanten Inhalten, guten Kontrasten und einfachen, aber effektive Funktionen.
Nach den Fähigkeiten
Mausbedienung und Touchscreen
Die Mehrheit der Websites-Besucher:innen navigiert mittels Maus oder Touchscreen durch das Internet. Sie schätzen Websites, die eine intuitive Navigation und leicht anklickbare Elemente bieten.
Tastaturnavigation
Einige Nutzer:innen bevorzugen oder sind auf die Navigation mittels Tastatur angewiesen. Dies kann auf persönliche Vorlieben oder auf die Notwendigkeit zum Beispiel aufgrund von Blindheit oder Verletzungen der Hände zurückzuführen sein.
Sprachsteuerung
Mit dem Aufkommen von Sprachassistenten und verbesserter Spracherkennungstechnologie nutzen immer mehr Menschen Sprachbefehle zur Steuerung ihrer Geräte und zum Surfen im Web.
Bildschirmleseprogramme
Bildschirmleseprogramme (im Folgenden „Screenreader“ genannt) sind für blinde und sehbehinderte Menschen hilfreich, da sie den Inhalt einer Website in Sprache umwandeln. Diese Sprache kann dann akustisch per Sprachausgabe vorgelesen werden oder über eine Braillezeille ertastbar sein.
Screenreader können auch den Aufbau der Website verarbeiten und ausgeben, sofern dieser korrekt erstellt wurde. Das heißt, die Nutzer:innen können zum Beispiel direkt zur Hauptnavigation, oder von einer Überschrift zur nächsten oder zum Start des eigentlichen Inhalts springen.
Anpassung der Anzeigeeinstellungen
Nutzer:innen mit Sehbeeinträchtigungen oder spezifischen Lesebedürfnissen passen häufig die Anzeigeeinstellungen an. Sie können dies in dem sie zum Beispiel Kontraste erhöhen, eine Bildschirmlupe verwenden, zoomen, Schriftgrößen verändern oder spezielle Farbschemata verwenden.
Auch ältere Nutzer:innen neigen dazu, Funktionen wie Textvergrößerung zu nutzen, um die Lesbarkeit zu verbessern. Ebenso profitieren sie von einfacher Navigation.
Einfache, bildhafte Darstellung
Viele Menschen mit kognitiven Einschränkungen bevorzugen übersichtliche Layouts ohne übermäßige Ablenkungen und Inhalte, die in einfacher Sprache präsentiert werden. Bilder und Symbole können dazu beitragen, Inhalte besser zu verstehen.
Aber auch Nutzer:innen, die gehörlos oder schwerhörig sind, interagieren mit Websites, indem sie sich auf visuelle Inhalte und einfach lesbare Informationen stützen.
Ein- und Ausgabegeräte
Um mit Websites und Apps interagieren zu können, nutzen wir Ein- und Ausgabegeräte.
Die Standardausgabegeräte sind der Monitor und der Lautsprecher.
Die Standardeingabegeräte sind die Tastatur, die Maus, der Touchscreen und das Mikrophon.
Um nun Barrieren für Menschen, die die visuelle Ausgabe oder die motorische Eingabe nicht so gut können, abzubauen, gibt es verschiedene Hilfsmittel.
Diese Hilfsmittel werden auch assistierende Technologien genannt. Das ist eine zusätzliche Software und / oder Hardware, die den Menschen helfen, selbstständig und eigenverantwortlich agieren zu können. In der folgenden Lektion erklären wir dir die Besonderheiten dieser Hilfsmittel.
Besonderheiten bei der Bedienung und Hilfsmittel
Blinde Menschen
Blinde Menschen benutzen den Hör- und / oder Tastsinn, um die Website zu bedienen. Wichtig dabei ist: Egal ob durch Nutzung der Sprachausgabe oder der Braillezeile, blinde Menschen erhalten die Informationen immer nur in kleinen Einheiten nacheinander. Auch wenn das blitzschnell erfolgen kann, unterscheidet sie sich grundlegend von der visuellen Erfassung einer Seite auf einen Blick.
Hilfsmittel
- Screenreader mit Sprachsynthesizer für akustische Ausgabe
- Screenreader und Brailledisplay für taktile Ausgabe in Brailleschrift
- Spezialtastaturen mit Braillebeschriftung
- Spracheingabe
Bedürfnisse an die Website
- Eine klar strukturierte Website
- Ausreichend Zeit, um alle Inhalte zu erfassen
- Informationen darüber, wo man sich gerade befindet und was passiert, wenn man auf einen Link bzw. Button klickt
- Alternativtexte für rein visuelle Inhalte wie Bilder, Videos und Infografiken
- Eine Website die durchgängig mit der Tastatur bedienbar ist
- Semantisch korrekter HTML-Code
- Überspringmöglichkeiten, damit sie zum Beispiel nicht auf jeder einzelnen Unterseite die komplette Navigation immer wieder durchgehen müssen
- Hilfestellungen bei Eingabeformularen und klare Beschreibungen bei fehlerhaften Eingaben
- Hinweise, wenn sich auf der Website etwas verändert (zum Beispiel wenn eine Zeit beim Bestellprozess abläuft)
Sehbehinderte Menschen
Menschen die schlecht sehen brauchen starke Kontraste und leicht erkennbare Formen, um die Inhalte besser wahrnehmen zu können. Alternativ nutzen sie auch akustische Ausgaben.
Hilfsmittel
- Große Lupe direkt vor dem Monitor
- Bildschirmlupen -Software
- Sprachausgabe und Spracheingabe
- Spezialtastaturen mit großer Beschriftung
- Individuelle Designvorlagen, um die Darstellung der Inhalte an ihre spezifischen Sehbedürfnisse anzupassen
- Zoomfunktionen
Bedürfnisse an die Website
- Gut lesbare Schriftarten und Schriftgrößen
- Hohe Kontraste
- Klare Struktur und gute Gliederung
- Semantisch korrekter HTML-Code
- Sauberer HTML-Code um mit Software das Layout und die Kontraste selbst vergrößern zu können
- Gewöhnliche Wortabstände damit der Text bei Vergrößerung nicht zerfällt
- Erklärung komplexer Grafiken / Tabellen
- Hinweise, wenn sich auf der Website etwas verändert (zum Beispiel wenn eine Zeit beim Bestellprozess abläuft)
Körperbehinderte Menschen
Menschen die die herkömmliche Maus, den Touchscreen und/oder die Standard-Tastatur nicht nutzen können, verwenden daher je nach Fähigkeit alternative Eingabegeräte:
Hilfsmittel
- Zeigegeräte: Tastaturmaus wo man über Tasten die Richtungen vorgibt, spezielle Joysticks, Head- und Eyetracker die die Kopf- oder Augenbewegungen auswerten, Trackball, Brain Computer Interfaces, oä.
- Tastaturen: virtuelle Tastaturen, Einhandtastaturen, übergroße Tastaturen, Minitastaturen die mit einem Griffel bedient werden können, Brain Computer Interfaces, oä.
Bedürfnisse an die Website
- Eine klar strukturierte Website , um nicht unnötige Wege machen zu müssen
- Überspringmöglichkeiten um schneller an die gewünschten Inhalte zu kommen
- Die gesamte Website sollte per Tastatur erreichbar sein.
- Ausreichend Abstände zwischen Buttons und Links
- Ausreichend Zeit, die Bedienung mit alternativen Eingabegeräten, ist in einigen Fällen deutlich langsamer
Menschen mit kognitiven bzw. neurologischen Einschränkungen
Menschen mit Einschränkungen in der Verarbeitung von Informationen, der Konzentration oder dem Erinnerungsvermögen – wie etwa bei Lernschwierigkeiten, Demenz, Autismus oder Aufmerksamkeitsstörungen nutzen Hilfsmittel, um Inhalte leichter verstehen und nutzen zu können.
Hilfsmittel
- Bildschirmleseprogramme, die Texte vorlesen oder markieren
- Tools, die Informationen in vereinfachter Sprache anzeigen
- Einstellungen für reduzierte Animationen oder Bewegungen, um Ablenkungen zu minimieren
- Werkzeuge zur Konzentrationsförderung, wie Fokushilfen oder Timer.
Bedürfnisse an die Website
- Klare und einfache Sprache, Erklärung komplexer Grafiken, Tabellen, Inhalte
- Klare Struktur und Navigation
- Möglichst wenig Ablenkungen
- Ergänzung der Texte durch visuelle Elemente wie Symbole oder Icons
- Ausreichend Zeit, um alle Inhalte zu erfassen
- Selbsterklärende Formulare oder Buttons
Hörbehinderte Menschen
Obwohl gehörlose Menschen meistens mit Standardbildschirmen und Standardeingabegeräten arbeiten, dürfen wir nicht davon ausgehen, dass sie geschriebene Texte uneingeschränkt verstehen können.
Sprache wird vor allem über das Gehör gelernt. Die Muttersprache von gehörlosen Menschen ist daher keine gesprochene Sprache, sondern die Gebärdensprache.
Eine gesprochen Sprache wie Deutsch, die in Schrift übertragen wird, ist wie eine Fremdsprache. Oder stell dir vor, du lernst eine Sprache mit unbekannten Zeichen, wie Griechisch oder Japanisch, ohne irgendetwas etwas zu hören.
Erfahrungen von Menschen mit Behinderungen
Beispiele von Barrieren
Folgende große Barrieren, tauchen immer wieder auf Websites auf. Viele davon könnten bereits mit einfachen Mitteln weggeräumt werden.
- Die Website ist nicht mit der Tastatur bedienbar.
- Für Tastaturanwender ist nicht sichtbar, wo sich der Fokus gerade befindet.
- Es fehlen Alternativtexte für die Bilder, Videos, Animationen, usw.
- Die Alternativtexte für Bilder machen keinen Sinn.
- Die Kontraste sind nicht ausreichend.
- Überschriften sind für Technologien wie Screenreader nicht als Überschriften erkennbar. Aufzählungen sind nicht als Aufzählungen erkennbar.
- Formulare sind nicht richtig beschriftet und haben keine klaren Anweisungen, wie sie verwendet und ausgefüllt werden sollen.
- Die Sprache ist nicht bzw. nicht richtig definiert. Der Screenreader liest zum Beispiel einen deutschsprachigen Text mit englischer Betonung vor.
- Wesentliche Teile der Website sind durch ein darüberliegendes Fenster überlappt, das sich nicht entfernen lässt. Beispiel: Cookie-Banner oder Pop-up-Fenster.
- Bei Fehlern in den Formularen ist nicht erkennbar, wo diese sind und wie diese zu korrigieren sind.
Was braucht es für eine gute Bedienung?
Für eine moderne und benutzerfreundliche Website sind klare Strukturen, intuitive Bedienbarkeit und eine ansprechende Gestaltung entscheidend, um den Nutzern ein angenehmes und effizientes Nutzungserlebnis zu bieten.
Schon aus Usability-Sicht (Bedienbarkeit) werden dabei zahlreiche Anforderungen gestellt, die sicherstellen, dass eine Website für die meisten Nutzer optimal funktioniert. Accessibility (Barrierefreiheit) ergänzt diese Grundsätze, indem sie sicherstellt, dass die Website für alle Menschen zugänglich ist, unabhängig von individuellen Einschränkungen.
Usability
- Einfache, intuitive Menüführung bzw. Navigation
- Klares, logisches, flexibles Layout, Anpassbarkeit für verschiedenste Bildschirmgrößen und -arten
- Nutzung vertrauter Elemente und Layouts wie Logo links oben, Menüleiste oben, Seitenleiste rechts, unterstrichene Links
- Die wichtigsten Informationen zuerst
- Schnelle Ladezeiten
- Keine Pop-Up-Fenster verwenden
- Dafür sorgen, dass kein vertikales Scrollen, also scrollen nach rechts, nötig ist
- Bei längeren Seiten: Möglichkeiten zum Zurückspringen auf das Menü, den Textanfang oä. anbieten
- Buttons und Handlungsaufforderungen müssen klar erkennbar und beschriftet sein.
- Elemente wie Buttons oder Links sollten auf Aktionen reagieren (zum Beispiel Farbänderung bei Klick oder Hover)
- Lesbare Schriftarten
- Konsistentes Design
- Nutzerorientiertes Design
- Eine einfache Suche anbieten
- Kurze und einfache Formulare
- Wichtige Inhalte und Überschriften sollten deutlich hervorgehoben sein.
- Sofort auffindbare Inhalte: Worum geht es auf dieser Website und die Kontaktinformationen
- Buttons und Links sollten groß genug und leicht anklickbar sein.
- Bilder und Videos sollten hochwertig, schnell ladbar und unterstützend sein, ohne die Seite zu überladen.
- Keine unnötigen Ablenkungen: Vermeidung von aufdringlichen Pop-ups, Auto-Play-Videos oder zu vielen Animationen.
- Links müssen eindeutig sein und den Nutzer dorthin führen, wo er es erwartet.
- Bei E-Commerce-Seiten sollte der Kaufvorgang schnell und ohne unnötige Schritte erfolgen.
- Schnell auffindbare Kontaktmöglichkeiten
Accessibility
- Gut sichtbare Navigationselemente und Links
- Tastaturbedienbarkeit
- Große Kontraste
- Alternative Beschreibungen für visuelle Elemente
- Untertitel und Transkripte von Video- und Audioinhalten
- Klarheit der Formatierungen: Überschriften, Aufzählung, Menü,…
- Klare, einfache Struktur
- Orientierung
- Einhaltung von Web-Standards, damit die Seite mit möglichst vielen Geräten benutzt werden kann
- Einfache Texte
- Leichte Sprache
- Zeit
- Unterscheidung von Infos sollte nicht allein auf Farbe angewiesen sind
- Keine Überraschungen
- Bildhafte Unterstützung der Inhalte zum Beispiel durch Symbole bzw. Infografiken
- Keine Ablenkungen
- Interessantes Design
- Korrekte Sprachdefinition für Sprachausgabe
- Visuelle Ausgabe von rein akustischen Elementen
Empfehlung
In der Cord Media Academy gibt es zu Barrierefreiheit einen kompletten Kurs. Wenn du mehr darüber erfahren willst, wie du selbst barrierefreie Websites erstellen kann, schau dort unbedingt mal rein. Diese Empfehlung enthält keinen Affiliate-Link. Ich empfehle die Cord Media Academy, weil ich sie selbst nutze, weil ich beim Kurs zur Barrierefreiheit mitgewirkt habe und ihn wirklich toll finde.