Barrierefreies Webdesign: Internet für alle nutzbar machen
Zur Barrierefreiheit gehört mehr als eine Rampe vor der Eingangstüre, Piep-Töne für den Fußgängerüberweg und schwellenlose Duschen. Auch das Internet sollte von allen Menschen gleichermaßen nutzbar sein. Barrierefreies Webdesign macht das möglich. Aber was zeichnet barrierefreies Design aus? Worauf müssen Webdesigner und -developer bei der Gestaltung von Internetseiten achten? Und was haben ihre Kunden davon? Ein Ratgeber für mehr Teilhabe im Netz.
Inhaltsverzeichnis
Was ist barrierefreies Webdesign?
Vorteile von barrierefreiem Webdesign
Umsetzung barrierefreier Webseiten: Beispiele und Lösungen
Barrierefreie Webseiten: Best-Practises
Tools zur Umsetzung digitaler Barrierefreiheit
Checkliste für barrierefreies Webseiten
Das Internet sollte für alle Menschen zugänglich sein. Sprache, Technik und Herkunft dürfen keine Grenzen darstellen, wenn es darum geht, an Wissen zu gelangen. Genauso wenig sollten körperliche oder geistige Behinderungen einen Grund darstellen, von der Internetnutzung ausgeschlossen zu werden. Für viele Menschen wirken sich Einschränkungen beim Sehen, Hören, Bewegen jedoch negativ aus, wenn es um die Online-Partizipation geht. Selbiges gilt für Personengruppen, deren kognitive Fähigkeiten beeinträchtigt sind.
Daraus ergibt sich, dass barrierefreies Webdesign nicht mit kleinen Änderungen an der Webseite erledigt ist. Für ein umfassendes Verständnis müssen die Begriffe Barrierefreiheit, barrierefreies Design und digitale Barrierefreiheit zuerst geklärt werden.
Barrierefreiheit: Eine Definition
Der Begriff Barrierefreiheit ist im allgemeinen Sprachgebrauch weit gefasst. Je mehr Menschen man dazu befragt, umso mehr Antworten erhält man. Das Verständnis erstreckt sich von breiten Gehwegen, Hinweisschildern in Blindensprache bis zu Formularen in leichter und verständlicher Sprache. Im Kern definiert das Gesetz zur Gleichstellung von Menschen mit Behinderung den Begriff Barrierefreiheit.
Das Behindertengleichstellungsgesetz, kurz BGG, erklärt unter §4:
„Alle Bedürfnisse von Menschen mit Behinderung müssen bei der Gestaltung der Umwelt ebenso berücksichtigt werden, wie alle anderen Anforderungen auch.“
Per Definitionem erstreckt sich Barrierefreiheit also über zahlreiche Bereiche unserer Umwelt; von Gebäuden, über Verkehrsmittel, Alltagsgegenständen bis hin zu Dienstleistungen. Entscheidend ist, ob Menschen mit körperlichen oder geistigen Einschränkungen ihre Umgebung ohne fremde Hilfe und Erschwernisse wahrnehmen und nutzen können. Dabei stehen keine spezifischen Gruppen im Zentrum der Betrachtung. Vielmehr geht es darum, die Bedürfnisse aller zu berücksichtigen – egal, ob es um Behinderungen im klassischen Sinne geht, Alterserscheinungen oder um das Bildungsniveau.
Was heute selbstverständlich klingt, war es längst nicht immer. Bis zum Gesetzesentwurf der Fraktionen SPD und Bündnis 90/Die Grünen im Jahr 2001 herrschte die Sichtweise vor, Menschen mit Behinderungen sollten mit speziellen Hilfsmitteln ausgestattet und trainiert werden, um mit ihrer Umwelt zurechtzukommen. Die neue Definition rückt stärker an das Konzept des „Universal Designs“ – eine Gestaltung des menschlichen Lebensraumes, die niemanden ausschließt und von der alle profitieren.
„Barrierefreiheit ist kein zusätzliches Feature. Sie ist die Voraussetzung für ein gelungenes Webdesign und einen erfolgreichen Digitalauftritt.“ – Jenny Wullich
Der US-amerikanische Architekt Ronald Mace prägte den Begriff Universal Design (DU) in den 1980er Jahren. Dahinter steckt ein übergreifendes Konzept, das sich über alle Produkte, Systeme und Umgebungen erstreckt. Egal, ob es sich um die Gestaltung von Küchengeräten oder die Programmierung einer App geht – Themen wie Usability und User Centered Design haben Priorität. Das Konzept „Design für alle“ fokussiert sich nicht nur auf Menschen mit Behinderung, sondern will allen Menschen nutzen.
Die sieben Prinzipien des Universal Design:
- Breite Anwendbarkeit für alle Menschen mit unterschiedlichen Fähigkeiten
- Flexible Benutzung durch die Berücksichtigung individueller Präferenzen und Fähigkeiten
- Intuitive Handhabung, unabhängig davon, über welche Erfahrungen, welches Wissen, welche Sprachkenntnisse oder welchen Konzentrationsgrad der Nutzer verfügt
- Sensorisch wahrnehmbare Informationen, unabhängig von der Umgebung oder den Fähigkeiten des Nutzenden
- Risikominimierung bei der Anwendung: Fehlertoleranz sowie die Vermeidung von Gefahren und negativen Folgen unbeabsichtigter Handlungen
- Angepasster Kraftaufwand: Eine bequeme Anwendung ohne hohen körperlichen Aufwand
- Benutzung und Zugang: Unabhängig von Größe, Körperhaltung und Mobilität des Nutzenden
Universell gestaltete Produkte, Räume und Dienstleistungen sind frei von Barrieren und dienen allen Menschen. Sie sind einfach zu verstehen und anzuwenden. Das Prinzip des Universal Designs lässt sich ohne Weiteres auf die Gestaltung von Webseiten übertragen und bietet einen Mehrwert für alle User.
Was bedeutet der Begriff Barrierefreiheit nun bezogen auf Webseiten (barrierefreies Webdesign)? Das World Wide Web ist da, um Informationen für alle zugänglich zu machen – theoretisch zu jeder Zeit, von jedem Ort und vor allem von allen Menschen. Wir alle wissen: Die Praxis sieht das anders aus. Viele User treffen auf Barrieren bei der Wahrnehmung, Bedienung, Verständlichkeit und Robustheit von Webseiten.
Die Gründe für digitale Barrieren können in drei Bereichen liegen:
- Technik
Menschen mit Einschränkungen können auf Hilfsmittel zurückgreifen, um eine Website zu nutzen. Aber nur, wenn die Website technisch darauf ausgelegt ist. - Design
Die optische Gestaltung einer Website soll die Aufnahme von Informationen unterstützen und erleichtern. Schwache Kontraste, schwer lesbare Typografie und eine komplexe Menüführung erreichen das Gegenteil. - Inhalt
Texte, Bilder, Videos: Der Content von Webseiten ist dann barrierefrei, wenn er einfach zu konsumieren, vorlesbar und gut strukturiert ist. Eine Website ist zwecklos, wenn sie nicht verstanden wird.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Untertitel über YouTube verfügbar,
bitte manuell im Videofenster aktivieren.
Barrierefreie Webseiten: Bald verpflichtend
Wer Webseiten barrierefrei gestalten will, sollte sich mit verschiedenen Richtlinien vertraut machen. Und zwar noch vor dem 28. Juni 2025: Denn dann tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft und verpflichtet Unternehmen zur Barrierefreiheit in verschiedenen Bereichen, beispielsweise dem Onlinehandel und Telekommunikationsdienstleistungen. Somit müssen auch Websites, Webshops und Apps barrierefrei gestaltet sein. Wer gegen das BFSG verstößt, muss mit Strafen rechnen – ein Grund mehr, um sich schon jetzt um die barrierefreie Gestaltung der eigenen Webseite zu kümmern und diese entsprechend zu optimieren.
Das BFSG setzt die Richtlinie des European Accessibility Act (EAA) um. Deren Ziel ist es europaweit einheitliche Regeln zu Barrierefreiheit schaffen – basierend auf der europäischen Norm EN 301549, die sich wiederum an den internationalen Richtlinien für barrierefreie Webinhalte (WCAG) orientieren.
Geldautomaten und Bankdienstleistungen
Computer
Telefone und TV-Geräte
Telekommunikationsdienstleistungen
Transport
Online-Handel
Details und konkrete Maßnahmen regelt die europäische Norm EN 301 549.
Exkurs: Gesetze und Richtlinien für barrierefreies Webdesign im Überblick
Die EN 301 549 ist die europäische Norm für digitale Barrierefreiheit. Sie setzt Standards fest für die Barrierefreiheit der Informations- und Kommunikationstechnik des öffentlichen Sektors. Für die Barrierefreiheit der Informations- und Kommunikationstechnik des öffentlichen Sektors ist die Einhaltung der Norm bereits Pflicht. Für die Privatwirtschaft gilt sie ab 2025.
Barrierefreiheitsstärkungsgesetz
Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt das EAA in deutsches Recht um. Verabschiedet wurde es am 16. Juni 2021 und tritt nach Ablauf der Übergangszeit am 28. Juni 2025 vollends in Kraft. Ab diesem Zeitpunkt sind alle deutschen Unternehmen zur Barrierefreiheit verpflichtet.
Barrierefreie Informationstechnologie-Verordnung (BITV)
Auf Landesebene existieren unterschiedliche Gesetze, um die EU-Vorgaben zu erfüllen. In Deutschland gilt das Behindertengleichstellungsgesetz mit der Barrierefreie-Informationstechnik-Verordnung (BITV) 2.0. Sie ist die Weiterentwicklung der BITV 1.0 und seit dem 21. April 2021 in Kraft.
In der Schweiz gilt seit 2004 das Behindertengleichstellungsgesetz (BehiG), das altersbedingte Einschränkungen bereits mitberücksichtigt.
WCAG
Die „Web Content Accessibility Guidelines“ (WCAG), zu Deutsch „Richtlinien für barrierefreie Web-Inhalte“ bündeln verschiedene Regeln anhand derer sich die Barrierefreiheit von Webseiten und Apps überprüfen lässt. Die WCAG sind ein anerkannter Standard der Web Accessibility Initiative (WAI) des World Wide Web Consortiums (W3C). In der EU sind sie für neue und bestehende Webseiten von öffentlichen Stellen bereits verpflichtend. Auch bekannte Insitutionen wie ISO, CEN, CENELEC, ETSO haben sie bereits zur Norm erklärt.
Die Web Content Accessibility Guidelines beschreiben vier Grundprinzipien für barrierefreies Webdesign:
- Wahrnehmbarkeit: Auch Menschen mit Sehbehinderung muss es möglich sein, mithilfe textlicher Alternativen und/oder guter Farbkontraste die Informationen auf einer Website wahrzunehmen.
- Bedienbarkeit: Nutzeroberfläche und Navigation müssen so aufbereitet sein, dass alle Nutzer in der Lage sind, die Website zu bedienen. Auch wenn sie dazu keine Maus benutzen können.
- Verständlichkeit: Informationen und Bedienung einer Website müssen einfach zu verstehen sein.
- Robustheit: Eine Website ist robust, wenn sie von verschiedenen Endgeräten sowie von Hilfstechnologien wie Vorlesefunktionen und Bedienungshilfen verlässlich aufgerufen und interpretiert werden kann.
Zur Umsetzung der WCAG-Richtlinie gelten drei Stufen.
Stufe A erfüllt die 25 Basis-Kriterien für barrierefreies Webdesign. Diese grundlegenden Anforderungen machen es möglich, dass Menschen mit Behinderung eine Website nutzen können.
Stufe AA: erfüllt 13 weitere Kriterien, die die Website-Nutzung für die Mehrheit aller Menschen mit Behinderung ermöglichen. Die Anforderungen der Stufen A und AA sind bereits mit geringem Aufwand zu erfüllen.
Stufe AAA erreichen Webseiten, die weitere 23 Kriterien erfüllen. Damit ist jedoch ein höherer Aufwand verbunden.
Die Vorteile von barrierefreiem Webdesign
Warum sollten sich Ihre Auftraggeber dazu entscheiden, den Internetauftritt Ihres Unternehmens barrierefrei zu gestalten? Die Gründe sind zahlreich. Firmen, Vereine und Institutionen profitieren zum einen davon, dass künftig mehr Personen ihre Webangebote nutzen können und der potentielle Nutzerkreis dadurch wächst. Zum anderen wirkt sich barrierefreies Design vorteilhaft auf die Suchmaschinenoptimierung (SEO) aus.
Weitere Benefits für Unternehmer sind:
Digitale Teilhabe
Ohne barrierefreies Design, keine soziale Teilhabe und Selbstbestimmung: Ist eine Website barrierefrei gestaltet, hat jeder Mensch die Chance, sie ohne fremde Hilfe zu erreichen und zu nutzen. Egal, ob Personen beeinträchtigt sind oder nicht.
Mehr Reichweite
In Deutschland leidet fast ein Drittel der Bevölkerung unter eine Sehbeeinträchtigung, motorischen Einschränkungen, Konzentrationsschwäche oder einer begrenzten Lesekompetenz. Oft entwickeln sich diese Einschränkungen im Laufe des Lebens. Wer sein Webangebot entsprechend gestaltet, vergrößert seinen Nutzerkreis.
Erweiterter Kundenkreis
Barrierefreies Webdesign vergrößert die Zielgruppe und bindet Nutzer langfristig. Nicht nur Arztpraxen, Optikerinnen und andere Dienstleister sollten ihr Webangebot Menschen mit einer Beeinträchtigung zugänglich machen.
Positive Usability
Eine einfache Bedienbarkeit ist das Markenzeichen barrierefreier Webseiten. Dazu zählt eine intuitive Navigation, schnelle Orientierung, gut lesbare Texte und barrierefreie Farbkonzepte. Eine gute User-Experience sollte immer höchste Priorität haben.
Rechtliche Verpflichtungen
Für öffentliche Institutionen von Bund, Ländern und Kommunen sind barrierefreie Webseiten bereits Pflicht. Ebenso für juristische Personen öffentlichen und privaten Rechts. Für die Privatwirtschaft gilt der 25.06.2025 als Stichtag: Dann müssen auch sie barrierefreie Webseiten anbieten.
Suchmaschinenoptimierung (SEO)
Suchmaschinen lieben barrierefreies Webdesign und belohnen die Mühe mit einer besseren Platzierung in der Trefferliste. Nutzerfreundlichkeit hat bei Google, Bing und Co. Priorität und stellt einen wichtigen Rankingfaktor dar.
Mobile Nutzung
Responsives Design sorgt dafür, dass Webseiten sowohl auf kleinen Smartphone-Bildschirmen, als auch auf großen Flatscreens optimal angezeigt werden. Andere technische Barrieren betreffen die Bandbreiten von Mobilfunknetzen – auch für schlechten Empfang werden barrierefreie Webseiten optimiert.
Soziale Verantwortung
Unternehmen, die ihre Webseiten barrierefrei gestalten, übernehmen soziale Verantwortung. Sie schließen Menschen mit Einschränkungen nicht aus und können ein Vorbild für andere sein. Das wirkt sich positiv aufs Markenimage aus.
Gesteigerte Conversionrate
Mehr Conversions durch barrierefreies Webdesign: Die positive Nutzererfahrung sowie eine vergrößerte Zielgruppe wirken sich auch auf die Anzahl der Transaktionen auf einer Website aus.
Umsetzung barrierefreier Webseiten: Beispiele und Lösungen
Schritt-für-Schritt zur barrierefreien Website: Nicht alle Kriterien lassen sich im Handumdrehen umsetzen. Vielmehr steht ein Prozess dahinter, der Erfahrung, Übung und den Willen zum stetigen Verbessern verlangt.
Grundsätzlich gilt es, an Personengruppen mit folgenden Einschränkungen zu denken:
Seheinschränkung
Farbblindheit
Blindheit
Schwerhörigkeit
Gehörlosigkeit
Motorische Einschränkungen
Spasmen
Lähmungen
Fehlende Gliedmaßen
Zittern
Muskelschwäche
Kognitive Einschränkungen
Lernschwierigkeiten
Leseschwäche
Konzentrationsschwäche
So setzt du barrierefreie Webseiten konkret um
Im Folgenden ist ein Beispiel aufgeführt, das die Umsetzung eines barrierefreien Webdesigns darstellt. Je nachdem, wie hochgradig die Einschränkung der Nutzer ist (Stufe 1 = leichte Einschränkung bis Stufe 3 = schwere Einschränkung) kommen unterschiedliche Maßnahmen zum Tragen.
Beispiel: Barrierefreies Webdesign für Menschen mit Sehbehinderung
Stufe 1: Typografie
Gut leserliche, serifenlose Schriften mit einem ausreichenden Zeilenabstand erleichtern das Lesen. Sie sollten groß angezeigt und für Menschen mit Sehbeeinträchtigung skalierbar sein. Das Verhältnis von Flatter- und Blocksatz sollte ausgeglichen sein.
Stufe 2: Kontraste
Schriften sollten sich eindeutig vom Untergrund abheben. Voraussetzung dafür ist ein gutes Kontrastverhältnis. Die Web Content Accessibility Guidelines (WCAG) definieren diese für verschiedene Grade von Sehbeeinträchtigungen.
Stufe 3: Screenreader
Wer sich eine Website mithilfe eines Screenreaders vorlesen lässt, kann keine Bilder oder Grafiken betrachten. Der HTML-Quelltext einer Grafik bietet die einzige Möglichkeit, etwas über die visuellen Elemente einer Website zu erfahren. Aussagekräftige Alternativtexte sind für Screenreader-Nutzer daher essenziell.
Accessible Rich Internet Application (ARIA)
Der Webstandard WAI-ARIA macht Inhalte und Applikationen für Menschen mit Beeinträchtigung zugänglich. Wenn Webentwickler und -designer ARIA-Elemente in die Navigations-Landmarken und JavaScript-Widgets einer Website integrieren, wird der Content barrierefrei.
ARIA kommt dann zum Einsatz, wenn der HTML-Code keine ausreichende Semantik für die Accessibility aufbringt. Dabei ist darauf zu achten, dass die HTML-Semantik nicht umdefiniert wird. Vielmehr ergänzen ARIA-Attribute den vorhandenen Code.
Jetzt loslegen und mehr Menschen dank barrierefreiem Webdesign erreichen
Du möchtest ein Projekt bei designhoch10 anfragen? Gerne schulen wir dich in einem Workshop und geben dir Tipps, wie du die Barrierefreiheit deiner Online-Präsenz steigern kannst.
Beispiele für barrierefreie Webseiten aus dem Netz
1. Gov.uk
Für die Inklusion im Netz nimmt die britische Regierung eine Pionier-Rolle ein. Auf den Webseiten sind zahlreiche Maßnahmen umgesetzt, die eine hervorragende Nutzererfahrung garantieren – unabhängig von geistigen oder körperlichen Voraussetzungen. Dazu zählen:
Semantisches und gut strukturiertes HTML
Verbesserungen für Screenreader- und Tastaturbenutzer
selbsterklärende Namen der Navigationselement
ARIA-Attribute für Formular-Links
Der mögliche Wechsel zwischen Balkendiagrammen und Tabellen mit klaren Zahlen
2. scope.org.uk
Die Website von Scope, einer Organisation für Behindertengleichstellung, lässt sich mit der Tastatur bedienen. Die großformatigen Bilder sind auch für seheingeschränkte Nutzer erkennbar. Große Schriften, hohe Kontraste und klar gestaltete Schaltflächen erleichtern überdies die Navigation.
3. eurowings.com
Die Website des Fluganbieters ist ein gutes Beispiel dafür, wie modern, übersichtlich und intuitiv barrierefreies Webdesign aussehen kann. Auf der Startseite lassen sich beispielsweise Slider anhalten, damit sich Texte besser lesen lassen.
4. sogverkauf.de
Den Relaunch der Website von der Andreas Hoffmann Akademie „sogverkauf.de“ hat Designhoch10 übernommen. Der barrierefreie Relaunch hat sich insbesondere im Hinblick auf die Suchmaschinenoptimierung ausgezahlt. Die bessere Nutzererfahrung wird auch von Google und Co. honoriert. Allerdings handelt es sich bewusst um eine „Hybridlösung“ aus technischer Barrierefreiheit und einem Optisch effektvollem Ausbau. Da die Hauptzielgruppe sehend ist.
5. BSVSH.de
Redesign der Seite für den Blinden- und Sehbehindertenverein Schleswig-Holsteins. (BSVSH). Die Seite ist so aufgebaut, dass sie die Mitglieder über das Backend selbst gepflegt werden kann.
Tools zur Umsetzung digitaler Barrierefreiheit
Digitale Werkzeuge unterstützen Webdesigner dabei, zu überprüfen, wie es um die Barrierefreiheit einer Seite steht:
Read Speaker
Der ReadSpeaker liest die Text-Inhalte einer Webseite laut vor. Durch einen Klick auf den Vorlese-Button wird der Text außerdem farbig hervorgehoben, damit User ihm problemlos folgen können. Außerdem lässt sich der ausgewählte Text in viele Sprachen übersetzen, die Vorlesegeschwindigkeit anpassen und verschiedene Stimmen können nach eigenen Vorlieben gewählt werden.
PageSpeed Insights
Die Ladegeschwindigkeit einer Website ist nicht nur ein wichtiges Kriterium für ihre Barrierefreiheit. Suchmaschinen wie Google und Bing bevorzugen schnell ladendende Seiten und belohnen sie mit einem besseren Ranking. Mithilfe eines Pagespeed-Tests erfahren Sie, wie schnell eine Domain lädt. Außerdem listet das Tool praktische Maßnahmen auf, anhand derer sich die Ladezeiten verbessern lassen.
Leserlich.info
Ein Kontrastrechner auf leserlich.info verrät, ob die gewählte Farbkombination einer Webseite barrierefrei ist. Dazu müssen lediglich die Farbwerte für Vorder- und Hintergrundfarbe eingegeben werden. Alternative Tool zur Überprüfung von Farbkontrasten sind Contrast Checker oder Color-Contrast-Analyser.
Google Lighhouse
Das Plugin für den Chrome-Browser ist ein automatisierter Test, der die „Accessibility Essentials“ einer Website überprüft. Dazu zählen neben Kontrasten, Schriftgrößen, Labels, Touch Targets oder Alt-Texten auch ARRIA-Attribute, die barrierefreie Navigation sowie der Audio- und Videoelementen zugrundeliegende Code. In Kombination mit der Browsererweiterung Headingmap ergibt sich ein guter Überblick der gesamten Websitestruktur.
Coblis
Mithilfe von Coblis lassen sich Farbfehlsichtigkeiten von Bildern simulieren. Dazu genügt es, einen Screenshot der eigenen Websitebilder abzuloaden.
LanguageTool
Wie verständlich und einfach ein Text formuliert ist, lässt sich mit dem LanguageTool überprüfen. Eine Alternative bietet darüber hinaus der Sprachassistent von WortLiga.
WAVE
Das Web Accessibility Evaluation Tool WAVE wurde von WebAIM.org entwickelt und untersucht Webseiten auf die wichtigsten Punkte der Barrierefreiheit. Dazu zählt der Check von Überschriftenstrukturen oder fehlenden Alt-Texten. Um eine Prüfung zu starten, rufen Sie das Tool auf und geben die entsprechende URL ein. Die Ergebnisse werden anhand von Symbolen direkt auf der geprüften Seite angezeigt. WAVE ist als Online-Version und Toolbar für Firefox, Edge und Chrome verfügbar. Wer auf der Suche nach einer robusteren, automatischen Tool-Lösung ist: Pope Tech nutzt Wave für seine Test- und Berichtsfunktion im Bereich Barrierefreiheit.
Lynx
Lynx ist ein textorientierter Browser. Mit seiner Hilfe lässt sich überprüfen, ob Webseiten auch bei ausgeschalteter Grafikfunktion ohne Informationsverlust lesbar sind und von sehbehinderten Menschen genutzt werden können. Alternativ lässt sich auch in Standard-Browsern die Anzeige von Grafiken ausschalten.
Screenreader-Check
Wer eine Sehbehinderung hat, ist darauf angewiesen, dass Webseiten für Screenreader kompatibel sind. Ob das der Fall ist, lässt sich einfach überprüfen. Zum Beispiel, indem Sie einen Screanreader auf Ihrem Mobiltelefon nutzen wie Google Talk Back (Androit) oder Apple VoiceOver (iOS).
BITV-Test
Das Bundesministerium für Arbeit und Sozales hat im Rahmen des Projektes „Barreirefrei informieren und kommunizieren (BIK) ein Testverfahren entwickelt. Diesem liegen die Anforderungen der Barrierefreie. Informationstechnik-Verordnung (BITV) zugrunde. Sei basiert auf den Vorgaben der Web Cotnent Accessibility Guidelines (WCAG) der Web Accessibility Initiative (WAI).
Der BITV-Test besteht aus 60 Prüfschritten. Jeder einzelne wird ausführlich erläutert. Zum Abschluss eines Webprojektes können BITV-Tests bei BITV-Test-Prüfstellen beauftragt werden. Aber auch eine Selbstbewertung ist möglich.
Allen Tool-Lösungen zum Trotz: Der beste Test ist der durch einen echten User. Software kann die Sinne eines Menschen nur simulieren, nicht ersetzen. Um sicherzugehen, dass eine Website alle Anforderungen an die Barrierefreiheit erfüllt, sollte sie vor Live-Schaltung immer von Testpersonen geprüft werden.
Checkliste für barrierefreie Webseiten
Eine kleine Checkliste soll einen ersten Überblick geben, was zu einem barrierefreien Design einer Website gehört:
Farbkonzepte mit starken Kontrasten
Leicht ersichtliche Websitestruktur
Trennung von HTML und CSS
Skalierbare Webseiten-Layouts, die auch bei starker Vergrößerung funktionieren (200 %)
Farbfehlsichtigkeiten (z.B. Rot-Grün-Blindheit) berücksichtigen
Aussagekräftige Ankertexte für Hyperlinks
Verschiedene Kontrastmodi (Optional)
Verzicht auf Schriftgrafiken
Navigation
Gut klickbare Links und Schaltflächen (für Maus, Finger, Eingabehilfen)
Website-Navigation ohne Maus ermöglichen
Mit Tastatur bedienbare Formulare und Umfragen
Abstände und Größe von Schaltflächen beachten
Navigation sollte über Touchscreen, Joystick, blick- oder mundgesteuerten Cursor und Tastatur steuerbar sein
Text
Leicht verständliche Sprache
Klar strukturierte Informationen
Hierarchisch gegliederte Überschriften
Tabellen für Screenreader lesbar gestalten
Vorgesehene HTML-Elemente nutzen
Gut leserliche Typografie
Medien
Eingebettete Videos mit Untertiteln
Audio-Inhalte mit Transkripten
Bilder in ausreichender Auflösung
Alternativtexte für Bilder hinterlegen
PDF-, Word- und PowerPoint-Dateien barrierefrei gestalten
Animationen vermeiden, die flackern und blinken (Sie können bei Epileptikern und Menschen mit vestibulären Störungen Schwindel, Kopfschmerzen auslösen)
Fazit: Barrierefreiheit von Anfang an
Webdesigner, die das Thema Barrierefreiheit mitdenken, arbeiten nachhaltig. Idealerweise integrieren sie die digitale Barrierefreiheit schon beim Start eines neuen Projektes in den Arbeitsprozess. Die Entwicklung einer Website betrifft viele Disziplinen, genauso wie ihre anschließende Pflege. Daher macht es Sinn, alle Beteiligten auch bei ihrer barrierefreien Gestaltung mit einzubeziehen – vom Projektmanager, dem Grafiker, über Redakteur bis zum Kunden.
Gerade Webseitenbetreiber profitieren in mehrfacher Hinsicht: Sie erfüllen die gesetzlichen Vorgaben, verbessern die Performance ihrer Webinhalte und erweitern ihren Online-Kundenkreis. Allesamt gute Voraussetzungen, um die Konversionsrate und Verkäufe zu erhöhen. Bereits kleine Veränderungen bewirken viel.
Ein Tipp zum Schluss: In meinen Workshops vermittle ich übrigens, wie sich barrierefreies Webdesign selbst umsetzen lässt. Alternativ können Sie mich als Profi beauftragen – und sich so eine schnelle und saubere Umsetzung Ihres barrierefreien Webprojektes sichern.
Noch Fragen?
Bei barrierefreien Webseiten gibt es eine Menge zu beachten. Informiere dich bei meinen regelmäßig stattfindenden Q&A-Terminen. Jeden Mittwoch zwischen 9 und 10 Uhr stehe ich für Fragen rund ums barrierefreie Webdesign zur Verfügung. Hier geht’s zur Anmeldung.
FAQs
Was ist eine barrierefreie Website?
Eine barrierefreie Website ist für alle Benutzer zugänglich, unabhängig von ihren Fähigkeiten oder Einschränkungen. Sie erfüllt Standards wie die WCAG und verwendet zum Beispiel einfach verständliche und gut strukturierte Texte, alternative Bildbeschreibungen und Tastaturzugänglichkeit, um sicherzustellen, dass alle Nutzer die gleichen Informationen erhalten.
Barrierefrei designte Produkte, Umgebungen oder Dienstleistungen sind für alle Menschen zugänglich. Das Ziel ist es, Barrieren zu beseitigen, die bestimmte Personengruppen daran hindern könnten, auf die gleichen Ressourcen oder Dienstleistungen zuzugreifen wie andere.
Um eine barrierefreie Webseite zu erstellen, folgen Sie diesen Schritten:
- Einhalten der Web Content Accessibility Guidelines (WCAG).
- Klare Struktur und Navigation.
- Alternative Texte für Bilder.
- Kontrastreiche Farben für bessere Lesbarkeit.
- Tastaturzugänglichkeit sicherstellen.
- Vermeidung von Flash und Blinken.
- Bereitstellung von Transkripten und Untertiteln für Videos.
- Klare Kennzeichnung und genügend Zeit für Formulare.
- Testen mit Assistenztechnologien.
- Regelmäßige Überprüfung und Aktualisierung der Barrierefreiheit.
Die Kosten für eine barrierefreie Website variieren je nach Umfang und Komplexität, einschließlich Design, Entwicklung, Content-Management-System, Inhalt, Testing, Validierung, Schulung und Support. Sie können ähnlich wie bei herkömmlichen Websites sein, aber zusätzliche Arbeit für barrierefreies Design kann zu etwas höheren Kosten führen. Gerne erstelle ich ein individuelles Angebot für Ihr Projekt. Kontaktieren Sie mich dafür unter Tel. +49 (0)89 215 397 26 oder per E-Mail an brieftaube@designhoch10.de.
In vielen Ländern gibt es gesetzliche Vorschriften, die dazu verpflichten, barrierefreie Websites zu haben. Diese Verpflichtungen können je nach Land und Rechtsprechung variieren. Unabhängig von gesetzlichen Anforderungen ist es jedoch eine ethische Verantwortung, sicherzustellen, dass Websites für alle Benutzer zugänglich sind, unabhängig von ihren Fähigkeiten oder Einschränkungen.
In Deutschland regelt u. a. die Barrierefreie-Informationstechnik-Verordnung (BITV) die Barrierefreiheit von öffentlichen Stellen und bestimmten Dienstleistungen. Gemäß der BITV müssen Webseiten von öffentlichen Stellen bereits seit dem 23. September 2019 barrierefrei sein. Seit dem 23. Juni 2021 betrifft das auch viele Webseiten von nicht-öffentlichen Stellen. Die Übergangsfrist endet am 25. Juni 2025. Wer über eine Website elektronische Dienstleistungen anbietet, ist ab diesem Zeitpunkt verpflichtet, die Website barrierefrei im Sinne des Gesetzes zu gestalten.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Untertitel über YouTube verfügbar,
bitte manuell im Videofenster aktivieren.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Untertitel über YouTube verfügbar,
bitte manuell im Videofenster aktivieren.
Hallo, mein Name ist: Jenny Wullich
Und ich bin Designerin mit dem Schwerpunkt: Barrierefreies Design. Nachdem ich selbst lange [mit fast -7 Dioptrien] sehr wenig gesehen habe, habe ich mich 2019 mit dem Erbe meines Vaters zu einer Augen-Op entschlossen, die mir eine Sehqualität schenkte, die ich zuletzt als Kind hatte. Keine Kontaktlinsen mehr, keine trockenen Augen [Mit Brillen kam ich ja garnicht zurecht] und endlich wieder alles scharf sehen. Ich bin sehr glücklich, habe keine Schwierigkeiten mit den Augen mehr & nutze mein Wissen heute: Um die Brücke zwischen sehenden, schlecht sehenden und Sehbehinderten Menschen zu schlagen.
Satteln Sie Ihre Brieftaube &
kontaktieren Sie mich
+49 151 56 110 343
Termin vereinbaren
Brieftaube
