Die Deadline an digitale Zugänglichkeit rückt immer näher. Das Barrierefreiheitsstärkungsgesetz tritt ab dem 28.06.2025 in Deutschland in Kraft. Doch was bedeutet das konkret in der Umsetzung für qnips als Unternehmen, und welche Verantwortung tragen Sie als unsere Kund:innen? 

In unserem letzten Blogbeitrag haben wir die Grundlagen der neuen Richtlinie beleuchtet. Heute zeigen wir, wie wir bei qnips, und wie Sie als unsere Kund:innen aktiv Barrierefreiheit umsetzen können.  

Zugänglichkeit beginnt bei uns: So arbeitet qnips barrierefrei

Bei qnips verstehen wir Barrierefreiheit nicht als zusätzliche Funktion, sondern als festen Bestandteil unserer Produktentwicklung. Schon frühzeitig haben wir begonnen, die Kriterien für Zugänglichkeit systematisch in unsere Plattformen zu integrieren. Welche Richtlinien des neuen Gesetzes in qnips Verantwortung liegen, erfahren Sie hier: 

Die vier Prinzipien der digitalen Barrierefreiheit:

Wahrnehmbarkeit: Digitale Inhalte müssen für alle Sinnesarten wahrnehmbar sein – egal ob man sehen, hören oder andere Sinne nutzen kann. 

Bedienbarkeit: Alle Funktionen einer Website oder App müssen bedienbar sein – auch ohne Maus oder bei motorischen Einschränkungen. 

Verständlichkeit: Die Inhalte und die Bedienung müssen für alle Nutzergruppen verständlich sein – auch bei kognitiven Einschränkungen oder geringer Sprachkompetenz. 

Robustheit: Bezeichnet im Kontext der Barrierefreiheit die Fähigkeit von Inhalten, zuverlässig von verschiedenen Benutzeragenten (z. B. Browsern oder Hilfstechnologien) interpretiert zu werden – auch wenn sich Technologien weiterentwickeln. 

Folgende Punkte zählen unter die Wahrnehmbarkeit in der Verantwortung von qnips: 

• Notwendige Anweisungen dürfen nicht ausschließlich per sensorischen Fähigkeiten bedienbar sein (1.3.3)
  
  Beispiel: Anweisungen wie „Klicken Sie auf den roten Button“ sind problematisch, da sie sich nur auf Farbe beziehen. Barrierefrei wäre: „Klicken Sie auf den roten Button mit der Aufschrift ‚,Weiter‘.“ 

• Der Sinn und die Anforderung jedes Eingabefeldes kann durch eine Assistenz-Software mittels Programmcode bestimmt werden (1.3.5)  
• Videos die länger als 3 Sekunden sind, müssen pausier bar sein und die Lautstärke unabhängig von der systemeigenen Lautstärke einstellbar sein (1.4.2)
• Die Größe des Textes kann bei Bedarf bis zu 200% vergrößert werden, ohne die Funktion einzuschränken (1.4.4) 
• Texte passen so in das Display ein, dass ein Scrollen in maximal eine Richtung erforderlich ist (1.4.10) 
• Texte oder Buchstaben dürfen weder in Inhalt noch Funktion eingeschränkt werden, wenn bestimmte Text-Parameter wie z.B. Zeilenabstand per Programmcode geändert würden (1.4.12)
  
  Beispiel: Ein Nutzer ändert in seinem Browser den Zeilen- und Absatzabstand, um Inhalte besser lesen zu können. Die qnips-Seite passt sich problemlos an: Texte bleiben vollständig sichtbar, Funktionen wie „Bestellen“ oder „Gericht merken“ funktionieren weiterhin. Inhalte überlappen nicht, und nichts wird abgeschnitten – so erfüllt qnips die Anforderungen an flexible, barrierefreie Textdarstellung. 
  
  
•  „Mouse-Over“-Inhalte bleiben sichtbar solange der Mauszeiger darüber schwebt und sind manuell schließbar (1.4.13) 

Unter die Bedienbarkeit fallen folgende Richtlinien: 

• Alle Funktionen einer Website oder App müssen vollständig mit der Tastatur bedienbar sein – auch ohne Maus oder Touch-Gesten (2.1.1) 
• Wenn der Tastaturfokus per Tastatur an eine bestimmte Stelle bewegt werden kann, muss der Fokus auf die gleiche Weise auch wieder zurückbewegt werden können (2.1.2) 
• Software-eigene Befehle per Tastenkombinationen müssen deaktivierbar oder anpassbar sein (2.1.4) 
• Zu zeitlichen Begrenzungen wie z.B.  Countdowns gibt es Vorwarnungen und die Möglichkeit zur Verlängerung, außer diese zeitlichen Begrenzungen sind an unabänderliche oder fremdbestimmte Ereignisse gekoppelt (2.2.1) 
• Automatische Bewegende,Blinkende und Scrollende Elemente müssen pausierbar oder ausschaltbar sein (2.2.2)
• Sich wiederholende Inhalte müssen umgehbar sein (2.4.1) 
• Websites haben einen Titel, der das Thema und/oder Inhalt beschreibt (2.4.2) 
• Elemente der Website sollen in der gleichen Reihenfolge anzusteuern sein, wie sie auch visuell und inhaltlich auf der Seite angeordnet sind (2.4.3) 
• Der Text eines Links muss den Zweck des Links eindeutig beschreiben (2.4.4) 
• Unterseiten einer Website müssen unabhängig von der Startseite anzusteuern sein (2.4.5) 
  
  Beispiel: Im qnips Catering Portal kann man jede Unterseite – zum Beispiel den Speiseplan, die Bestellübersicht oder die Allergiehinweise – direkt aufrufen, ohne erst über die Startseite zu gehen. Das hilft besonders Menschen, die Lesehilfen oder Sprachsteuerung nutzen, weil sie gezielt dorthin springen können, wo sie hinwollen. 

• Wenn man mit der Tastatur durch eine Website geht, muss immer gut erkennbar sein, welches Element gerade aktiv ist – zum Beispiel durch eine sichtbare Umrandung. Menschen mit Screenreader müssen den Fokus ebenfalls hören können. Aktionen sollen auch per Tastatur oder Sprache möglich sein – also ohne Maus (2.4.7) 
• Der Nutzer soll Information über derzeitiges Befinden der Website erhalten (z.B. das Befinden auf Start- oder Unterseiten) (2.4.8) 
• Alle Funktionen, die normalerweise mehrere Finger oder eine bestimmte Bewegung brauchen, sollen auch mit einem einzelnen Finger und ohne komplizierte Gesten nutzbar sein – außer wenn genau diese Geste unbedingt nötig ist (2.5.1) 
• Ein „Löschen“-Button sollte nicht sofort beim Draufklicken reagieren, sondern erst beim Loslassen – so kann man noch abbrechen, falls man sich vertippt hat (2.5.2) 
•  Der Textinhalt eines einzelnen Textes oder auch eines Textes in Bildern muss auch im Programmcode hinterlegt sein (2.5.3) 
• Wenn die Bedienung ein Bewegen des Geräts erfordert (z. B. schütteln oder kippen), soll es auch eine andere Möglichkeit geben, es über Schaltflächen oder Menüs zu bedienen – außer die Bewegung ist nötig oder gerade für Barrierefreiheit gedacht (2.5.4) 

In qnips Händen liegen folgende Punkte der Verständlichkeit:  

• Im Programmcode ist gekennzeichnet in welcher Sprache der Inhalt geschrieben ist – zum Beispiel, ob es Deutsch, Englisch oder eine andere Sprache ist (3.1.1) 
• Wenn in einem Text die Sprache wechselt – zum Beispiel von Deutsch zu Englisch – soll die Software das erkennen können, damit z. B. Screenreader richtig vorlesen. Ausnahmen sind Eigennamen, Fachbegriffe oder spezieller Jargon (3.1.2)  
• Wenn man den Fokus mit der Tastatur oder Maus auf z.B. ein Dropdown steuert, muss dieses über bspw. “Escape” einfach zu verlassen sein und dem Nutzer so ermöglichen den Fokus zum nächsten Element bewegen zu können. Damit wird verhindert, dass der Tastaturfokus in solchen Elementen festhängt (3.2.1) 
• Wenn sich Elemente durch Eingaben des Nutzers ändern, muss der Nutzer vorher darüber informiert werden, was und inwiefern sich etwas ändert (3.2.2) 
• Wichtig ist, dass die Menüführung auf jeder Seite immer gleich aussieht und immer am gleichen Platz zu finden ist. So können alle Besucher sich besser zurechtfinden (3.2.3) 
  
  Beispiel: Stellen Sie sich vor, Sie haben keine Sehkraft und Sie besuchen eine Website und finden das Menü oben rechts. Sie klicken sich durch verschiedene Seiten – doch plötzlich ist das Menü verschwunden oder an einem anderen Ort. Sie müssen neu suchen und verlieren die Orientierung. Damit genau das nicht passiert, ist eine einheitliche Menüführung entscheidend: Wenn das Menü auf jeder Seite gleich aussieht und immer am gleichen Platz bleibt, finden Sie sich leichter zurecht und können die Website stressfrei nutzen.  

• Wenn ein Element auf einer Website die gleiche Aufgabe hat (z. B. ein Button zum Absenden), muss es immer gleich aussehen und gleich funktionieren. Das hilft allen, sich besser zurechtzufinden (3.2.4) 
• Wenn jemand ein Formular falsch ausfüllt, soll die Website genau sagen, wo der Fehler ist und was falsch war – und zwar in klar lesbarem Text (3.3.1) 

Beispiel: Eine Mitarbeiterin möchte über das qnips Catering Portal ein Mittagessen vorbestellen. Im Formular gibt sie ihren Namen und das gewünschte Gericht korrekt ein, vergisst aber, ihre E-Mail-Adresse anzugeben – ein Pflichtfeld für die Bestellbestätigung. Nach dem Absenden des Formulars erhält sie folgende Rückmeldung direkt unter dem entsprechenden Feld: 

Fehler: Bitte geben Sie eine gültige E-Mail-Adresse ein. Beispiel: marie.mustermann@example.com 

Das E-Mail-Feld ist zusätzlich deutlich mit einer roten Umrandung versehen, sodass der Fehler auch visuell sofort erkennbar ist. Das Formular setzt den Tastaturfokus automatisch auf das fehlerhafte Eingabefeld. Außerdem ist die Fehlermeldung so eingebunden, dass sie von Screenreadern vorgelesen wird. 

• Wenn Nutzer etwas eingeben sollen, wie z. B. Name oder E-Mail, müssen die Felder klar beschriftet sein oder eine kurze Anleitung geben, was erwartet wird (3.3.2)  
• Wenn ein Fehler erkannt wird und klar ist, wie man ihn verbessern kann, soll die Website den Nutzer dabei unterstützen – zum Beispiel mit einem Hinweis. Es sei denn, dies würde sensible Daten sichtbar machen, die mehrere Leute an z.B. einem in der Öffentlichkeit nutzbaren Display einsehen könnten (3.3.3) 
• Bei wichtigen Dateneingaben wie bei Käufen oder Verträgen muss der Nutzer Fehler korrigieren und/oder seine Eingaben vor dem Absenden gesammelt einsehen und/oder versendete Daten stornieren können (3.3.4) 

Unter die Robustheit fallen folgende Richtlinien: 

• Im Programmcode haben Elemente komplette Start- und End-Tags, sind Elemente entsprechend ihrer Spezifikationen verschachtelt, enthalten Elemente keine doppelten Attribute und alle IDs sind einzigartig, außer wenn die Spezifikationen diese Eigenschaften erlauben (4.1.1) 
•  Bedienelemente müssen für assistierende Software verständlich sein. Deshalb im Programmcode muss für jedes Element Name, Rolle, Zustand und Änderungen erkennbar sein (4.1.2) 

Beispiel: Damit Menschen mit Hilfsprogrammen wie Screenreadern qnips gut nutzen können, sagt    der Code zu jedem Knopf oder Auswahlfeld genau, was es ist, wie es heißt und ob es gerade aktiviert ist. Zum Beispiel hört man beim Button „Jetzt bestellen“, dass es ein Button ist und ob die Bestellung angekommen ist. So wissen alle Nutzer*innen genau, was auf der Seite passiert. 

• Statusmeldungen zu Elementen müssen für assistierende Software erkennbar sein, ohne dass sie vom Nutzer aktiv angesteuert wurden (4.1.3) 

Folgendes liegt in der Verantwortung von unseren Kund:innen:

qnips trägt die technische Grundlage für eine barrierefreie Zugänglichkeit. Unsere Kund:innen sind ebenfalls eigenständig für eine barrierefreie Nutzung verantwortlich. Sie müssen in ihren täglichen Aufgaben/Arbeitsalltag Aspekte der Barrierefreiheit berücksichtigen und integrieren.

Dazu finden Sie hier eine Checkliste, in der Sie alle Punkte auf einen Blick sehen, die in Ihrer Verantwortung für eine barrierefreie Umsetzung liegen:

Unter die Wahrnehmbarkeit zählen folgende Aspekte: 

• Alt Texte müssen für Bilder hinterlegt werden, die der Kunde selbst pflegt über die Content Beschreibung (1.1.1) 
• Videos müssen entweder einen Untertitel oder eine Textalternative enthalten. Das heißt: Entweder ein Video mit eingebetteten oder zuschaltbaren Untertiteln bereitstellen oder – wenn kein Video nötig ist – den gleichen Inhalt in Textform anbieten, der von Screenreadern vorgelesen werden kann (1.2.1 bis 1.2.5) 
• Videos mit Ton brauchen Untertitel, außer das Audio ist bereits eine barrierefreie Alternative zu Text (1.2.2) 

• Als Alternative für Audio- und Videomedien gibt es Dokumente oder Audiodeskription (1.2.3)
• Aufgezeichnete Videos bieten Audiodiskreption an (1.2.5) 
• Informationen dürfen nicht allein durch Farbe vermittelt werden. Es bedarf mindestens eines erklärenden Textes.  (Z.B. ein Ampelsystem) (1.4.1) 
• Für Bilder, die Text enthalten muss das Kontrastverhältnis mindestens 4,5:1 betragen. Ein niedrigeres Verhältnis von 3:1 ist nur dann erlaubt, wenn der Text mindestens 18pt groß oder 14pt fett ist. Reine Dekorationsbilder- und Texte oder auch Logos sind von dieser Regelung ausgeschlossen (1.4.3) 
• Es sollte besser lesbarer, echter Text statt eingebetteten Text in Bildern verwendet werden – außer es geht nicht anders (1.4.5) 
• Wichtige visuelle Elemente wie Zustandsanzeigen oder Teile von Grafiken müssen deutlich erkennbar sein und mindestens ein Farbkontrastverhältnis von 3:1 zu ihrer Umgebung haben – außer sie sind inaktiv, vom Nutzer nachträglich eingefärbt oder unbedingt in dieser Farbigkeit zu nutzen (1.4.11) 

Außerdem sollten Sie folgende Aspekte der Bedienbarkeit berücksichtigen: 

• Visuelle Effekte, die schnell blinken oder intensive Farbwechsel enthalten, müssen so gestaltet sein, dass sie nicht mehr als drei Blinken pro Sekunde aufweisen und keine starken Kontrastblitze enthalten. Andernfalls sind Anpassungen oder Alternativen nötig, um das Risiko photosensitiver Anfälle zu vermeiden (2.3.1) 
• Jede Überschrift muss das Thema des folgenden Abschnitts deutlich benennen. Jede Beschriftung an Buttons oder Eingabefeldern muss eindeutig sagen, was passiert bzw. eingegeben wird. So finden alle Nutzer*innen schneller, was sie suchen, und können interaktive Elemente richtig nutzen (2.4.6) 

Hilfreiche Tools, die bei einer barrierefreien Plattform unterstützen

Unternehmen, die eine barrierefreie Website umsetzen möchten, können auf verschiedene hilfreiche Tools zurückgreifen: Mit Screenreadern wie NVDA, VoiceOver oder TalkBack lässt sich testen, ob Inhalte für sehbehinderte Nutzer gut zugänglich sind. Browser-Erweiterungen wie axe DevTools, Lighthouse oder “Accessibility Insights” prüfen automatisiert WCAG-Konformität und machen auf fehlende Alt-Texte, fehlerhafte ARIA-Attribute oder mangelhafte Fokusführung aufmerksam. Farbkontrast-Checker (z. B. Contrast Checker von WebAIM oder das “Colour Contrast Analyser”-Tool) stellen sicher, dass Texte und grafische Elemente ausreichend lesbar sind. Entwickler können zusätzlich CI-Integrationstools wie Pa11y oder axe-core in ihre Build-Prozesse einbinden, um kontinuierlich automatische Tests durchlaufen zu lassen. Für das Design bieten Plugins in Figma oder Adobe XD (etwa “Able” oder “Stark”) schon in der Entwurfsphase Kontrast- und Farbsehschwäche-Simulation, und barrierefreie Komponentenbibliotheken wie Material UI oder Reach UI sorgen dafür, dass gängige Widgets (Buttons, Formulare, Modals) von Haus aus zugänglich sind. 

Unser Ziel: Digitale Teilhabe für alle

Barrierefreiheit ist mehr als eine gesetzliche Verpflichtung – sie ist ein Ausdruck von Respekt und Zukunftsfähigkeit. Es fordert – und es fördert: Innovation, Nutzerzentrierung und soziale Verantwortung. Wir bei qnips stehen bereit, diesen Weg gemeinsam mit unseren Kunden zu gehen – durch Beratung, technologische Lösungen und partnerschaftliche Zusammenarbeit.