Barrierefreie Umsetzung in Projekten

Die Vorteile einer barrierefreien Umsetzung von Webprojekten sind vielfältig. Sie ermöglicht nicht nur die Teilhabe aller Menschen, sondern verbessert generell die Nutzererfahrung, steigert die SEO-Performance und führt zu einer höheren Codequalität.

Rechtliche Rahmenbedingungen

Das Web-Zugänglichkeits-Gesetz (WZG) schreibt den barrierefreien Zugang zu Websites und mobilen Anwendungen vor und ist seit 2018 in Kraft:

• betrifft alle vom Bund bzw. Länder finanzierten bzw. beaufsichtigten Websites & Apps ​ Das Barrierefreiheitsgesetz (BaFG) tritt am 28.6.2025 in Kraft und gilt für digitale Produkte und Dienstleistungen.
• Gilt für österreichische Unternehmen ab 10 Mitarbeitenden und/oder 2 Millionen Euro Jahresumsatz Folgende Kriterien müssen erfüllt sein:
• WCAG 2.1
• Konformitätsstufe AA
• Barrierefreiheitserklärung

Die vier Grundprinzipien von Barrierefreiheit nach WCAG

Die vier Prinzipien der Barrierefreiheit sind Wahrnehmbarkeit, Nutzbarkeit, Verständlichkeit und Robustheit. Diese vier Prinzipien werden in den Projekten der WKO in jeder Phase gezielt berücksichtigt und integriert. So wird sichergestellt, dass Barrierefreiheit von Anfang an mitgedacht und in allen Bereichen konsequent umgesetzt wird.

Design

Im UI-Design trägt die Einhaltung der Regeln guter Benutzerführung zur Gewährleistung der Barrierefreiheit bei, insbesondere die Beachtung klarer und intuitiver Interaktionen durch die Verwendung konsistenter UI-Komponenten. Grundlage für die Zugänglichkeit von Inhalten ist die korrekte Verwendung von Schriften und Farben.

Lesbarkeit
Eine gute Lesbarkeit ist die Grundlage für ein schnelles und einfaches Erfassen der Inhalte. Um die Lesbarkeit zu gewährleisten, werden bei der Gestaltung folgende Kriterien berücksichtigt:

• Verwendung von gut lesbaren Schriften (keine verspielten Schriften)
• ausreichende Schriftgröße (mindestens 16 px)
• und ein hoher Kontrast zum Hintergrund

Kontrast
Das Kontrastverhältnis hängt von der Schriftgröße ab:

• Text kleiner oder gleich 17 pt: 4,5:1
• Text größer oder gleich 18 pt und fetter Text größer oder gleich 14 pt: 3:1 Grafische Elemente haben ein Kontrastverhältnis zum Hintergrund von 3:1.
  Tools zur Überprüfung:

WebAIM Contrast Checker
Adobe Color

Unterscheidbare Farben
Verwendung von Farben, die auch bei eingeschränkter Farbwahrnehmung unterscheidbar sind. Tool zur Überprüfung:

Coblis — Color Blindness Simulator

Webentwicklung

Die Eckpunkte für barrierefreie Webentwicklung aus technischer Sicht werden strategisch verfolgt. Zusammenfassend sind folgende Punkte für die barrierefreie Webentwicklung zu nennen:

• Tastaturbedienbarkeit
• Vorlesemöglichkeit für Screenreader
• flexible und skalierbare Layouts (problemlos bis zu 200 % vergrößerbar)
• alternative Inhalte (für Medieninhalte wie Videos und Bilder werden Textalternativen bereitgestellt)
• ARIA-Rollen und Attribute
• semantische HTML-Elemente zur Strukturierung von Inhalten

Testtools Frontend Development:
WebAIM WAVE
axe DevTools
Siteimprove Accessibility Checker
Accessibility Insights
Web Developer Toolbar
w3c Markup Checker
Google Lighthouse

Content

Wesentliche Anforderungen der Barrierefreiheit werden von der Webredaktion erfüllt, wie z.B. die Strukturierung und Formatierung der Inhalte, die Verständlichkeit der Texte und die Bereitstellung von Textalternativen bei Medieninhalten.

Testtools für die Lesbarkeit von Text:
Die Lesbarkeit wird mit Hilfe von Testgruppen und verschiedenen Tools überprüft.

LIX (Lesbarkeitsindex)
Flesch-Index (Flesch Reading Ease)

Struktur, Aufbau und Formatierung:
Im CMS werden alle Möglichkeiten genutzt, um Inhalte korrekt zu formatieren und entsprechend auszuzeichnen.

• optische und semantische Formatierung im CMS über den Editor (z.B. Überschriftenhierarchien (<h1> bis <h6>))
• sinnvolle Gliederung von Absätzen (1 Absatz = 1 Sinneinheit)
• korrekte Formatierung von Listen (“ordered” und “unordered”)
• Formatierung von Tabellen
• semantisch schlüssiger Aufbau von Formularen
• Kennzeichnung von Zitaten mit der CMS-Funktion
• Kennzeichnung von Links mit Funktion durch Attribute, z.B. “tel” für Telefonnummern, “mailto” für E-Mail-Adressen
• Links auf Dateien mit Kennzeichnung des Dateityps (z.B. PDF)
• gemeinsamer Link bei Text-Bild-Links
• Bildlinks mit Link auch in der Bildbeschreibung (wenn kein Linktext vorhanden)
• gleiche Linktexte mit unterschiedlichen Linkzielen vermeiden

Dokumente (z.B. PDF)

Auch Dokumente wie PDFs sollen barrierefrei zur Verfügung gestellt werden. Um barrierefreie Dokumente zu erstellen, werden folgende Maßnahmen ergriffen:

• Optimierung der Datei (Word oder InDesign), aus der das PDF erstellt wird.
• Bearbeitung des PDF mit spezieller Software

Multimedia-Inhalte

Alle Elemente, die keinen Text enthalten, wie Bilder und Videos, werden mit Textalternativen versehen. Eine Liste weiterer Punkte, die für die korrekte Erfassung von Inhalten zu beachten sind:

• Dekorative Elemente wie Icons werden als dekorative Elemente/Artefakte gekennzeichnet (nicht redaktionell).
• Inhalte von Informationsgrafiken werden im Fließtext und eine Kurzzusammenfassung im Alternativtext dargestellt.
• Karten sind i.d.R. nicht barrierefrei, Alternativtexte werden soweit möglich bereitgestellt und ein entsprechender Hinweis in der Barrierefreiheitsdeklaration aufgenommen.
• Audioaufnahmen sind manuell steuerbar (z.B. Geschwindigkeit verringern) und mit Textalternativen versehen (z.B. Transkript).
• Videos sind steuerbar und enthalten Untertitel und Audiodeskription.
• Ausgenommen von dieser Regelung sind zeitbasierte Medien, die vor dem 23. September 2020 veröffentlicht und live übertragen werden.

Teststrategien und Testtools

Regelmäßige Schulungen und eine Kombination aus automatisierten und manuellen Testverfahren werden eingesetzt, um die Einhaltung der Zugänglichkeitsstandards zu gewährleisten. Die Tests werden mit gängigen Desktop-Browsern, Browser-Entwicklungswerkzeugen, mobilen Geräten (iOS + Android) und Browser-Stacks durchgeführt. Folgende Tools werden zusätzlich zu den bereits genannten eingesetzt:

Design
Im UI-Design wird ein Plugin in Figma verwendet, um Farbkontraste zu überprüfen: Stark Plugin für Figma

Dokumente
Erstellung barrierefreier Dokumente: axes

Prüfung der Barrierefreiheit von PDF-Dateien: PDF Accessibility Checker

Manuelle Tests
Die Lesbarkeit der Texte wird mit Hilfe von Screenreadern überprüft: NVDA

Chrome Plugin: Read aloud