Erklärung zur Barrierefreiheit

Durchführung von internen und externen Tests zur Barrierefreiheit.

Einsatz barrierearmer Designvorlagen und Plugins.

Schulung von Redakteur:innen zum barrierefreien Erstellen von Inhalten.

NVDA 2024.1 mit Chrome (aktuelle Version) unter Windows

VoiceOver auf macOS Sequoia 15.5 mit Safari 18.3.1

Stark (Chrome-Erweiterung)

WAVE (Web Accessibility Evaluation Tool für Chrome)

Silktide Accessibility Checker

Chrome DevTools (Inspektor)

VoiceOver unter macOS

NVDA 2024.1 unter Windows

Offizielle Website der WCAG 2.1 als Referenz für die Erfolgskriterien

Unzureichender Kontrast zwischen Text und Hintergrund

Kontrastverhältnis bei einigen Links, Formularfeldern sowie ergänzenden UI-Elementen (z. B. Tags oder Rabattkennzeichnungen) unter dem empfohlenen Mindestwert von 4,5:1

Kein optionaler Hochkontrastmodus vorhanden (geplant, aber noch nicht umgesetzt)

Fehlende Funktion zum Überspringen wiederholter Seitenelemente („Skip-Navigation“), um den direkten Zugang zum Hauptinhalt zu ermöglichen (Umsetzung in Arbeit)

Einige Texteingabefelder verwenden Schriftgrößen unterhalb der empfohlenen Mindestgröße von 14 px

Die Hauptinhaltsbereiche der Kategorieseiten, Suchergebnisseiten, Produktübersichtsseiten und Produktdetailseiten wurden bislang nicht vollständig mit Screenreadern getestet

Mögliche Probleme betreffen fehlende oder fehlerhafte ARIA-Labels, nicht beschriftete Schaltflächen, nicht angekündigte dynamische Inhalte oder unzureichend strukturierte Überschriften

In diesen Bereichen wurde bisher noch nicht vollständig geprüft, ob Screenreader den Fokus korrekt setzen und Inhalte zuverlässig ankündigen

Eine geplante Test- und Optimierungsphase soll diese Lücken schließen und die vollständige Kompatibilität mit unterstützenden Technologien sicherstellen

Bildergalerie-Slider: Die Sichtbarkeit des Fokus ist uneinheitlich; einige Bedienelemente sind nicht per Tastatur erreichbar; das Overlay schließt den Fokus ein und unterbricht die Tab-Reihenfolge

Fahrzeugauswahl-Overlay: Der Fokus wird beim Öffnen nicht in das Overlay verschoben, die Esc-Taste schließt es nicht; eine durchgehende Tastaturnavigation (Tab-Schleife) ist nicht vorhanden

Tab-Modul: Registerkarten sind nicht zuverlässig fokussierbar; die Navigation sowie die Rückführung des Fokus verhalten sich inkonsistent; Akkordeons sind nicht vollständig barrierefrei bedienbar

Bewertungs-Tab: Enthält überflüssige Tab-Stopps; das Fokusverhalten bei Filter-Popover- und „Mehr anzeigen“-Elementen ist inkonsistent

Unterer Produktslider: Die einzelnen Produktkkacheln sind nicht fokussierbar; der Fokus springt unerwartet; eine Navigation per Pfeiltasten sowie eine klar strukturierte Tab-Reihenfolge fehlen

Die Tab-Reihenfolge wurde überarbeitet und folgt nun einem logischen Ablauf

Nach dem Login wird der erste Fokus auf das Element beim ATP-Logo gesetzt

Die Links „Weitere Informationen“ und „Passwort vergessen“ sind jetzt in der erwarteten Tab-Reihenfolge erreichbar

Ein WCAG-konformer Fokusrahmen wurde auf alle interaktiven Elemente angewendet, um eine konsistente Tastaturnavigation zu gewährleisten

Seitenleisten-Navigation: Der Fokus wird nach einer Auswahl häufig zurückgesetzt oder verschwindet

Fokus im Inhaltsbereich: Der Fokus kehrt nicht automatisch zurück; es bestehen Lücken in der Tab-Reihenfolge, z. B. in Bereichen wie „Meine Fahrzeuge“ oder Formularen

Bearbeitungsmodi: Es fehlt eine klare Fokusführung und ein logischer Ausstiegspunkt (z. B. über „Abbrechen“ oder Esc-Taste)

Modale Fenster: Der Fokus verlässt den Dialog oder landet an einer falschen Stelle (z. B. im Lösch-Dialog)

Formularnavigation: Die Tab-Reihenfolge ist nicht logisch; manche Elemente haben keinen sichtbaren Fokus

Lieferung & Zahlung: Der Fokus springt oder wird zurückgesetzt, statt auf den gewählten Optionen zu bleiben

Navigation: Die Tab-Reihenfolge ist uneinheitlich, dekorative Elemente lassen sich irrtümlich mit der Tastatur ansteuern und Auswahlfelder wie Radiobuttons zeigen keinen sichtbaren Fokusrahmen

Modale Fenster: Der Fokus wird nicht zuverlässig gehalten; die Tasten Esc sowie Tab und Shift+Tab verhalten sich nicht wie erwartet

Formulare: Eingabefelder führen zu einem Neuladen der Seite; Schaltflächen zum Bearbeiten lassen sich nicht immer per Tastatur fokussieren

Bestätigungsseite: Bearbeitungsfunktionen fehlen in der Tab-Reihenfolge, während dekorative Inhalte unnötigerweise fokussiert werden

Suchleiste: Die Fokusreihenfolge zwischen Suchfeld, Vorschlagsliste sowie Löschen- und Absenden-Buttons wurde optimiert. Vorschläge können nun per Pfeiltasten durchlaufen und mit Enter ausgewählt werden. Das Verhalten der Dropdown-Liste ist dabei durchgängig nachvollziehbar.

Funktionselemente in der Kopfzeile / Utility-Menü (Konto, Merkzettel, Warenkorb): Alle Elemente im Utility-Menü sind nun per Tastatur erreichbar. Popover öffnen sich über Pfeiltasten, lassen sich mit Esc schließen und unterstützen eine flüssige Navigation mit Tab, Shift+Tab und Enter.

Hauptnavigation: Die Navigationsmenüs – einschließlich Dropdowns und verschachtelter Untermenüs – unterstützen jetzt vollständig die Tastaturbedienung. Die Pfeiltasten ermöglichen eine Navigation nach Ebenen, der Fokus kehrt zuverlässig zu übergeordneten Menüpunkten zurück.

Fahrzeugauswahl (Meine Garage & manuelle Eingabe): Für eingeloggte und nicht eingeloggte Nutzer wurde eine logische Tab-Reihenfolge umgesetzt. Modale Fenster verhalten sich wie erwartet, Formulare sind per Tastatur bedienbar und unterstützen Autofill sowie Fehlermeldungen mit korrekter Fokusführung.

Footer / Newsletter-Anmeldung: Das E-Mail-Feld und der „Abonnieren“-Button sind vollständig per Tastatur bedienbar. Das Fokusverhalten bleibt konsistent – unabhängig davon, ob das Eingabefeld korrekt ausgefüllt ist oder nicht.

Startseite & Footer: Slider, Banner und der YouTube-Bereich unterstützen nun vollständig die Tastaturnavigation. Dekorative Elemente wurden aus der Tab-Reihenfolge entfernt, um eine klare Fokusführung zu ermöglichen.

Kategorieseite: Navigationsbereiche und Produktslider folgen einer logischen Tab-Reihenfolge. „Mehr anzeigen/ausblenden“-Buttons sowie Produktkarten sind jetzt per Tastatur bedienbar.

Suchergebnisseite: Filter, produktbezogene Schaltflächen und Mengenauswahlfelder sind vollständig zugänglich. Overlays und das Warenkorb-Panel halten den Fokus korrekt innerhalb des Bereichs und unterstützen das erwartete Verhalten der Esc-Taste.

Produktdetailseite (PDP): Bewertungsbereiche, Akkordeons und seitliche Bedienelemente wie „Fahrzeug wählen“ sind jetzt tastaturfreundlich. Fokus-Schleifen und Tab-Reihenfolge wurden überarbeitet und bereinigt.

Text und Typografie: Die Textgrößen erfüllen die Anforderung, Inhalte bei einer Vergrößerung um bis zu 200 % lesbar darzustellen, ohne das Layout zu beeinträchtigen

• Fließtext unterschreitet nie eine Schriftgröße von 14 px
• Wichtige Inhalte wie Suchfelder, Beschriftungen, Produktdetails oder Lieferinformationen fallen nie unter 12 px
• Zukünftige Designanpassungen sehen eine Erhöhung der Grundschrift auf bis zu 16 px vor, um die Lesbarkeit weiter zu verbessern

Zielflächen: Interaktive Elemente entsprechen den Mindestanforderungen an die Zielflächengröße von 24 × 24 px, z. B. bei Checkboxen, Radiobuttons, Icons und Links

• Call-to-Action-Buttons auf Mobilgeräten unterschreiten jedoch stellenweise die empfohlene Mindesthöhe von 44 px

Behebung unzureichender Kontraste bei Buttons, Overlays und Formularelementen

Anpassung der Zielflächen auf mindestens 24 × 24 Pixel (Desktop) bzw. 40 Pixel (für mobile Call-to-Actions)

Umsetzung der „Skip Navigation“-Funktion zur Verbesserung des Tastaturflusses

Korrektur unvollständiger Formular-Barrierefreiheit (z. B. Schriftgröße, Beschriftung, Zielflächen)

Einführung barrierefrei bedienbarer Grundfunktionen wie Login, Merkliste und Warenkorb

Korrekturen auf der Produktdetailseite: Barrierefreiheit bei Bild-Slider, Tab-Modul, Bewertungs-Tab, Fahrzeugauswahl und Produktslider

Planung und Priorisierung der weiteren Entwicklungsphasen zur Barrierefreiheit

Vollständiges Screenreader-Kompatibilitätsaudit für Suchfunktion, Produktübersicht und Produktdetailseiten

Korrektur von ARIA-Labels, Überschriften und dynamischen Ausgaben für unterstützende Technologien

Behebung von Fokus- und Navigationsproblemen in modalen Fenstern, Overlays und Tab-Komponenten

Überarbeitung von Fokusverhalten und Tab-Reihenfolge auf Konto- und Checkout-Seiten

Einheitliche Anwendung sichtbarer Fokusstile über alle Komponenten hinweg

Integration von Barrierefreiheitsprüfungen in jeden Deployment-Zyklus

Laufende Dokumentation und Weiterentwicklung barrierefreier Designmuster im Gestaltungsprozess

Schrittweise Beseitigung verbleibender Barrieren bis zur vollständigen Barrierefreiheit