BARRIEREFREIHEIT IM WEB
Barrierefreies Webdesign für Hochschulen: Das müssen Sie beachten
Inhalt
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.
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.io, Accessibility 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.