ūüĆü Arbeitslos in Deutschland? Hol dir dein kostenloses Bootcamp - Mehr Info
Zur√ľck zu allen Artikeln

29. Juni 2023 - 8 minutes

Die Wichtigkeit der Barrierefreiheit im Web Design

Heutzutage findet fast alles online statt und alle m√ľssen darauf zugreifen k√∂nnen.

Ironhack - Changing The Future of Tech Education

Die Wichtigkeit der Barrierefreiheit in der heutigen Welt l√§sst sich nicht √ľbersch√§tzen: Sie ist unerl√§sslich und immer mehr Menschen in so gut wie jeder Branche setzen barrierefreie Umgebungen um. Aber da die Welt sich immer mehr auf das Internet und digitale Dienstleistungen verl√§sst (schlie√ülich bieten einige Unternehmen inzwischen ausschlie√ülich digitale Dienstleistungen an!), ist es umso wichtiger, dass auch das Internet barrierefrei gestaltet wird.¬†

Statt uns direkt darauf zu st√ľrzen, wie man barrierefreie Designs online umsetzt, sollten wir uns jedoch ein wenig Zeit nehmen, um etwas genauer auf Barrierefreiheit einzugehen, warum sie wichtig ist, und welche Schwierigkeiten auftreten, wenn ihr keine Priorit√§t einger√§umt wird.¬†

Was ist Barrierefreiheit?

Allgemein bedeutet Barrierefreiheit, ein Produkt, eine Dienstleistung, eine Erfahrung, eine Informationsquelle oder sonst etwas, so zu gestalten, dass sie von wirklich allen genutzt werden kann, unabhängig von den persönlichen Umständen. Normalerweise wird der Begriff im Zusammenhang mit Menschen mit Behinderungen verwendet und ist somit kein völlig neues Konzept, aber da das Internet noch recht jung ist, ist es wichtig, dass die nächste Generation der Tech-Fachleute auf ein inklusives und barrierefreies Design bedacht ist. 

Zwar m√∂gen die h√§ufigsten Gr√ľnde f√ľr die Notwendigkeit barrierefreier Designs meist auf visuelle, auditive, motorische oder kognitive Einschr√§nkungen zur√ľckzuf√ľhren sein, aber wirklich barrierefreies Web Design geht weit dar√ľber hinaus. Wenn es beispielsweise darum geht, eine f√ľr Kinder barrierefreie Website zu entwickeln, m√ľssen die Gestaltenden sich auch in diese Zielgruppe hineinversetzen und ansprechende, interessante und bunte Seiten gestalten, auf denen sich Kinder leicht zurechtfinden. Eine Website f√ľr Senioren sollte hingegen auf eine kleine Schriftgr√∂√üe oder √ľberm√§√üig technische Informationen verzichten.¬†

Okay, damit haben wir schon verraten, worum es im Rest dieses Beitrags gehen wird! Bevor wir uns aber barrierefreien Designs in den erwähnten Bereichen widmen, sollten wir noch einen weiteren bedeutenden Aspekt behandeln: die Wichtigkeit der Barrierefreiheit.

Warum ist Barrierefreiheit wichtig?

Ganz einfach: Barrierefreiheit ermöglicht allen, unabhängig von Alter, wirtschaftlicher Lage, Einschränkungen oder Geschlecht, auf dieselben Dienstleistungen zuzugreifen. Gerade bei öffentlichen Dienstleistungen wie jenen der Einwanderungs- oder Gesundheitsbehörden ist es unerlässlich, dass alle nicht nur Zugriff auf die Informationen haben, sondern sich auch all ihrer Rechte bewusst sind. 

Allen zu ermöglichen, aktiv an der Gesellschaft teilzuhaben, ist ein zentrales Anliegen, nach dem wir in allen Bereichen streben sollten, gerade auch im Web Design.

Barrierefreiheit im Web Design

Wie bereits erw√§hnt, nimmt die Wichtigkeit des Internets exponentiell zu, besonders infolge der COVID-19-Pandemie. Pl√∂tzlich fand fast alles online statt und alle m√∂glichen Personen hatten mitunter Schwierigkeiten, auf dieselben Informationen oder Dienstleistungen zuzugreifen. Daher ist die Barrierefreiheit im Web Design so wichtig ‚Äď das Internet ist ein Hilfsmittel, um Informationen zu verbreiten, zu lernen und miteinander in Kontakt zu treten, es ist aber nur wirksam, wenn die Erfahrung f√ľr alle Anwendenden zum gleichen Ergebnis f√ľhrt.

F√ľr die Barrierefreiheit online, m√ľssen folgende Kriterien erf√ľllt sein:

  • Erkennbarkeit: Die Informationen m√ľssen f√ľr die Anwendenden zug√§nglich und f√ľr einen ihrer Sinne wahrnehmbar sein; falls eine Website beispielsweise ausschlie√ülich aus Text besteht, muss es eine Audio-Option f√ľr blinde Personen geben.¬†

  • Verst√§ndlichkeit: Der Inhalt muss in einer f√ľr die Zielgruppe verst√§ndliche Form bereitgestellt werden; falls du eine Website f√ľr Zuwandernde erstellst, solltest du zum Beispiel daf√ľr sorgen, dass die Informationen in verschiedenen Sprachen verf√ľgbar und besonders gut verst√§ndlich sind.

  • Bedienbarkeit: Falls jemand den Computer nur mit der Stimme bedienen kann, sollte die Website f√ľr diese Person genauso funktionieren, wie f√ľr Personen, die Maus und Tastatur verwenden k√∂nnen, das hei√üt, sie sollte f√ľr alle bedienbar sein.

  • Robustheit: Die Website muss f√ľr alle Personen dieselbe Funktion erf√ľllen k√∂nnen, ohne dass irgendjemand eine schlechtere Erfahrung als andere hat.¬†

Sind Barrierefreiheit und Benutzerfreundlichkeit dasselbe?

H√§ufig werden Barrierefreiheit und Benutzerfreundlichkeit gleichbedeutend verwendet, aber es gibt einige zentrale Unterschiede zwischen den beiden Konzepten. Sie weisen durchaus √Ąhnlichkeiten auf, aber bei der Benutzerfreundlichkeit geht es um die Effektivit√§t, Effizienz und Zufriedenheit bei einem Design, w√§hrend die Barrierefreiheit an erster Stelle darauf Wert legt, dass alle Anwendenden, unabh√§ngig von ihren Einschr√§nkungen, das Design angemessen nutzen k√∂nnen.

Barrierefreies Web Design

Nun, da wir geklärt haben, was Barrierefreiheit ist und warum sie gerade im Web Design so wichtig ist, werfen wir einen genaueren Blick auf konkrete Fälle, in denen Barrierefreiheit notwendig ist, und erläutern, wie sie sich umsetzen lässt. Zunächst gehen wir auf bestimmte Einschränkungen und Behinderungen ein, decken dabei aber auch Barrieren ab, die oft außer Acht gelassen werden. 

Wichtiger Hinweis: Die Schwere der Behinderung einer Person kann stark variieren. Eine Person kann ganz und gar blind sein oder nur farbenblind; eine geh√∂rlose Person kann ausschlie√ülich √ľber Zeichensprache kommunizieren oder sich aufs Lippenlesen verlassen.

Visuelle Barrierefreiheit

Denke beim Web Design daran, dass Personen, die Schwierigkeiten damit haben, √§hnliche Farben zu unterscheiden, mit subtilen Unterschieden zu k√§mpfen haben; dies ist ein gutes Beispiel daf√ľr, dass du mehrere Elemente in dein Design aufnehmen solltest. Bei einer Fehlermeldung ergibt es daher Sinn, sowohl die Farbe rot als auch das Wort ‚ÄěFehler‚Äú zu verwenden, um so viele Personen wie m√∂glich damit zu erreichen.¬†

F√ľr Personen, die v√∂llig blind sind, ist die Option, sich die Website vorlesen zu lassen, eine unsch√§tzbare Errungenschaft der Barrierefreiheit. Aber Vorsicht: Falls auf deiner Website viele Bilder oder zum Beispiel eine Speisekarte als angeh√§ngtes Dokument vorkommen, solltest du sicherstellen, dass auch f√ľr diese barrierefreie Optionen zur Verf√ľgung stehen, die vorgelesen werden k√∂nnen.¬†

Auditive Barrierefreiheit

Ein barrierefreies Design f√ľr geh√∂rlose oder schwerh√∂rige Personen erfordert einiges an Planung; Untertitel, die √ľberpr√ľft wurden, synchron sind und zu genau dem Zeitpunkt angezeigt werden, in dem im Video gesprochen wird, sind unerl√§sslich. Und falls du zur Kontaktaufnahme nur eine Telefonnummer angegeben hast, solltest du in Betracht ziehen, auch eine E-Mail- oder Chat-Option bereitzustellen, damit Personen, die nicht per Telefon kommunizieren k√∂nnen, dein Unternehmen trotzdem erreichen k√∂nnen.¬†

Motorische Barrierefreiheit

Personen mit motorischen Einschr√§nkungen leben gegebenenfalls mit Zittern, ungewollten Bewegungen, L√§hmungen, Koordinationsschwierigkeiten oder fehlenden Gliedma√üen, die allesamt die Verwendung einer Website erschweren k√∂nnen. Zum Gl√ľck wurden diesbez√ľglich bereits gewaltige Fortschritte gemacht, zum Beispiel indem angepasste Tastaturen mit mehr Raum zwischen den einzelnen Tasten oder verschiedene Arten von M√§usen entwickelt wurden. Allerdings wirkt sich dies auch auf die Gestaltung der Website aus: Alle Funktionen sollten per Tastatur aufgerufen werden k√∂nnen (ohne Verwendung der Maus!), wobei existierende Software eingebunden werden kann, um die Navigation zu erleichtern.¬†

Kognitive Barrierefreiheit

Personen mit kognitiven Einschr√§nkungen werden bei der Barrierefreiheit oft au√üer Acht gelassen, doch auch sie profitieren von einer personalisierten Web-Erfahrung. Stelle daher sicher, dass deine Website √ľber ein sauberes Design verf√ľgt und die Schaltfl√§chen und Tabs leicht zu lesen und zu verwenden sind. Eine Website mit viel Text w√ľrden zum Beispiel Personen mit Legasthenie abschrecken. Stelle daher Informationen am besten in verschiedenen Formaten bereit, wie Infografiken, Videos und mehr, und verwende eine klare und einfache Sprache.¬†

Umgebungsbezogene Barrierefreiheit

Hast du je dar√ľber nachgedacht, dass manche Personen an einem Ort auf deine Dienstleistungen zugreifen m√ľssen, an dem sie keinen Zugriff auf WLAN oder das mobile Datennetzwerk haben? Oder an einem √∂ffentlichen Ort wie einer Bibliothek, wo sie keine personenbezogenen Daten eingeben k√∂nnen? Deine Website ist inklusiver, wenn sie Offline-Funktionalit√§t bietet oder verwendet werden kann, ohne dass Identifikationsdaten eingegeben werden m√ľssen.¬†

Akademische Barrierefreiheit

Du hast bestimmt schon einmal auf der Suche nach Informationen eine Seite aufgerufen, nur um von dem ganzen technischen Jargon erschlagen direkt zur Suchmaschine zur√ľckzukehren. Nicht alle sind bei allen Themen auf dem gleichen Kenntnisstand; und die Erstellung von Inhalten, die zu schwer verst√§ndlich oder technisch sind, macht all jenen den Zugriff auf die Informationen unm√∂glich, die das Thema nicht bereits umfassend studiert haben. Verwende einfache, erl√§uternde Sprache und gehe wenn n√∂tig auf Details ein.¬†

Dies gilt insbesondere, falls du Inhalte f√ľr Kinder erstellst. Dabei geht es nicht nur um Unterhaltungswebsites mit Spielen, sondern gerade auch um Websites, auf denen Kinder zum Beispiel lernen sollen, wie man im Notfall die Notdienste ruft. Wenn du diese Informationen so angibst wie f√ľr Erwachsene, dann wird das Kind h√∂chstwahrscheinlich die wichtigen Details nicht verstehen. Verwende daher Video- oder Audio-Optionen und kinderfreundliche Formulierungen, damit der Inhalt wirklich f√ľr alle zug√§nglich ist.¬†

Sprachliche Barrierefreiheit

Wir haben dieses Thema bereits oben angeschnitten, aber es sollte f√ľr dich oberste Priorit√§t haben, sicherzustellen, dass deine Zielgruppe unabh√§ngig von ihrer Muttersprache den gleichen Zugang zu deinen Dienstleistungen und Informationen hat. Besonders bei Websites der Regierung, der Einwanderungsbeh√∂rden oder der Fl√ľchtlingshilfe ist es daher unerl√§sslich, qualitativ hochwertige √úbersetzungen, Videountertitel und eigene Kontaktinformationen f√ľr jede Sprache bereitzustellen, um die Barrierefreiheit f√ľr ganze Bev√∂lkerungsgruppen zu erm√∂glichen, die zuvor keinen Zugriff hatten.

Situationsbedingte Barrierefreiheit

Diese Art der Barrierefreiheit wird wahrscheinlich am wenigsten ber√ľcksichtigt, aber sie ist dennoch wichtig. Musstest du schon einmal mitten in der Nacht ans Handy gehen, nur um dann von seinem Bildschirm geblendet zu werden? Oder hast du schon einmal schl√§frig aus Versehen auf die falsche Taste gedr√ľckt, sodass du nicht mehr wusstest, wo du in einem Artikel warst? Dein Design ist benutzerfreundlicher, wenn du Optionen zur Anpassung der Helligkeit und der Schriftgr√∂√üe sowie zur Verwendung einer Schwarz-Wei√ü-Version bereitstellst.¬†

Tipps f√ľr eine verbesserte Barrierefreiheit¬†

Hoffentlich konnten die obigen Punkte dich davon √ľberzeugen, barrierefreie Designs in dein n√§chstes Projekt zu integrieren¬†‚Äď schau dir dazu am besten unsere Tipps an, um sicherzustellen, dass dein Web Design tats√§chlich barrierefrei ist:¬†

  • Ber√ľcksichtige Personen mit verschiedensten Einschr√§nkungen, aller Altersstufen und aller Bildungsgrade, wenn du deine Zielgruppe festlegst

  • Versieh alle deine Bilder und Grafiken mit Alt-Text

  • Stelle Nachforschungen bez√ľglich der Auswahl von Farben und Schriftgr√∂√üe an, bevor du dich auf eine Option festlegst, oder binde die M√∂glichkeit ein, sie selbst anzupassen

  • Stelle sicher, dass deine Website f√ľr Mobilger√§te geeignet ist¬†

  • Biete qualitativ hochwertige Transkriptionen und Untertitel f√ľr Video- und Audio-Inhalte an

  • Verwende saubere und einfache Designs und Sprache

An Barrierefreiheit f√ľhrt kein Weg vorbei und je fr√ľher du dich einem wahrlich barrierefreien widmest, desto schneller w√§chst dein Publikum und immer mehr Menschen k√∂nnen sich an deinem Produkt oder an deiner Dienstleistung erfreuen. Falls du bereit bist, den n√§chsten Schritt zu wagen und direkt in die Gestaltung qualitativ hochwertiger und barrierefreier Web-Inhalte einzusteigen, ist der UX/UI Design Bootcamp von Ironhack wie f√ľr dich geschaffen.¬†

√Ąhnliche Artikel

F√ľr dich empfohlen

Bereit zum Beitritt?

Mehr als 10,000 Quereinsteiger und Unternehmer haben ihre Karriere in der Tech-Branche mit den Bootcamps von Ironhack gestartet. Beginnen Sie Ihre neue Karrierereise und schließen Sie sich der Tech-Revolution an!

Ich akzeptiere die Nutzungsbedingungen und die Datenschutzerklärung