• Startseite
  • UX Leistungen und Services
  • Über mich
  • Blog
  • Kontakt
Youitive
  • Startseite
  • UX Leistungen und Services
  • Über mich
  • Blog
  • Kontakt

Konzepten

  • Home
  • Blog
  • Konzepten
  • 12 Tipps für Barrierefreiheit in deinem Konzept

12 Tipps für Barrierefreiheit in deinem Konzept

  • Autor Björn Frieling
  • Kategorien Konzepten
  • Date 29. November 2020
  • Kommentare 1 Kommentar
Das Bild zeigt die Startseite von https://www.youitive.de wie sie ein Farbenblinder wahrnehmen würde

Barrierefreiheit hilft nicht nur den beeinträchtigten Personen, sondern jedem deiner Nutzer. Einiges an deinem Konzept kannst du so gestalten, dass alle deine Nutzer eine gute Usability und entsprechend eine gute User Experience erfahren. Dabei solltest du darauf achten, dass jeder Dialog, jede Seite deines Produkts barrierefrei ist, denn Barrierefreiheit ist eines der 7 Dialogprinzipien.

Auch achtet Google vermehrt auf Barrierefreiheit und ratet deine Seite entsprechend gut oder schlecht. Aber du solltest es nicht für Google machen, sondern für deine Nutzer und Kunden.

Barrierefreiheit für Farbenblinde

Farbblindheit ist nicht so selten, wir du das vielleicht in deinem Alltag annimmst. Gerade die rot – grün – Blindheit ist vor allem unter Männern häufiger verbreitet, als du vielleicht denkst. Was kannst du nun tun, um deine Software auch für Farbblinde barrierefrei zu machen?

Das Bild zeigt die Startseite von https://www.youitive.de wie sie ein Farbenblinder wahrnehmen würde
Das Bild zeigt jemand der komplett Farbenblind ist (Monochromat), die Startseite von https://www.youitive.de wahrnehmen würde.

 

Das Bild zeigt die Wahrnehmung von jemanden der rot-grün blind ist.
Das Bild zeigt eine simulierte Wahrnehmung von jemandem der rot-grün blind ist.

 

Das Bild zeigt eine simulierte Wahrnehmung von jemandem der gelb-blau blind ist.
Die Abbildung zeigt eine simulierte Wahrnehmung von jemandem der gelb-blau blind ist.

 

Mit dem Web Disability Simulator für Chrome, kannst du selbst simulieren, wie deine Website wirkt. Mit diesem Tool kannst du diverse Einstellungen vornehmen, die dir zumindest schnell eine entsprechende Rückmeldung geben.

Die Farbe ist kein Alleinstellungsmerkmal

Häufig werden rot und grün verwendet, wenn es darum geht dem Nutzer Feedback zu geben. Meist wird ein Fehler rot markiert und eine Erfolgsmeldung ist grün. Aber das allein reicht nicht aus. Du solltest die Usability Indikatoren mixen. Ähnlich wie im Straßenverkehr. Dort haben alle Schilder zwei oder drei Indikatoren.

 

Ein Stop Schild ist ein perfektes Beispiel für einen Usability Indikator. Überall hat es die gleiche Form und Farbe. Unabhängig vom Content weiß der Fahrer, was damit gemeint ist. Und das weltweit.
Ein Stop Schild ist ein perfektes Beispiel für einen Usability Indikator. Überall hat es die gleiche Form und Farbe. Unabhängig vom Content weiß der Fahrer, was damit gemeint ist. Und das weltweit.

 

Du könntest entsprechend deine Fehlermeldung auch mit einem Icon davor oder mit einer entsprechenden Schrift versehen. Das Gleiche gilt natürlich auch für Erfolgsmeldungen

Ein Icon sollte sich nicht nur in der Farbe unterscheiden, sondern auch in der Form.

 

Merke: Nutze Farbe nie als alleinigen Indikator. Verwende zusätzlich Icons, Text Dekorationen (unterstreichen, fett, usw.) oder Schrift, um etwas klar zu machen.

Barrierefreiheit für Blinde und Sehbeeinträchtigte

Blinde und andere Sehbeeinträchtige verwenden unterschiedliche Tools, um Websites zu bedienen und an ihre Informationen zu gelangen. Darunter finden sich Lupen, Zoomfunktionen oder auch Screenreader. Du solltest dich auf jeden Fall etwas mit der Funktionsweise dieser Tools vertraut machen, damit du nachher auch genau weißt, worauf du achten muss. Allerdings kommt an dieser Stelle auch einiges auf deinen Frontend – Entwickler an Arbeit zu. Spreche an dieser Stelle mit deinem Kollegen, wie ihr die einzelnen Probleme am besten lösen könnt.

Hierarchische Struktur

Nicht nur Steve Krug fordert hierarchische Strukturen innerhalb einer Seite, sondern auch die Barrierefreiheit. Ein Screenreader kann so eingestellt werden, dass er zu den Überschriften, der jeweiligen Seite geht. Dort kann der Blinde dann wahrnehmen, was sich unter dem jeweiligen Absatz verbirgt. Teile deine Website also in Hierarchien ein. Wichtig, der Seitenname steht immer als <h1> am Anfang der Seite. Zudem darfst du die Hierarchie nicht verletzen.

Kontraste

Kontraste sind für die Barrierefreiheit enorm wichtig. Dabei gilt es den Wert 4,5:1 nicht zu unterschreiten. Als wirklich absolutes Minimum ist im BitV2 – Test für Barrierefreiheit ein Verhältnis von 3:1 definiert.

Alternative Texte für Bilder, Videos und Dateien

Moderne Seiten verfügen über Bilder und Videos. Gerade auch was SEO (Search Engine Optimization) angeht, sind Bilder unerlässlich. Damit auch blinde Menschen etwas von den Bildern haben, empfiehlt es sich diese mit alternativen Texten zu versehen. In dem alternativen Text beschreibst du, was auf dem Bild zu sehen ist. Achte darauf, dass die Bilder prägnant beschrieben sind und die wichtigen Informationen erhalten bleiben.

Bei rein dekorativen Bildern solltest du dafür sorgen, dass diese auch so gekennzeichnet sind. Dadurch wird der Screenreader dann nicht vorlesen. Barrierefreiheit bedeutet auch unnütze Informationen auszublenden.

Barrierefreiheit für Hörbeeinträchtigte

Untertitel oder Gebärdensprache

Bei Videos solltest du vor allem für hörbeeinträchtigte Menschen einen Hilfestellung geben. Dazu sollten deine Videos auch immer einen Untertitel besitzen. Einige Programme fügen einen solchen Untertitel schon automatisch hinzu. Alternativ kannst du auch dasselbe Video mit Gebärdensprache anbieten. Wenn du Untertitel einem Video hinzufügst. Achte auf eine leicht verständliche Sprache um barrierefrei zu sein.

Vibrationen

Eine andere Möglichkeit die vor allem mobile Geräte bieten, ist die Vibration. Wenn du eine native Anwendung baust, in der zum Beispiel normalerweise bei einem bestimmten Ereignis ein Ton zu hören ist, ergänze diesen auch um eine Vibration. So kann auch der Hörbeeinträchtigte dieses Ereignis wahrnehmen. Gerade im Spielebereich gibt es den Einsatz von Vibrationen seit dem Nintendo 64 und ist daraus kaum mehr wegzudenken.

 

Barrierefreiheit für motorisch Eingeschränkte Personen

Große Flächen zum Klicken

Wer kennt es nicht. Die nervigen What’s App der lieben Eltern. Alle Eltern haben eins gemeinsam. Sie sind älter als ihr Kind. Meine Eltern sind mittlerweile auch jenseits der 60. Mit dem Alter lassen vor allem feinmotorische Fähigkeiten nach. Auf mobilen Geräten kann dies zu Problemen führen. Achte also darauf, dass deine Klickflächen immer ausreichend groß sind. Dazu gibt es mehrere Richtlinien zum Beispiel für die Fläche eines Button. Ich sag es mal so. Die Fläche sollte keine 36px unterschreiten. Das ist allerdings meine persönliche Meinung. Andere Richtlinien sprechen hier auch von 42px oder 44px oder auch nur 30px.

 

Gezeigt werden zwei Abbildungen von Buttons auf Handys. Auf dem linken Handy ist der Button wesentlich größer, als auf dem Rechten. Durch die größere Klickfläche wird die Bedienung wesentlich vereinfacht.
Gezeigt werden zwei Abbildungen von Buttons auf Handys. Auf dem linken Handy ist der Button wesentlich größer, als auf dem Rechten. Durch die größere Klickfläche wird die Bedienung wesentlich vereinfacht.

 

Tastatur und Maus

Bei dem Umgang mit Maus und Tastatur kann es zu weiteren Problemen kommen. Jemand der viele Ego-Shooter spielt kann wahrscheinlich mit einer Maus besser umgehen, als jemand, der den Computer nur im Büro für Excel nutzt. Auch hier gilt: Nutze große Flächen, damit auch ungeübte oder motorisch beeinträchtigte Personen mit der Maus die Klickfläche sauber treffen können.

Des weiteren achte im Web darauf, dass alle Elemente auch mit der Tastatur erreichbar sind. Sehbeeinträchtigte Personen nutzen die Maus weitaus weniger und Blinde gar nicht. Sie können nur über die Tastatur an die jeweiligen Elemente navigieren.

Barrierefreiheit für kognitiv beeinträchtigte Personen

Cognitive Load

Wer es schafft den Cognitive Load zu reduzieren, hat nicht nur eine barrierefreie Software, sondern meist auch eine besser Usability und User Experience. Auch hier gilt, weniger ist oft auch mehr. Konzentriere deinen Content auf das Ziel des Nutzers. Präsentiere nichts, was deinen Nutzer lediglich verwirrt und ihm keinen Mehrwert bietet. Jede Information die er verarbeiten muss, erhöht seinen Cognitive Load. Für kognitiv beeinträchtigt Menschen, die sind sehr schwer konzentrieren können, ist es wichtig, dass nicht zu viel Ablenkung vom Wesentlichen entsteht.

Einfache und verständliche Sprache

Die Sprache ist für deinen Nutzer sehr wichtig. Wenn du deinen Content barrierefrei gestalten möchtest, empfehle ich dir, eine einfache Sprache zu verwenden. Indikatoren für eine einfache Sprache sind:

  • Keine Fremd- oder Fachwörter
  • Nur Hauptsatz und max. ein Nebensatz
  • Anzahl der Kommas reduzieren
  • Keine Einschübe

Falls du ein anschauliches Beispiel für eine einfach Sprachen anschauen willst, empfehle ich dir ein Kinderbuch für die 1. Klasse.

Barrierefrei für technische Beschränkungen

Responsiv

Achte darauf das deine Anwendung auch mit kleineren Geräten als deinem Desktop Monitor mit 27 Zoll zu bedienen sind. Immer mehr Menschen haben in Ihrem Haushalt keinen Desktop PC mehr. Also liegt es an die deine Website responsiv zu machen. Das bedeutet weitaus mehr, als ein fluides Grid System zu nutzen. Manchmal musst du auch Interaktionen entsprechend anpassen.

Dein System kann nur barrierefrei sein, wenn es auch entsprechend responsiv ist.

Hover – Effekte

Mobile Geräte haben keinen Cursor. Somit gibt es dort auch keine Hover – Effekte. Einige Browser unterstützen dies zwar auch mobil, aber wirklich durchgesetzt hat es sich nicht. Daher gilt:

Keine wichtigen Informationen die zur Zielerreichung deines Nutzers dienen kommen in eine Toolbox oder in den Title eines Elements, welcher durch Hover ausgelöst wird.

Du kannst Hover – Effekte nutzen, allerdings brauchst du dann für deine mobile Variante eine andere Lösung.

Bedenke allerdings, dass auch Blinde, welche mit der Tastatur navigieren, diese Effekte dann vorgelesen bekommen müssen.

 

 

Tag:forhappyusers, Interaction Design, Interaktionsdesign, UX

  • Teilen:
author avatar
Björn Frieling

Previous post

Gestaltgesetze Cheat Sheet – 8 Regeln und Tipps für dein Konzept
29. November 2020

Next post

Dark UX und Dark Patterns
23. Mai 2021

You may also like

Das Bild zeigt einige Bilder welche auf einem Tisch gelegt wurden. Diese sind wie in dem Gesellschaftsspiel Memory angeordnet. Normalerweise können Menschen sich 7±2 dieser Bilder merken.
Usability Richtlinie: Die 7 ± 2 Regel
25 Juli, 2021
Titelbild zum Thema Dark UX - Es zeigt die dunkle silhoutte eines Mannes
Dark UX und Dark Patterns
23 Mai, 2021
Gestaltgesetze Cheat Sheet – 8 Regeln und Tipps für dein Konzept
5 Juli, 2020

Einführung In der Wahrnehmungspsychologie wurden einige Gesetze gefunden, die dir bei deinem Konzept helfen können. Diese Gestaltgesetze ermöglichen es dir, die Wahrnehmung deiner Nutzer zu steuern und die Usability und damit die UX deiner Website zu erhöhen. Auch sind sie …

    1 Kommentar

Search

Kategorien

  • Agile
  • Allgemein
  • Konzepten
  • Nutzungskontextanalyse
  • Strategie
  • User Research

Neuste Artikel

Das Bild zeigt einige Bilder welche auf einem Tisch gelegt wurden. Diese sind wie in dem Gesellschaftsspiel Memory angeordnet. Normalerweise können Menschen sich 7±2 dieser Bilder merken.
Usability Richtlinie: Die 7 ± 2 Regel
25Jul2021

Was ist die 7 ± 2 Regel? Bei der 7 ± 2 Regel spricht man bei User Experience und Usability davon, dass deinem Nutzer nur 7 Items ± 2 gleichzeitig präsentiert werden sollten. Diese Regel findet vor allem häufig Anwendung …

Die Abbildung zeigt einen Standardaufbau der Priorisierungsmatrix mit den 4 Quadranten und deren Beudeutung. Alle Funktionen welche rechts oben sind, sollte höhere priorisiert werden. Links oben und rechts unten werden Funktionen eingetragen, welche dann vielleicht später umgesetzt werden sollten. Funktionen welche links unten stehen, sollte nicht umgesetzt werden.
Priorisierungsmatrix – Im Team UX Entscheidungen treffen
26Jun2021

Eine Priorisierungsmatrix hilft dir und deinem Team UX Entscheidungen für neue Funktionen zu treffen. In agilen Teams ist die Priorisierung meist Aufgabe des Product Owners, allerdings kannst du ihn dabei gut unterstützen. Sollte dein Team nicht konstant von außen priorisiert …

Titelbild zum Thema Dark UX - Es zeigt die dunkle silhoutte eines Mannes
Dark UX und Dark Patterns
23Mai2021

Was ist Dark UX - Definition Unter Dark UX versteht man, das Ausnutzen bestimmter Patterns und Richtlinien, um aktiv die Kunden- und Nutzerentscheidung zu sabotieren. Dabei verwendest du für dein Interaktionsdesign die gleichen Prinzipien, Gesetze, Richtlinien und Inidikatoren wie bei …

UX Online Kurs

Du willst mehr über UX lernen? Dann kannst du über folgenden Link an meinem Online Kurs teilnehmen.

Zum Udemy Kurs

  • AGB
  • Impressum
  • Datenschutzerklärung

+49 176 848 592 65
info@youitive.de

Wir nutzen Cookies um dein Nutzererlebnis zu steigern. Bitte klicke auf 'Akzeptieren' um den vollen Funktionsumfang der Website zu nutzen. Ohne Cookies kann es zu Funktionseinschränkungen (längere Ladezeiten kommen).
Akzeptieren Ablehnen

Weitere Informationen
Datenschutz

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
immer aktiv
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SPEICHERN & AKZEPTIEREN