Das Internet ist für alle da: Checkliste zur Barrierefreiheit von Webanwendungen

Digitale Endgeräte sowie das Internet sind Bestandteil des täglichen Lebens und zentrale Anlaufstellen zur Kommunikation und Informationssuche. Umso wichtiger ist es, dass digitale Angebote für alle Menschen, unabhängig von ihren Fertigkeiten und Fähigkeiten, zugänglich sind. Die Anforderung der Barrierefreiheit ist aus der Softwareentwicklung und dem Webdesign nicht mehr wegzudenken.

Mit der Richtlinie 2102 aus dem Jahr 2016 hat die Europäische Union zudem einen weiteren wichtigen Schritt in Richtung Barrierefreiheit in digitalen Medien vollzogen. So müssen seit dem 23. September 2018 alle öffentlichen Stellen ihre digitalen Angebote schrittweise barrierefrei gestalten und zugänglich machen. Eine nationale Umsetzung der EU-Richtlinie in Deutschland erfolgt hierbei durch Änderungen des Bundesgleichstellungsgesetz (BGG). Digitalen Angeboten im Sinne der EU-Richtlinie sind:

• webbasierte Angebote einschließlich Intra- und Extranets
• mobile Anwendungen insbesondere native Apps
• Dateiformate von Büroanwendungen wie Officedokumente sowie PDFs

Aber nicht nur öffentliche Stellen sind aufgerufen, Barrieren in der Nutzung von digitalen Angeboten abzubauen und die Teilhabe Aller zu fördern. Wer die eigene Website, App oder Software barrierearm hält, übernimmt soziale Verantwortung und ermöglicht einer größeren Zahl an Menschen den Zugriff auf die eigenen Inhalte.

Was bedeutet Barrierefreiheit und warum ist das so wichtig?

Im deutschen Recht wird eine Behinderung als individuelle Beeinträchtigung eines Menschen definiert. Menschen mit Behinderungen gibt es überall, in allen Lebensbereichen, Altersklassen, Berufsgruppen. Der Personenkreis umfasst hierbei körperlich behinderte Menschen, ebenso Menschen mit Lernschwierigkeiten oder geistiger Behinderung. Allein in Deutschland leben rund 7,8 Millionen schwerbehinderte Menschen (9,4 % der Bevölkerung), welche maßgeblich von barrierefreien Lösungen und Angeboten profitieren. Um der Barrierefreiheit gerecht zu werden, gilt es viele Punkte zu beachten, sodass auch eingeschränkte Personen problemlos auf das Webangebot, die App oder die Software zugreifen sowie komfortabel und vollständig nutzen können.

Wenn ein Produkt auch mit technischen Hilfen nicht zugänglich ist, können Menschen mit Behinderungen dies nicht nutzen oder sind in der Nutzung auf die Hilfe angewiesen. In einer barrierefreien Umwelt werden hingegen Menschen mit Beeinträchtigung nicht an der gesellschaftlichen Teilhabe gehindert. Im deutschen Bundesgleichstellungsgesetz (BGG) wird Barrierefreiheit so definiert:

"Barrierefrei sind bauliche und sonstige Anlagen, Verkehrsmittel, technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen sowie andere gestaltete Lebensbereiche, wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind." (BGG §4)

Barrierefreiheit bezeichnet im Grunde eine technische und bauliche Umwelt, welche durch alle Personen in der allgemein üblichen Weise genutzt und wahrgenommen werden kann. In Bezug auf eine Anwendung – gleichwohl, ob es sich um eine Website, App oder Software handelt – sollte diese ohne Einschränkungen oder dem Einsatz zusätzlicher Softwareinstallationen nutzbar sein, sodass alle Funktionen zur Verfügung stehen und auf die angebotenen Inhalte zugegriffen werden können.

• Schwerhörige sowie gehörlose Menschen benötigen bei Video und Audiomaterial entsprechende Untertitel oder Textfassungen
• Blinde sowie sehbehinderte Menschen können digitale Informations- und Unterhaltungsangebote nur nutzen, wenn alle Inhalte (Text, Bild, Navigationselemente, Menüpunkte, Eingabefelder etc.) ein Textäquivalent besitzen, welches von einem Screenreader (Bildschirmleseprogrammen) vorgelesen werden kann
• Für Menschen mit motorischen Behinderungen ist es unbabdingbar, dass die Lösungen und Angebote so gestaltet sind, dass diese auch ohne Maus bedient werden können
• Menschen mit kognitiven Beeinträchtigungen oder Personen mit einer Leseverständnis-Schwäche, benötigen eine klare Sprache sowie Navigationsstruktur, welche mit möglichst wenige Schritte bedient werden kann.

Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit – Die vier Prinzipien der Barrierefreiheit

Barrierefreiheit kann man nicht als Zusatzmodul eines Content-Management-Systems kaufen – Barrierefreiheit ist ein maßgeblicher Bestandteil eines Gesamtkonzeptes und muss schon in der Konzeptions- und Designphase als zentrale Zielvorgaben festgehalten sein. Grundsätzlich gilt, dass vorab des Projekts der geplante Grad der Barrierefreiheit einkalkuliert und definiert werden muss. Nachträgliche Anpassungen an Systemen sind aufwendiger und können aus strukturellen Gründen nicht immer im Nachgang realisiert werden. Die Umsetzung eines optimalen und nutzerfreundlichen Zugangs kann ‚en dé­tail‘ schnell knifflig werden, sodass Experten benötigt werden. Um eine barrierefreie Webanwendung anbieten zu können, sollten folgende allgemeine Prinzipien der Web Content Accessibility Guidelines 2.0 (WCAG 2.0) des World Wide Web Consortium (W3C) in Aufbau, Design und Struktur beachtet und eingehalten werden:

• Wahrnehmbarkeit aller Informationen und Schnittstellen auf unterschiedlichen Endgeräten
• Bedienbarkeit der Navigation auf verschiedenen Geräten und durch klare Struktur und Benutzerorientierung
• Verständlichkeit der Informationen und Schnittstelle unabhängig der persönlichen Voraussetzungen
• Robustheit der Inhalte zur Interpretation durch unterstützende sowie assistiver Computertechnologien (Screenreader, Spracheingaben, Vergrößerungssoftware, Bildschirmtastatur etc.)

Checkliste Barrierefreiheit: Für eine barrierefreie Website, barrierefreie App oder barrierefreie Software

Unsere Checkliste für eine barrierefreie Webanwendung hilft, die Umsetzung besser zu planen, kritisch zu überprüfen und gegebenenfalls zu überarbeiten. Die Checkliste richtet sich zum großen Teil an die Empfehlungen der WCAG 2.0 zur barrierefreien Gestaltung von Webinhalten. Ergänzend wurde die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung 2.0) hinzugezogen.

Aufbau

• Gewährleistung einer vollständigen Bedienbarkeit bei einer Bildschirmauflösung von mindestens 800 x 600 Pixel
• Verwendung von Stylesheets für das Design
• Sicherung der Nutzbarkeit, selbst bei ausgeschalteten Stylesheets
• Bereitstellung separater Stylesheet für das Ausgabemedium „handheld“ sowie einer optimierten Druckversion „print“
• Nutzung von HTML5 sowie CSS3 gemäß der W3C
• Gewährleistung der Bedienbarkeit auch ohne Maus bzw. nur mit Tastatur
• keine Verwendung von Listen und Listenelemente für Layoutzwecke
• Kennzeichnung von Frames mit sinnvollen Titeln und Namen

Navigationselemente

• Bezeichnung grafischer Bedienelemente mit aussagekräftigen Alternativtexten (Alt-Tags)
• Bereitstellung einer Inhaltsübersicht (Sitemap) oder anderweitiger Orientierungshilfe
• eindeutig identifizierbare Hyperlinks
• Linkziele mit informativem „Title“-Attribut (Beispielsweise: Link öffnet PDF-Datei in neuem Fenster)
• Links auf Nicht-HTML-Seiten mit Beschreibung zum verlinkten Datenformat (z.B. PDF, Word usw.)
• Bereitstellung von inhaltlichen Sprungmarken

Farben und Kontraste

• farbige und grafische Informationen müssen auch ohne Farbe sinnvoll genutzt und verstanden werden
• Vermeidung von problematischen Farbkombinationen (gleicher Grauwert in S/W-Umsetzung)

Fließtext und Überschriften

• Einsatz variabler Schriftgrößen
• Nutzung von Überschriftentags von <h1> bis <h6> 
• Verwendung von Unterstreichungen nur bei Verlinkungen
• Hintergrund und Schrift verfügen über ausreichend Kontrast.
• Sicherung der Erkennbarkeit und Lesbarkeit von Textinhalten bei 200%-Vergrößerung durch bestehende Browserfunktionen

Textuelle Inhalte

• Verwendung einer einfachen und klaren Sprache
• Vermeidung von Umgangssprache und Slangwörtern
• Angebot eines Glossars zum besseren Textverständnis
• Verwendung von Title und Meta-Description zur inhaltlichen Orientierung der Suchmaschinen

Grafische Inhalte

• Vermeidung von animierten Grafiken
• Verwendung von aussagekräftigen Alternativtexten (Alt-Tags) zur Beschreibung von Grafiken und Bildern

Multimediale Inhalte

• Bereitstellung von Untertiteln bei Videos sowie Textfassungen bei Tondokumenten

Tabellen

• Verzicht auf verschachtelte Tabellen
• Verwendung geeigneter Beschriftungen für den Tabellenkopf
• korrekte Kennzeichnung von Datentabellen in Zeilen- und Spaltenüberschriften mittels <td> für Datenzellen und <th> für Überschriften

Officedokumente und PDFs

• hinterlegen der Sprachauszeichnung zur Erkennung der Sprache
• hinterlegen des Dokumententitels in den Meta-Daten des Dokuments
• Wahrung einer logischen Lesereihenfolge
• Strukturierung (Tagging) der Inhalte durch Überschriften, Absätzen etc.
• Einfügen von Alternativtexten (Alt-Tags) für Bilder 

Formulare

• Verwendung geeigneter Beschriftungen der Formularfelder
• Gruppierung von Formularfeldern durch das Element <fieldset> 
• Verwendung schlüssiger Formularblöcke
• Betitelung jeder Formulargruppe durch den Einsatz des <legend>- Elements
• Logische Verknüpfung der einzelnen Formularfragen und Eingabefelder mit Hilfe von <label> 

Scripte und Applets

• Sicherung der Nutzbarkeit der Webanwendung selbst bei Abschaltung bzw. fehlender Unterstützung clientseitiger Scripte, Applets oder programmierte Objekte im Browser
• Verzicht auf flackernde, blinkende oder sich bewegende Elemente

Welche Vorteile und welchen Nutzen habe ich von einer barrierefreien Website, barrierefreien App oder barrierefreie Software?

Mit fast 10 % der deutschen Gesamtbevölkerung stellen schwerbehinderte Menschen in Deutschland eine nicht zu unterschätzende Zielgruppe dar. Zudem können erhöhte Reichweiten durch barrierefreies Webdesign sowie dem Angebot barrierefreier Webanwendungen ermöglicht werden. Zudem kann durch Erfüllung des hohen technischen Anspruchs an Barrierefreiheit in Design und technischer Umsetzung die eigene Onlinekompetenz demonstriert, nachhaltig für die Kompatibilität von Geräten und Browsern gesorgt sowie Grundlage für eine erfolgreiche Suchmaschinenoptimierung geschaffen werden.

• plattformübergreifende und browserübergreifende Erreichbarkeit
• Zugänglichkeit auch für mobile Endgeräte
• Unterstützung verschiedener Monitorauflösungen durch flexible Layouts
• Bessere Auffindbarkeit in Suchmaschinen
• Bessere Akzeptanz und geringere Abbruchquoten
• Verringerung der Nutzerfrustration durch optimierte Ladezeiten und benutzerorientierte Navigation
• mehr Semantik und besseres Fehlerhandling durch HTML5
• Unterstützung international gültiger Webstandards WCAG 2.0 und Wahrung der Gesetzeskonformität entsprechend BITV 2.0

Was Youbility für Sie tun kann: Barrierefreiheit und Usability-Optimierung

Als Web- und Usability-Experten entwickeln wir lösungsorientierte Produkte mit Blick auf ein optimales Nutzererlebnis unter Einhaltung geltender Konventionen zur Barrierefreiheit. Wir wollen, dass Informationen im Web für alle Menschen zugänglich sind – ohne Hindernisse. Darum setzen wir auf die Umsetzung von barrierefreien Websites, Apps oder Software. Gern beraten und unterstützen wir Sie in der Realisierung einer nachhaltige Webpräsenz, App oder Individualsoftware.

Unsere Leistungen im Einzelnen

Mit unserem Angebot zu barrierefreie Webgestaltung für einen optimalen und nutzerfreundlichen Zugang bietet Youbility Software eine barrierefreie Umsetzung neuer Webseiten oder Analyse bestehender Webanwendungen.

• Check auf Barrierefreiheit und Beratung zu Optimierungspotenzialen
• Entwicklung und Umsetzung von Websites, Apps und Softwarelösungen nach BITV 2.0 und WCAG 2.0
• Entwicklung von barrierefreien Navigationskonzepten
• Entwicklung und Umsetzung von Redaktions- sowie Content-Management-Systemen die Barrierefreiheit im Front- und Backend unterstützen
• Integration von barrierefreien Videoplayern

Bildquelle: © Paul Green | unsplash.com