Digitale Transformation und Barrierefreiheit

In unserem Whitepaper Digitale Barrierefreiheitfinden Sie alle Richtlinien und neuen Gesetze im Überblick, Tipps zu den ersten Schritten zu digitaler Barrierefreiheit und Code-Beispiele für die wichtigsten Frontend-Elemente. 

Darüber hinaus fördert Barrierefreiheit die Erschließung neuer Zielgruppen, fördert ein inklusives Firmenimage, hilft Personen mit kurzfristiger Behinderung und forciert die Implementierung von Webstandards. 

Angereichert mit hands-on Beispielen gehen wir in diesem Artikel darauf ein, wie wir bei diva-e das Thema Barrierefreiheit ganzheitlich bei Kundenprojekten integrieren und gemeinsam mit unserem Partner Crownpeak zum nachhaltigen Erfolg für alle führen. Dazu werfen wir gemeinsam einen Blick auf die digitale Wertschöpfungskette von Enterprise Projekten und beleuchten entsprechende Ansätze zur Einhaltung von Barrierefreiheitsanforderungen vor und während des laufenden Betriebs. 

Der erste Schritt zu einer barrierefreien Onlinepräsenz beginnt mit dem Corporate Design. Bereits in dieser frühen Phase sollten Unternehmen sicherstellen, dass alle Designelemente den WCAG-Richtlinien entsprechen. Mit über 80% ist seit Jahren ein zu geringes Kontrastverhältnis der häufigste Verstoß gegen geltende W3C Richtlinien, wie der The WebAIM Million Report auch dieses Jahr wieder ermittelt. Darüber müssen Schriftgrößen und die Lesbarkeit der Inhalte von Anfang an berücksichtigt werden. Kontinuierliche Checks sind notwendig, um sicherzustellen, dass keine Barrieren übersehen werden. Diese Überprüfungen sollten sowohl manuell als auch automatisiert erfolgen, um eine hohe Genauigkeit zu gewährleisten. 

Farbgebung kontrastreich definieren: Bereits im Findungsprozess der Corporate Identity Farben müssen Kontrastwerte evaluiert und entsprechend gewählt bzw. korrigiert werden. Nach WCAG 2.2 Level AAA (Perceivable 1.4.6) muss das Kontrastverhältnis zwischen Schriftfarbe und Hintergrundfarbe bei Fließtext 7:1 und bei großem Text (>= 24px) 4,5:1 betragen. 

Kontrastüberprüfung mittels Toolsupport: Designer:innen können auf zahlreiche Softwareunterstützung zurückgreifen. Figma beispielsweise bietet eine breite Auswahl an Plugins und Widgets an. Softwareunabhängig sind eine Vielzahl von Tools online zugänglichen, welche in diesem Schritt unterstützen – z. B. der Contrast Checker WebAIM, die Development Toolbar der Browser oder auch der Contrast Checker von crownpeak (Bestandteil von DQM – Details weiter unten). 

Lesbarkeit sicherstellen: Die WCAG-Richtlinien schreiben keine fixe Mindestgröße für den Fließtext vor. Die Erfahrung zeigt, dass der Fließtext mindestens 16px groß sein sollte. Schriftschnitte unterscheiden sich aber von Font zu Font – daher sind manuelle Tests unerlässlich. Klare Richtlinien gibt es hingegen u.a. für die Breite eines Textblocks – hier dürfen 80 Zeichen nicht überschritten werden (Perceivable 1.4.8). 

Ist das CI und die entsprechenden Komponenten der Onlinepräsenz im Living Styleguide anhand der Richtlinien umgesetzt, dann gilt es, die Entwicklung nachhaltig mit Barrierefreiheitskontrollen auszustatten. Unsere Frontend Entwickler:innen verfügen über das entsprechende Know-how zur Realisierung von Barrierefreiheit im Umfeld von Corporate Plattformen sowie Onlineshops. Dabei haben sie in ihre Entwicklungsumgebung automatisierte Tools integriert, welche sie kontinuierlich auf fehlende Auszeichnungen und andere Barrierefreiheitsprobleme aufmerksam machen. So wird Barrierefreiheit bereits bei der ersten Codezeile des Projektes berücksichtigt und nicht erst am Ende, wenn der Projekt Go-Live kurz vor der Tür steht. 

Automatische Überprüfung durch die IDE: Das Plugin axe Accessibility Linter hat sich als das Plugin für Visual Studio Code etabliert. 

npm-Module: In unseren diva-e Projekten findet zudem eine direkte Integration der Barrierefreiheitschecks in der Projektumgebung mittels npm-Module statt – z. B. vue-axe für unsere vue-Projekte. Zudem erweitern wir unsere Linter-Anweisungen mittels eslint-plugin-vuejs-accessibility. 

Automatisierte Tests: Unsere CI/CD-Pipelines statten wir entsprechend mit cypress und cypress-axe Konfigurationen aus, welche bei jedem Build automatisch Barrierefreiheitschecks für den committeten Code durchführen. 

Für Kunden, die bereits eine fertige Onlinepräsenz haben, ist eine erste Auditierung der beste Ansatzpunkt. Durch ein umfassendes Audit können Schwachstellen identifiziert und dokumentiert werden. Diese Analyse gibt einen klaren Überblick darüber, welche Bereiche überarbeitet werden müssen, um den WCAG-Richtlinien zu entsprechen.
 

 diva-e bietet hierfür drei Audit-Varianten an. Von einer Überprüfung der wichtigsten Seite im Rahmen des Quick Audits über den „Advanced Audit“, welcher bis zu 25 Komponenten anhand der Testkriterien überprüft bis hin zum Enterprise Support, bei welchem wir das Thema Barrierefreiheit durch alle Ebenen hinweg steuern, betreuen und realisieren können.  

Eine der zentralen Leistungen der Auditierung ist die Überprüfung der Testkriterien, welche durch die Barrierefreie-Informationstechnik-Verordnung (kurz: BITV 2.0) festgelegt sind. Diese bestehen aus automatisierten und manuell durchgeführten Tests. Darüber hinaus wird jedem Audit eine Handlungsempfehlung für die nächsten Schritte an die Hand gegeben. Die Aufwand-Nutzen-Matrix hilft dann bei der konkreten Umsetzung durch klare Priorisierung der Implementierungsschritte, indem sie den notwendigen Aufwand für jede Maßnahme und dem zu erwartenden Nutzen für die Barrierefreiheit gegenüberstellt. So können Unternehmen sicherstellen, dass sie zuerst die Änderungen vornehmen, die den größten positiven Einfluss auf die Nutzererfahrung haben und gleichzeitig mit vertretbarem Aufwand umsetzbar sind. 

Auditierung: diva-e überprüft Ihren Onlineshop oder Website anhand aller notwendigen BITV-Testkriterien im Rahmen der Audit-Pakete: 

• Quick Audit 

• Advanced Audit 

• Enterprise Audit 
  
  

Beispiele für Aufwand-Nutzen-Matrix: Hoher Nutzen, geringer Aufwand: Anpassung der Farbkontraste 

Hoher Aufwand, geringer Nutzen: Visuelle Überarbeitungen ohne funktionale Verbesserung – z. B. die Entwicklung einer barrierefreien Drag-and-Drop-Funktion, welche auch mit alternativen Methoden / simplem input-tag realisiert werden kann und nativ einen hohen Barrierefreiheitsgrad hat. 

Nachdem der Audit die Potenziale und Notwendigkeiten identifiziert hat, gilt es im nächsten Schritt, die notwendigen Features und Anpassungen iterativ zu entwickeln. diva-e unterstützt Sie auf dieser Journey mit entsprechendem Planungs- und Umsetzungs-Know-How. Nachdem die Projektplanung abgeschlossen ist, realisieren wir für Sie im agilen Projektansatz Schritt für Schritt die aus dem Audit identifizierten Barrieren.  

Dabei legen wir Wert darauf, dass sich Ihr Unternehmen nachhaltig mit Barrierefreiheit auseinandersetzt und Expertise aufbaut, damit Sie die Awareness der BITV-Richtlinien auch bei der Planung neuer Features und Komponenten einbeziehen. 

Barrierefreiheit wirklich leben: Wir empfehlen jedem Projektteam den Punkt Barrierefreiheit in der DoR und der DoD fest zu verankern. 

Definition of Ready: „Die Akzeptanzkriterien sind konform nach WCAG 2.2.“ 

Definition of Done: „Die durchgeführten Änderungen sind anhand der BITV-Überprüfungsschritte erfolgreich getestet.“ 

Internes Know-how: Damit Barrieren gar nicht erst entstehen, muss Barrierefreiheit geschult und gelernt werden. Investieren Sie daher in den Know-how-Aufbau bei Ihrem eigenen Personal. Exzellente und kostenfreie Anlaufstellen sind hierfür die offizielle Dokumentation des W3Cs WCAG 2.2 und das diva-e Whitepaper zum Thema Barrierefreiheit im B2C E-Commerce. Gerne begleiten wir Sie auf diesem Weg. 

Wichtig: Barrierefreiheit in Enterprise Projekten ist eine fortlaufend zu überprüfende Aufgabe, welche nicht nach erfolgreicher Entwicklung endet. In der digitalen Wertschöpfungskette folgt eine Vielzahl von weitere nachgelagerten Prozessschritten, welche Barrierefreiheit ebenfalls berücksichtigen müssen. Dabei sei nur als Beispiel die redaktionelle Arbeit der Live-Website genannt. Genau hierfür greifen wir gerne auf die Lösung unseres Partners Crownpeak zurück. 

Um den Barrierefreiheitsgrad auch bei hoch komplexen Enterprise Architekturen und Plattformen zu gewährleisten, erfordert auch der Live-Betrieb eine Kombination aus kontinuierlicher Analyse und manuellen Audits. Dabei sorgt die kontinuierliche Analyse für eine solide Basis und zeigt zu jedem Zeitpunkt Probleme auf, die behoben werden müssen. Die manuellen Audits schließen dabei die Lücken, die sich nicht automatisiert identifizieren bzw. überprüfen lassen. 

Crownpeak supportet dabei mit seinem Digital Quality Management (DQM) in den Bereich der kontinuierlichen Analyse, bietet per API aber auch umfangreiche Möglichkeiten, Inhalte ad-hoc zu analysieren. Im Dashboard können per Crawler untersuchte Touchpoints analysiert werden. Dabei stehen aggregierte Daten über eine komplette Website, oder über mehrere Websites hinweg zur Verfügung. Diese lassen sich, je nach Bedarf, in entsprechenden Gruppen zusammenfassen – z.B. nach Standort, Marke oder vertikalem Markt. 

Zur Identifikation konkreter Probleme werden unter dem entsprechenden Prüfpunkt alle konkret betroffenen Seiten angezeigt und in der Live-Ansicht der jeweiligen Seite entsprechend hervorgehoben. Das macht es Redakteur:innen leichter, zu identifizieren, welche Faktoren auf einer Seite eine Anpassung benötigen. Zusätzlich bietet das Dashboard Informationen und Referenzen (bspw. auf die WCAG) zu jedem Prüfpunkt. 

Dabei wird DQM mit einer weitreichenden Bibliothek an Prüfpunkten aus den Bereichen Barrierefreiheit, SEO, Usability, Legal und mehr ausgeliefert, welche bei Bedarf durch Crownpeak aktualisiert werden (wie bspw. beim Release der WCAG Version 2.2). 

Diese können nach Belieben um weitere Prüfungen erweitert werden, wie z.B. das Vorhandensein spezieller, rechtlich erforderlicher Inhalte für Banken, Versicherungen, Energieversorger etc. 

Für Anforderungen der Barrierefreiheit steht ein dediziertes Dashboard zur Verfügung, welches die Prüfungsergebnisse aus Sicht der WCAG, ihrer Erfolgskriterien, Guidelines und Techniken beleuchtet. 

Weitere hilfreiche Tools wie Benchmarking Scores für diverse Metriken, eine Rechtschreibprüfung, eine Auflistung aller analysierter Assets (sowie ausgegebene E-Mail-Adressen oder redundante Page-Titles) oder ein Contrast-Checker runden den Funktionsumfang des Dashboards ab. 

Daneben stehen die von Crownpeak bereitgestellten, sowie die individuell konfigurierten Prüfpunkte auch per API zur Verfügung. Dies ist insbesondere im Kontext der Integration in ein verwendetes CMS interessant, da hiermit Probleme bereits identifiziert und behoben werden können, bevor sie auf den Live-Websites ankommen. 

Im Rahmen unseres CMS FirstSpirit können bspw. dadurch Probleme nicht nur als Bestandteil des redaktionellen Prozesses gefunden, sondern auch der Qualitätsstand einer Seite in den Workflows berücksichtigt werden, um zu verhindern, dass die Seite freigegeben wird, wenn mehr als X Probleme im Kontext der Barrierefreiheit identifiziert wurden. 

Neben den Out-of-the-Box verfügbaren Integrationen für Crownpeaks eigenes CMS FirstSpirit, Adobe Experience Manager und Sitecore, können unter Verwendung der zur Verfügung stehenden APIs natürlich auch für weitere CMS Integrationen bereitgestellt oder auch die aggregierten Analyseergebnisse in eigenen QA Dashboards integriert werden. 

Die Prüfung per API kommt darüber hinaus auch beim sogenannten PageChecker zum Einsatz – eine Browser-Erweiterung, welche die ad-hoc Analyse beliebiger Seiten unabhängig vom verwendeten CMS ermöglicht.  

Dies ist insbesondere dann hilfreich, wenn eine Integration in das CMS nicht wirtschaftlich wäre, bspw. bei Satelliten-Websites, die ein anderes CMS verwenden als der sonstige Auftritt, oder Landingpages, welche direkt aus anderen Marketing-Lösungen generiert werden. 

Natürlich gilt – wie bei den meisten Lösungen in einer digitalen Landschaft – auch bei der Barrierefreiheit nicht „one-size-fits-all“. Mag ein kostenloses Browser-Plugin bei einer Microsite vollkommen ausreichend sein, stößt man bei Enterprise Projekten schnell an Grenzen. Dementsprechend ist es wichtig, die passenden Lösungen und Ansätze für die eigene Strategie zur Erreichung einer barrierefreien Onlinepräsenz auszuwählen.  

Wichtig zu bedenken: Unternehmen und Services müssen immer individuell betrachtet werden, daher funktioniert nicht jeder Ansatz auf dieselbe Weise für unterschiedliche Organisationen. Im Folgenden werden wir die verschiedenen Ansätze auf ihre Stärken und Schwächen hin untersuchen. Individuelle Lösungen können in ihren Eigenschaften von dieser Betrachtung abweichen, die folgenden Ausführungen dienen primär dazu, einen Überblick über mögliche Ansätze und deren üblicherweise zu findenden Vor- und Nachteile zu geben. 

• Trainings: Die effizienteste Methode, um Barrieren zu beheben, ist sie gar nicht erst entstehen zu lassen. Dazu empfiehlt es sich, Mitarbeitende, die im Entstehungsprozess von Inhalten involviert sind, auf Faktoren der Barrierefreiheit zu sensibilisieren.  
  Dies bedeutet nicht, dass ein komplettes Unternehmen zu Barrierefreiheits-Expert:innen ausgebildet werden muss. Ein grundlegendes Verständnis für Aspekte die Barrieren darstellen können hilft allerdings dabei, das Entstehen von Problemen so früh wie möglich im Content Lifecycle zu verhindern. 
  
  

• Manuelle Audits: Für ein manuelle Audit analysieren Spezialist:innen die konkreten Inhalte eines Unternehmens, um Probleme in Bezug auf die Barrierefreiheit zu identifizieren.
  
  Vorteile manueller Audits sind, dass der komplette Umfang der WCAG geprüft werden kann. Dabei kann ein Audit von einer einfachen „Wasserstandsmeldung“ bis hin zur detaillierten Analyse reichen. Dabei ist jedoch auch zu bedenken, dass manuelle Audits immer nur eine Momentaufnahme eines Auszugs aller Inhalte darstellen und je nach Umfang und Frequenz natürlich mit entsprechenden Kosten verbunden sind. 
  
  

• Kontinuierliche Analyse: Durch Einsatz entsprechender Software-Lösungen werden Inhalte in regelmäßigen Zyklen auf Aspekte der Barrierefreiheit überprüft und die Ergebnisse den Redakteur:innen in Form eines Dashboards, zur Verfügung gestellt.  
  
  Klarer Vorteil ist dabei, dass die regelmäßigen Analysen nicht mit zusätzlichen Aufwänden (abgesehen von der Problembehebung) verbunden sind und die Auswertung einer kompletten oder sogar mehrerer digitaler Präsenzen ermöglicht.  
  
  Hier ist zu beachten, dass automatische Tests nicht alle Anforderungen der WCAG erfassen können. Nicht zuletzt fordert bspw. der Entwurf für die kommende Version 3 der WCAG ein Testing durch Menschen mit Behinderungen. 

• Barrierefreiheits-Overlays: Hierbei werden Websites mit einem Widget angereichert, welches den Nutzer:innen die Möglichkeit gibt, auf das Verhalten einer Website in Echtzeit Einfluss zu nehmen. So können z.B. Kontraste erhöht oder Animationen gestoppt werden. Zusätzlich bieten entsprechende Lösungen oftmals die Möglichkeit, fehlende Informationen wie Alt-Tags automatisch nachzupflegen. Der größte Vorteil dieses Ansatzes ist die niedrige Komplexität, die mit der Umsetzung einhergeht. 

  
  Achtung: Die Verwendung derartiger Lösungen kann auch diverse Nachteile mit sich bringen: So ist die Akzeptanz bei Menschen mit Behinderungen nicht besonders hoch, da diese zumeist entsprechende Lösungen im Einsatz haben und so keine Mehrwerte generiert werden. Zusätzlich können die gesteigerte Code-Komplexität die Nutzung eher erschweren und eine negative Auswirkung auf die Performance haben. Darüber hinaus bieten Overlays nur eingeschränkte Rechtssicherheit. 

  
  Die Webseite usable.net hat  in Ihrem Accessibility Lawsuit Tracker allein für April 2024 basierend auf dem ADA (American’s with Disabilities Act – das amerikanische Pendant zum EAA) 303 Klagen gegen Unternehmen registriert, von denen 76 Unternehmen ein Accessibility-Overlay verwendeten. 

• Kostenlose Tools: Zu guter Letzt gibt es noch eine große Bandbreite an kostenlosen Tools, welche die Überprüfung von Barrierefreiheits-Aspekten ermöglichen. Diese werden zumeist als Browser-Erweiterung bereitgestellt, mit der die aktuell betrachtete Seite analysiert werden kann.  

  
  Der größte Vorteil hierbei liegt auf der Hand: Die Verwendung entsprechender Tools ist kostenlos. Darüber hinaus können die entsprechenden Lösungen im Regelfall ohne weiteren Konfigurationsaufwand eingesetzt werden. 

  
  Allerdings haben diese Lösungen auch einige Schwächen. So ist es im Regelfall nur möglich, eine einzelne Seite zu untersuchen, sodass je nach Komplexität der Web-Präsenz, nur repräsentative Schlüsse gezogen werden können, ohne, dass jedes konkrete Problem aufgedeckt wird. Zusätzlich ist gewöhnlich nicht veränderbar, auf welche Situationen konkret geprüft wird. 

Wir hoffen, wir konnten Ihnen mit diesem Artikel die Relevanz von digitaler Barrierefreiheit näherbringen, und Ihnen unterschiedliche Wege aufzeigen, diese zu erreichen. Zusammenfassend sehen Sie in diesem Visual die verschiedenen Ansätze um zu evaluieren, welche Methodik Ihre individuellen Anforderungen am besten trifft. 

Gern beraten wir Sie auch persönlich zu unseren diva-e Accessibility Audits und Ihren individuellen Möglichkeiten, den uneingeschränkten Zugang zu Ihrer Plattform zu optimieren. 

Crownpeak ist ein führender Anbieter von Lösungen für das Management digitaler Erlebnisse, die Unternehmen in die Lage versetzen, nahtlose, personalisierte und gesetzeskonforme digitale Erlebnisse über alle Kanäle hinweg zu liefern. Mit einer umfangreichen Reihe von Tools, die Content Management, Digital Quality Management, Product Discovery und Privacy Compliance umfassen, stellt Crownpeak sicher, dass Marken wirkungsvolle, zugängliche und beständige digitale Interaktionen schaffen können.
 

Mehr über Crownpeak erfahren