Webdesign, Website

Die 4 Prinzipien für barrierefreies Webdesign

Seit Juni 2021 ist für alle Onlineangebote deutscher Hochschulen und öffentlicher Stellen ein barrierefreies Webdesign Pflicht. Hier finden Sie die vier wichtigen Prinzipien.

Barrierefreies Webdesign fuer Hochschulen

BARRIEREFREIHEIT IM WEB

Barrierefreies Webdesign für Hochschulen: Das müssen Sie beachten

Seit Juni 2021 ist für alle Onlineangebote deutscher Hochschulen und öffentlicher Stellen ein barrierefreies Webdesign Pflicht. Denn alle Menschen – unabhängig von ihren körperlichen oder geistigen Fähigkeiten, langfristigen oder vorübergehenden Einschränkungen – sollen Websites nutzen und lesen können.

Definition zur Barrierefreiheit im Web

Was ist barrierefreies Webdesign?

Für die betroffenen Institutionen ist barrierefreies Webdesign oft eine große Aufgabe. Denn Barrierefreiheit im Web umfasst viele unterschiedliche Aspekte. Wir geben Ihnen einen Überblick über die wichtigsten Merkmale barrierefreien Webdesigns.

Bevor Sie das Projekt in Angriff nehmen, sollten Sie wissen, dass barrierefreies Webdesign keine Einschränkung der Gestaltungsmöglichkeiten oder Funktionalität Ihrer Website, Ihres Online-Portals oder Ihrer App ist. Vielmehr ist Barrierefreiheit für alle Besucherinnen und Besucher hilfreich, denn sie führt zu einer höheren Nutzerfreundlichkeit, da Inhalte besser gegliedert werden und die Website einfacher bedienbar wird.

Barrierefreiheit (im Englischen oftmals „Accessibility“) bezieht sich sowohl auf die optische Darstellung als auch auf die Inhalte von Web-Angeboten. Es schließt also Layout, Bilder und Videos genauso ein wie Texte und Programmierung. Gute Beispiele für barrierefreies Webdesign sind gesund.bund.de und einfach-teilhaben.de.

Richtlinien für barrierefreie Webinhalte

Was sind die Vorgaben für barrierefreies Webdesign?

Die gesetzlichen Vorgaben der Europäischen Union, dem deutschen Gesetzgeber und der einzelnen Bundesländer spiegeln die Web Content Accessibility Guidelines  (Richtlinien für barrierefreie Webinhalte) und die Barrierefreie-Informationstechnik-Verordnung (BITV) wider. Die WCAG gelten als internationaler Standard für barrierefreies Webdesign und wurden vom World Wide Web Consortium (W3C), einem Standardisierungsgremium für das Internet, definiert.

Beide Standards, BITV und WCAG, bestehen aus den vier Prinzipien des barrierefreien Webdesigns. Diese werden in der BITV bzw. in den WCAG durch Richtlinien genauer beschrieben. Damit jeder Internetnutzer und jede Internetnutzerin Webinhalte barrierefrei konsumieren kann, sollten diese wie folgt gestaltet sein:

Damit jeder Internetnutzer und jede Internetnutzerin Webinhalte barrierefrei konsumieren kann, sollten diese wie folgt gestaltet sein:

  • Wahrnehmbar
  • Bedienbar
  • Verständlich
  • Robust

Prinzip 1: Wahrnehmbarkeit

Alle Inhalte einer Website, also Text, Bild und Video, müssen wahrnehmbar, das heißt gut erkennbar und leserlich sein.

Für Texte bedeutet das, dass:

  • sie sich gut vom Hintergrund absetzen müssen (ausreichender Farbkontrast)
  • serienfreie Schriften zu bevorzugen sind
  • sich einzelne Buchstaben deutlich voneinander unterscheiden müssen
  • sie linksbündig im Flattersatz gesetzt sind
  • sie nicht über die gesamte Bildschirmbreite laufen
  • die Schriftgröße nicht zu klein gewählt sein darf.

Zu Texten zählen übrigens auch Links. Diese müssen deutlich als solche erkennbar sein, etwa durch eine andere Schriftfarbe oder Unterstreichung. Sie sollten aussagekräftig sein, damit sich Menschen schnell einen Überblick verschaffen können (das gleiche gilt auch für Überschriften). Außerdem müssen sie über das Linkziel informieren.

Insbesondere für sehbehinderte Menschen ist es wichtig, dass Bilder und Grafiken anderweitig wahrnehmbar sind. Deshalb müssen schriftliche Informationen zu den verwendeten Bildern vorliegen. Nur so können sogenannte Screenreader, also Hilfsmittel für blinde und sehbehinderte Menschen, sie erfassen. Dafür müssen Sie im sogenannten Alternativtext eine kurze Beschreibung hinterlegen. Gibt es Grafiken und Diagramme mit viel Informationen reicht ein Alternativtext allerdings nicht aus. Sie müssen in einer barrierefreien Tabelle umgesetzt werden.

Analog dazu müssen Sie Videos für gehörlose oder schwerhörige Menschen mit Untertitel versehen und ebenfalls mit einem Alternativtext hinterlegen. Wichtige Inhalte müssen außerdem in Gebärdensprachenvideos angeboten und Audio-Dateien in Schriftform vorhanden sein.

Auch das Thema Responsivität gehört zum barrierefreien Webdesign. Egal auf welcher Art von Gerät der Nutzer oder die Nutzerin die Website öffnet, muss sich das Design automatisch anpassen. Sie sollten die Darstellung je nach ihren Bedürfnissen auch manuell vergrößern oder verkleinern können.

Prinzip 2: Bedienbarkeit

Damit eine Website für alle Menschen bedienbar ist, muss man sie auch ohne Maus, Tippen oder Wischen navigieren können. Das ist wichtig für Menschen, die sehbehindert sind oder Arme, Hände oder Finger nicht oder nur eingeschränkt bewegen können.

Barrierefreie Websites können zum Beispiel mit der Tastatur navigiert und so alle Inhalte erreicht werden. Die Tabulator-Taste führt von Link zu Link. Auf mobilen Geräten muss sie sich über die Sprachsteuerung steuern lassen.

Prinzip 3: Verständlichkeit

Verständlichkeit ist ein weiterer wichtiger Aspekt barrierefreien Webdesigns. Dabei hilft ein kurzer Einstiegstext auf jeder Unterseite und eine übersichtliche Gliederung der Inhalte.

Verständlichkeit können Sie unter anderem fördern, indem Sie Menüpunkte und Überschriften eindeutig und klar formulieren. So verstehen User (mit Hilfe von Screenreadern), wo sie welche Inhalte finden.

Texte sollten Sie so einfach wie möglich halten. Das heißt auch, schnell zum Punkt zu kommen. Sätze sind kurz und verständlich, Fremdwörter werden vermieden.

Barrierefreies Webdesign erfordert aber auch, dass Informationen in Leichter Sprache und Gebärdensprache angeboten werden. Leichte Sprache ermöglicht es Menschen mit einer Lernbehinderung, kognitiven Einschränkungen oder geringen Deutschkenntnissen, die Inhalte zu verstehen.

Prinzip 4: Robustheit

Robust im Kontext von barrierefreiem Webdesign bedeutet, dass eine Website in vielen Webbrowsern und mit diversen Hilfsmitteln für Menschen mit  Behinderung funktioniert.

Dafür müssen Sie alle Inhalte mit der Programmiersprache HTML strukturieren. Einzelne Textteile, wie Überschriften, Tabellen oder Links, werden so als  solche gekennzeichnet und können von Screenreadern richtig ausgegeben werden.

Barrierefreies Webdesign fuer Hochschulen

Checklisten und Online-Tools

Checklisten für barrierefreies Webdesign

Checklisten können Ihnen jedoch helfen, sicherzustellen, dass Sie die wichtigsten Punkte für barrierefreies Webdesign beachtet haben. Ebenso wie maschinelle Tests zur Überprüfung der Barrierefreiheit reichen sie allerdings nicht aus. Denn automatische Werkzeuge, wie webhint.ioAccessibility Insights oder axe, sind nicht fähig, die meisten Anforderungen verlässlich zu prüfen. Sowohl Checklisten für barrierefreies Webdesign als auch maschinelle Prüfverfahren sind aber gute Hilfsmittel zur Orientierung.

Fazit

Warum barrierefreies Webdesign?

Barrierefreies Webdesign ist nicht nur eine lästige Verpflichtung, sondern ein Angebot, dass allen Website-Besucherinnen und -Besuchern hilft. Für einen Teil der User ist sie notwendig, einen weiteren Teil unerlässlich, aber für alle verbessert sie die Nutzererfahrung. Barrierefreies Webdesign erreicht mehr Menschen und verbessert die Benutzerfreundlichkeit von Websites.

Bisher gibt es keine Pflicht für barrierefreies Webdesign für private und kommerzielle Websites, allerdings profitieren auch diese davon, ihre Internetangebot inklusiver zu gestalten. Schließlich macht es das Internet inklusiver und wertvoller für alle.

Idealerweise konzipieren Sie Ihr Webdesign von Beginn an technisch und redaktionell barrierefrei. Denn gelegentlich lassen sich Barrierefreiheit und ein bestehendes Corporate Design nicht einwandfrei kombinieren, etwa weil sich die Textfarbe nicht stark genug von der Hintergrundfarbe abhebt.

Falls Sie eine bestehende Website umgestalten müssen oder möchten, unterstützt visual4 Sie dabei gerne. Melden Sie sich bei uns.

Mehr zum Thema

Digitalagentur

Digital Designer – die gestalterische Führungsrolle

Digitale Anwendungen begegnen uns überall: Wir suchen täglich Informationen auf Websites, nutzen mobile Apps und viele andere IT- und softwaregestützte Lösungen. Für die Gestaltung all dieser Anwendungen ist der Digital Designer. Diese Berufsrolle mit ihrer breit angelegten und anspruchsvollen Kompetenzprofil stellen wir in diesem Beitrag vor.
Webdesign

4 Designansätze mit ihren Vor- und Nachteilen

Responsive Design ist mittlerweile in aller Munde. Doch was ist das überhaupt und wie unterscheidet sich die Methodik von Fixed Design, Fluid Design und Adaptive Design? In diesem Beitrag findest du es heraus!
Webdesign

Diese Webdesign-Trends sollten Sie kennen

Bunt, skurril und lebhaft. Die Webdesign-Trends 2022 sind so vielfältig wie kaum zuvor. Eine moderne Website zu führen bedeutet nicht nur aus der Menge hervorzustechen und auf dem aktuellen Stand zu sein, sondern auch den technischen Anforderungen der heutigen Zeit gerecht zu werden. Wir stellen Ihnen 9 visuelle Hingucker vor und gehen auf die aktuellen technischen Trends im Webdesign ein.