Zertifikatsbericht für Simply Good

Webseiten Betreiber: Delikatessa Lebensmittel-Handels- und Erzeugungs- Gesellschaft m.b.H.
Webseiten Domain: www.simplygood.at
Zertifikat Status: Bronze
Zertifizierungsdatum: 14.12.2023

Allgemeiner Kommentar der Zertifizierungsstelle:

Ganz allgemein weist die Website schon eine relativ gute Barrierefreiheit auf. Es sind jedoch noch Abweichungen zur WCAG vorhanden. Die Website wurde 2023 einem neuerlichen Audit unterzogen und nach WCAG 2.1-AA re-zertifiziert. Es kann die aktuelle Auszeichnung WACA in Bronze beibehalten bleiben. Bei diesen Kriterien der WCAG 2.1-AA sind noch Abweichungen vorhanden:

T1 Startseite:

• 2.5.3 Label in Name
  Bronze: Bei der Suche ist die sichtbare Beschriftung „Suchbegriff hier eingeben“. Gibt man etwas ein, dann verschwindet diese Beschriftung und es ist nur der eingegebene Text sichtbar. Der sichtbare Text ist dann nicht im accessible Name vorhanden.
• 4.1.3 Status Meldungen
  Bronze: Die Fehlermeldung bei der Suche ist nicht mit role="alert" oder aria-live="assertive" ausgezeichnet.

T7 Kontakt:

• 1.4.11 Non-Text Contrast
  Bronze: Die Umrandung der Eingabefelder hat einen Kontrast von 2,4:1. Der Kontrast sollte min. 3:1 sein.

T8 Suche:

• 2.5.3 Label in Name
  Bronze; Bei der Suche ist die sichtbare Beschriftung „Suchbegriff hier eingeben“. Gibt man etwas ein, dann verschwindet diese Beschriftung und es ist nur der eingegebene Text sichtbar. Der sichtbare Text ist dann nicht im accessible Name vorhanden.
• 4.1.3 Status Messages
  Bronze: Die Fehlermeldung bei der Suche ist nicht mit role="alert" oder aria-live="assertive" ausgezeichnet.

Vom Audit ausgeschlossen sind folgende Inhalte bzw. Funktionen der Website:

• PDFs
• EPUB
• Flash
• live übertragene zeitbasierte Medien
• Inhalte, die nur für eine geschlossene Gruppe von Personen und nicht für die allgemeine Öffentlichkeit verfügbar sind (Extranets und Intranets).
• Externe Inhalte von Drittanbietern, die vom Website-Betreiber weder finanziert noch entwickelt wurden und somit auch nicht dessen Kontrolle unterliegen (wie z.B. Google Maps, Youtube, Facebook, externe Iframes und Widgets,...), Definition wie folgt:
  • Drittanbieter Inhalte, mit denen man nicht interagieren kann (z.B. Facebook Trackingpixel), sind von der Überprüfung ausgenommen.
  • Drittanbieter Inhalte, die keine grundlegende, zentrale Funktionalität der Seite bereitstellen, sind von der Überprüfung ausgenommen.
  • Drittanbieter Inhalte, die zusätzliche Informationen bereitstellen und für die BenutzerInnen essentiell sind, benötigen eine Alternative.
  • Wenn eine Website weitestgehend aus Drittanbieter Inhalten besteht, wird eine Zertifizierung abgelehnt und Auftrag nicht angenommen.
• Online-Karten und Kartendienste, diese müssen aber eine barrierefreie Alternative haben.
• Google Captcha (ReCaptcha V2): Verwendung gültig nur für die Qualitätsstufen WACA Silber und Bronze.

simplygood: T1 Home

Kriterium 1.1.1 - Nicht-Text-Inhalt: Bronze

Es gibt verlinkte Bilder ohne alt-Text.

Kriterium 1.3.1 - Info und Beziehungen: Bronze

Es sind weder ARIA Landmarks vorhanden, noch wurde HTML5 Syntax verwendet, um Seitenbereiche auszuzeichnen.

Kriterium 1.4.1 - Benutzung von Farbe: Bronze

Die Rating-Symbole sind visuell nur mit Farbe codiert. Zudem ist das Kontrastverhältnis zwischen aktivem und nicht aktivem Rating-Symbol nur 2,7:1.

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

Der weiße Text auf lachsfarbenen Hintergrund hat ein Kontrastverhältnis von 1,4:1. Sollte hier 3:1 sein. Ist das Browserfenster schmal, dann rutscht der weiße Text auf den weißen Hintergrund.

Der grüne Text auf hellgrünem Hintergrund hat ein Kontrastverhältnis von 2,1:1. Sollte hier 3:1 sein.

Der weiße Text auf grünem Hintergrund hat ein Kontrastverhältnis von 4:1. Sollte hier 4,5:1 sein.

Der grüne Text auf weißem Hintergrund ein Kontrastverhältnis von 4:1. Sollte hier 4,5:1 sein.

Die kleinen Links (Trends, Grosser Hunger, Jede Gelegenheit, etc.) haben bei MouseOver/Focus ein Kontrastverhältnis von 4:1. Sollte 4,5:1 sein.

Kriterium 1.4.4 - Textgröße ändern: Silber

In vielen Browsern ist die Textgröße nicht änderbar, da die Schriftgrößen mit absoluten Einheiten festgelegt wurden.

Kriterium 2.4.4 - Linkzweck (im Kontext): Bronze

Es gibt verlinkte Bilder ohne alt-Text.

Die verlinkten Logos (Billa etc) sollten einen Linktext / Alternativtext haben, der das Linkziel beschreibt, z.B. "Billa Startseite". Der Alternativtext ist aber in der Form "Billa Logo | Simply Good"
aufgebaut.

Kriterium 2.4.7 - Fokus sichtbar: Bronze

Ist Browserabhängig: Der Fokus tw. kaum bis garnicht sichtbar.

Kriterium 3.3.1 - Fehlererkennung: Bronze

Die Fehlermeldung bei der Suche ist nicht mit role="alert" oder aria-live="assertive" ausgezeichnet.

Kriterium 4.1.1 - Syntaxanalyse: Bronze

Code ist nicht valide. Auch ARIA-Fehler.

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Es gibt verlinkte Bilder ohne alt-Text.

Es gibt viele ARIA-Fehler

simplygood: T2 Produktkategorie Übersicht

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

Ist das Browserfenser schmal, dann schiebt sich der Text "Produkte ..." über das Foto, wodurch der Kontrast dan tw. nicht passt.

Kriterium 1.4.4 - Textgröße ändern: Bronze

Bei Textgröße 200% kommt es zu Überschneidungen und Überdeckungen und es werden Inhalte abgeschnitten.

Kriterium 4.1.1 - Syntaxanalyse: Bronze

Einige ARIA-Fehler.

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Es gibt viele ARIA-Fehler.

simplygood: T3 Produktübersicht

Kriterium 1.3.1 - Info und Beziehungen: Bronze

"Endlich meine Food-Life-Balance gefunden." ist als h2-Überschrift ausgezeichnet, obwohl es keine ist.

Die emulierten Links zu den Kategorien sind mit div umgesetzt. Beim Container dafür ist role="presentation" gesetzt. Hier muss role="link" oder role="button" gesetzt sein.

Kriterium 1.4.1 - Benutzung von Farbe: Bronze

Die ausgewählte Produktkategorie ist visuell nur mit Farbe codiert. Zudem ist das Kontrastverhältnis zwischen aktiver und nicht aktiver Produktkategorie nur 1,7:1 (bei der Schrift).

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

Grünwert bei der ausgewählten Produktkategorie hat ein Kontrastwert von 4:1. Sollte hier 4,5:1 sein.

Der weiße und rote Text auf dem lachsfarbenen Hintergrund hat zu wenig Kontrast.

Der weiße und grüne Text auf dem hellgrünen Hintergrund hat zu wenig Kontrast.

Kriterium 1.4.4 - Textgröße ändern: Bronze

Bei Textgröße 200% kommt es zu Überschneidungen und Überdeckungen und es werden Inhalte abgeschnitten.

Kriterium 4.1.1 - Syntaxanalyse: Bronze

Sourcecode ist nicht valide. Sind auch einige ARIA-Fehler dabei!

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Die emulierten Links zu den Kategorien sind mit div umgesetzt. Beim Container dafür ist role="presentation" gesetzt. Hier muss role="link" oder role="button" gesetzt sein.

Viele ARIA-Fehler

simplygood: T4 Produktdetail

Kriterium 1.2.1 - Reine Audio- und Videoinhalte (aufgezeichnet): Bronze

Für das Video gibt es keine Alternative.

Kriterium 1.3.1 - Info und Beziehungen: Bronze

Die Nährwerttabelle ist eine reine Datentabelle, da fehlen ein paar Dinge:
- Zusammenfassung
- (Caption)
- Zuweisung des Gültigkeitsbereiches der th's -> scope='col' (zusätzlich zu role='columnheader')
- Die Zellen der erste Spalte könnten auch als th mit scope='row' ausgezeichnet werden.

Die Allergene könnten in einer ul zusammengefasst werden.

Die h2-Überschrift 'mit Pinienkernen' ist als h2 deklariert - würde ich nicht als eigene Überschrift sehen, eher als Teil der h1-Überschrift.

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

Die rote Schrift unter 'für Genießer' hat eine Größe von 16px, was ca. 12pt entspricht und je nach Hintergrund ein Kontrastverhältnis von 3,0:1 bis 3,8:1. Daher sollte hier das Kontrastverhältnis 4,5:1 sein.

Auch die rote Schrift in der Nährwerttabelle passt nicht.

Kriterium 2.4.7 - Fokus sichtbar: Bronze

Ist Browserabhängig: Der Fokus tw. kaum bis garnicht sichtbar.

Kriterium 4.1.1 - Syntaxanalyse: Bronze

Code nicht valide. Sind einige ARIA-Fehler dabei!

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Die verlinkten Bilder unter 'Mehr Inspirationen' haben einen leeren alt-Text und somit keinen Linktext.

Einige ARIA-Fehler

simplygood: T5 Rezeptübersicht

Kriterium 1.1.1 - Nicht-Text-Inhalt: Bronze

Einige verlinkte Bilder haben keinen Alternativtext und somit keinen Linktext.

Kriterium 1.3.1 - Info und Beziehungen: Bronze

"Lebe dein Leben. Wir liefern dir die Zutaten." ist als h2-Überschrift ausgezeichnet, obwohl es keine Überschrift ist.

Kriterium 1.4.1 - Benutzung von Farbe: Bronze

Die Rating-Symbole sind visuell nur mit Farbe codiert. Zudem ist das Kontrastverhältnis zwischen aktivem und nicht aktivem Rating-Symbol nur 2,7:1.

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

Inspirationen in der h1-Überschrift hat ein Kontrast von 2,5:1.

Die weiße Schrift auf grünem Hintergrund hat ein Kontrast von 4,0:1

Die kleinen Links im Inhalt haben bei MouseOver / Focus ein Kontrastverhältnis von 4:1. Sollte hier 4,5:1 sein.

Kriterium 1.4.4 - Textgröße ändern: Bronze

Bei Textgröße 200% kommt es zu Überschneidungen und Überdeckungen und es werden Inhalte abgeschnitten.

Kriterium 2.4.4 - Linkzweck (im Kontext): Bronze

Einige verlinkte Bilder haben keinen Alternativtext und somit keinen Linktext.

Bei einigen Links wurde das Bild als Hintergrundgrafik eingefügt, der Linktext ist jedoch leer.

Kriterium 2.4.7 - Fokus sichtbar: Bronze

Ist Browserabhängig: Der Fokus tw. kaum bis gar nicht sichtbar.

Kriterium 3.1.2 - Sprache von Teilen: Bronze

Folgene Texte sollten als Englisch ausgezeichnet sein:
Shopping-Hacks
Homeoffice
Office
Cross-Cultural Food
Bowl
Poke-Bowl
Soulfood-Bowl

Kriterium 4.1.1 - Syntaxanalyse: Bronze

Code ist nicht valide. Auch ARIA-Fehler

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Bedingt aufgrund der ARIA-Fehler

Einige verlinkte Bilder haben keinen Alternativtext und somit keinen Linktext.

Klappt man die "Select-Box" Inspiration in der h1-Überschrift auf, dann bleibt aria-expanded auf false.

simplygood: T6 Rezeptdetail

Kriterium 1.1.1 - Nicht-Text-Inhalt: Bronze

Einige verlinkte Bilder haben keinen Alternativtext und somit keinen Linktext.

Anmerkung:
Den Bildergroßansichten fehlt das alt-Attribut.
Ev. auch in der Lightbox das Konstrukt figure/figcaption verwenden.

Kriterium 1.4.1 - Benutzung von Farbe: Bronze

Die Rating-Symbole sind visuell nur mit Farbe codiert. Zudem ist das Kontrastverhältnis zwischen aktivem und nicht aktivem Rating-Symbol nur 2,7.

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

Der Link bei den Zutaten hat ein Kontrastverhältnis von 4,0:1. Sollte hier 4,5:1 sein.

Die kleinen Links bei weitere Rezeptideen und unter der h1-Überschrift (z.B. Jede Gelegenheit, Leichte Gerichte, etc.) haben bei MouseOver / Focus ein Kontrastverhältnis von 4:1. Sollte hier 4,5:1 sein.

Kriterium 2.4.4 - Linkzweck (im Kontext): Bronze

Bei einigen Links wurde das Bild als Hintergrundgrafik eingefügt, der Linktext ist jedoch leer.

Kriterium 2.4.7 - Fokus sichtbar: Bronze

Ist Browserabhängig: Der Fokus tw. kaum bis gar nicht sichtbar.

Kriterium 4.1.1 - Syntaxanalyse: Bronze

Code ist nicht valide. Auch ARIA-Fehler

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Bedingt aufgrund der ARIA-Fehler

simplygood: T7 Kontakt

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

Der Text 'Ziehe mit Drag&Drop ...' beim Dateiupload hat ein Kontrastverhältnis von 2,4:1.

Kriterium 2.4.7 - Fokus sichtbar: Bronze

Ist Browserabhängig: Der Fokus tw. kaum bis gar nicht sichtbar.

Kriterium 4.1.1 - Syntaxanalyse: Bronze

Code ist nicht valide. Auch aria-Fehler.

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Bedingt aufgrund der ARIA-Fehler

simplygood: T8 Suchfunktion

Kriterium 1.4.1 - Benutzung von Farbe: Bronze

Die Rating-Symbole sind visuell nur mit Farbe codiert. Zudem ist das Kontrastverhältnis zwischen aktivem und nicht aktivem Rating-Symbol nur 2,7:1.

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

Die kleinen Links im Inhalt haben bei MouseOver / Focus ein Kontrastverhältnis von 4:1. Sollte hier 4,5:1 sein.

Der weiße Text auf grünem Hintergrund hat ein Kontrastverhältnis von 4:1. Sollte hier 4,5:1 sein.

Der grüne Text auf weißem Hintergrung ein Kontrastverhältnis von 4:1. Sollte hier 4,5:1 sein.

Kriterium 2.4.3 - Fokus-Reihenfolge: Bronze

Wenn die Suchfunktion eingeblendet wird, können die Elemente der darunterliegenden Seite trotzdem per Tastatur angesprungen werden. So kommt man nach dem Logo auf den Menüpunkt "Produkte", der aber nicht sichtbar ist. usw.

Kriterium 2.4.7 - Fokus sichtbar: Bronze

Wenn die Suchfunktion eingeblendet wird, können die Elemente der darunterliegenden Seite trotzdem unsichtbar per Tastatur angesprungen werden. So kommt man nach dem Logo auf den Menüpunkt "Produkte", der aber nicht sichtbar ist. usw.

Kriterium 3.3.1 - Fehlererkennung: Bronze

Die Fehlermeldung bei der Suche ist nicht mit role="alert" oder aria-live="assertive" ausgezeichnet.

Kriterium 4.1.1 - Syntaxanalyse: Bronze

Code ist nicht valide. Auch ARIA-Fehler

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Bedingt aufgrund der ARIA-Fehler

simplygood: T9 Zufallssample

Kriterium 1.1.1 - Nicht-Text-Inhalt: Silber

Das Hintergrundbild enthält die Information "Mein Kühlschrank spielt Italo Hits" und das Foto einer Packung Totelini. Für diese Informationen gibt es keine Textalternative.

Kriterium 1.4.5 - Bilder eines Textes: Silber

Das Hintergrundbild enthält den Text "Mein Kühlschrank spielt Italo Hits". Dieser kann leicht in HTML und CSS umgesetzt werden.
Zudem wird der Text abgeschnitten, wenn das Fenster schmal ist.

Kriterium 2.4.7 - Fokus sichtbar: Bronze

Ist Browserabhängig: Der Fokus tw. kaum bis garnicht sichtbar.

Kriterium 3.1.2 - Sprache von Teilen: Bronze

Folgende Texte sollten als Englisch ausgezeichnet sein:
Easy Cooking
Spicy
Magic Steam
Heat & Eat
Red Chicken
Bowl

Kriterium 4.1.1 - Syntaxanalyse: Bronze

Code ist nicht valide. Auch ARIA-Fehler.

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Es gibt viele ARIA-Fehler