Die vier Prinzipien der Barrierefreiheit nach den WCAG in Gambio

Ab dem 28. Juni 2025 wird das Barrierefreiheitsstärkungsgesetz zur Pflicht, für jene, die die Mindestanforderungen erfüllen - ich berichtete bereits. Webseiten müssen dann bestimmte Kriterien erfüllen. Aktuell gibt es 4 Prinzipien der Barrierefreiheit nach dem WCAG-Standard.

Die vier Prinzipien der Barrierefreiheit nach den Web Content Accessibility Guidelines (WCAG) – in der aktuellen Version WCAG 2.2
(Stand: Oktober 2023)

1. Wahrnehmbar (Perceivable)
   Informationen und Bestandteile der Benutzeroberfläche müssen den Nutzern so präsentiert werden, dass sie sie wahrnehmen können.
   Beispiele: Alternativtexte für Bilder, Untertitel für Videos, ausreichender Farbkontrast.

2. Bedienbar (Operable)
   Benutzeroberflächen und Navigation müssen bedienbar sein.
   Beispiele: Die Website ist vollständig per Tastatur navigierbar, keine Inhalte blinken extrem schnell (Anfallsrisiko), Navigation ist konsistent.

3. Verständlich (Understandable)
   Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein.
   Beispiele: Klare Sprache, vorhersehbares Verhalten von Bedienelementen, Hilfestellungen bei der Eingabe von Formularen.

4. Robust (Robust)
   Inhalte müssen robust genug sein, um zuverlässig von einer Vielzahl von Benutzeragenten, einschließlich assistiver Technologien, interpretiert zu werden.
   Beispiele: Sauberer HTML-Code, semantisch korrektes Markup, Kompatibilität mit Screenreadern.

⇒ Diese vier Prinzipien bilden das Fundament für digitale Barrierefreiheit, und jede Erfolgskriterien der WCAG lässt sich einem dieser Prinzipien zuordnen.

Die Erfolgskriterien der Konformitätsstufe AA stellen in der Europäischen Union den Standard dar. Sie werden auch als Anforderungen an gute Zugänglichkeit bezeichnet. Um für Websites, Webanwendungen, Dokumente, Software und mobile Anwendungen die Konformitätsstufe AA zu erlangen, müssen alle Erfolgskriterien der Konformitätsstufen A und AA erfüllt sein. Im Folgenden zeige ich eine Liste aller 30 Erfolgskriterien der Stufe A sowie alle 50 Erfolgskriterien der Stufe AA.

 

Die Web Content Accessibility Guidelines (WCAG) 2.2, veröffentlicht im Oktober 2023, definieren die Anforderungen für barrierefreie digitale Inhalte. Um die Konformitätsstufe AA zu erreichen, müssen alle Erfolgskriterien der Stufen A und AA erfüllt sein. Insgesamt umfasst WCAG 2.2 55 Erfolgskriterien für die Stufen A und AA. (Quelle)

 

Im Folgenden noch tiefere Details zu den 4 Prinzipien, die auch das Zentrum der Erfolgskriterien darstellen:

1. Wahrnehmbar (Perceivable)

Grundsatz: Informationen und Benutzeroberflächen müssen so präsentiert werden, dass alle Nutzer sie wahrnehmen können – unabhängig von ihren Sinneseinschränkungen.

Konkret bedeutet das:

• Textalternativen für Bilder, Grafiken und Symbole (z. B. Alt-Texte bei Fotos).
• Untertitel und Transkripte für Videos oder Audioinhalte.
• Visuelle Inhalte sollen auch hörbar oder spürbar sein (z. B. mit Screenreadern kompatibel).
• Kontrastreiche Gestaltung für Menschen mit Sehbehinderung.
• Responsive Design: Inhalte passen sich verschiedenen Bildschirmgrößen an.

⚠ Häufige Barrieren:

• Fehlende Alternativtexte bei Bildern.
• Videos ohne Untertitel oder Audiodeskription.
• Schlechte Farbkontraste (z. B. hellgrauer Text auf weißem Hintergrund).
• Visuelle Hinweise ohne ergänzenden Text ("Klicken Sie auf den roten Knopf").

2. Bedienbar (Operable)

Grundsatz: Die Navigation und Interaktion mit der Benutzeroberfläche muss für alle nutzbar sein – auch ohne Maus, z. B. nur mit Tastatur oder Sprachsteuerung.

Konkret bedeutet das:

• Alle Funktionen müssen per Tastatur bedienbar sein.
• Klare Fokusreihenfolge: Der Cursor springt logisch von einem Element zum nächsten.
• Gute Sichtbarkeit des Tastaturfokus (z. B. durch Umrandung).
• Vermeidung von Zeitdruck oder Bereitstellung von Verlängerungsmöglichkeiten.
• Vermeidung von blitzenden Inhalten (epileptische Anfälle).
• Navigation: Leicht auffindbare Menüs, konsistente Struktur.

⚠ Häufige Barrieren:

• Menüs oder Schaltflächen, die mit der Tastatur nicht erreichbar sind.
• Keine Möglichkeit, Inhalte zu pausieren oder zu stoppen (z. B. automatisch abspielende Slider).
• Keine logische Reihenfolge beim Tabben durch die Seite.

3. Verständlich (Understandable)

Grundsatz: Inhalte und Funktionen müssen verständlich und vorhersehbar sein – nicht nur sprachlich, sondern auch im Verhalten der Benutzeroberfläche.

Konkret bedeutet das:

• Einfache, klare Sprache verwenden (keine Fachausdrücke ohne Erklärung).
• Vorhersehbare Bedienung: Ein Button führt immer zu einem ähnlichen Ergebnis.
• Erklärende Beschriftungen bei Formularfeldern.
• Fehlermeldungen, die klar erklären, was falsch ist – und wie man es beheben kann.
• Konsistente Navigation auf allen Seiten.

⚠ Häufige Barrieren:

• Unerwartete Änderungen bei Klicks (z. B. Formular absenden wechselt plötzlich die Seite).
• Fehlende Beschriftungen bei Eingabefeldern („Was soll ich hier eintragen?“).
• Sprache der Seite ist nicht korrekt definiert (wichtig für Screenreader).

4. Robust

Grundsatz: Inhalte müssen robust genug sein, damit sie zuverlässig von verschiedensten Geräten, Browsern und assistiven Technologien interpretiert werden können.

Konkret bedeutet das:

• Sauberes HTML mit semantischen Elementen (z. B. <nav>, <main>, <button> statt nur <div>).
• ARIA-Rollen und -Attribute korrekt verwenden.
• Kompatibilität mit Screenreadern und anderen Hilfsmitteln.
• Fehlerfreier Code (keine doppelten IDs, falsch geschachtelte Tags etc.).

⚠ Häufige Barrieren:

• „Aufgemotzte“ JavaScript-Lösungen, die Hilfstechnologien nicht verstehen.
• Nutzung von Elementen ohne semantische Bedeutung (z. B. rein dekorative <div>-Elemente als Buttons).
• Fehlende Beschreibungen für dynamische Inhalte (z. B. Statusmeldungen nach dem Absenden eines Formulars).

Barrierefreiheit in Gambio GX4

Da es aktuell vermehrt Kundenanfragen gibt, im Folgenden eine Aussage vom Gambio-Support:

Wir haben die Vorraussetzungen für die Barrierefreiheit in der Shopversion GX 4.9.5 umgesetzt. In dieser Version sind auch Änderungen für die bessere Barrierefreiheit enthalten, welche aufgrund des "Barrierefreiheitsstärkungsgesetzs" zum 28.6.2025 in Kraft treten müssen. Dies betrifft auch den gesamten Online-Handel.

Wir haben daher verschiedene Vorgaben für die Darstellung in den Themes Honeygrid und Malibu umgesetzt, so dass es durch das Update zu einzelnen Änderungen an vorhandenen Themes kommen kann. 

Wir empfehlen also ein Update des Shops, um die technischen Vorraussetzungen für die Barrierefreiheit zu erhalten. Die Themes Honeygrid und Malibu erfüllen alle Vorraussetzungen. Wenn es darüber individuelle Anpassungen im Theme gibt, kann es sein, dass diese nachjustiert werden müssen.

Fazit

Die vier Prinzipien helfen, digitale Inhalte menschenfreundlich, gerecht und gesetzeskonform zu gestalten. Und nicht nur das: Barrierefreiheit ist kein Mehraufwand – sie ist gute Benutzerführung für alle, auch für ältere Menschen, Smartphone-Nutzer und gestresste Besucher mit kurzer Aufmerksamkeitsspanne. Gleichzeitig fördert es die Suchmaschinenoptimierung, da klar strukturierte Seiten mit sauberem Code besser ranken.

Mein Angebot: