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

Zertifizierung WACA

Die Initiative WACA strebt mit diesem Zertifikat ein sehr hohes Niveau und eine herausragende Qualität der Barrierefreiheit an, deshalb müssen für eine erfolgreiche Zertifizierung die grundlegendsten WCAG-Kriterien erfüllt werden. Die AuditorInnen prüfen nach einem vorgegebenen Schema und eigener Prüfmethodik streng nach diesen Kriterien. Das WACA-Zertifikat wird in 3 unterschiedlichen Stufen vergeben. Es wurde für jedes WCAG-Erfolgskriterium eine eigene Abstufung für Gold, Silber und Bronze definiert. Damit können auch Websites ausgezeichnet werden, die nicht die höchsten Anforderungen der WCAG erfüllen bzw. Best-Practice sind, aber eine grundlegende Barrierefreiheit aufweisen und niemanden bei der Benutzung der Website ausschließen. Bei den Abstufungen Silber oder Bronze müssen Bemühungen für Barrierefreiheit klar und eindeutig erkennbar sein, siehe Definition WACA Abstufungen.

WACA zertifiziert Websites, die genau eingegrenzt werden können, meist definiert durch eine URL und zieht daraus eine repräsentative Stichprobe (Testsample). 
Folgende Inhalte bzw. Funktionen einer Website sind jedoch allgemein vom Audit ausgeschlossen:

  • PDF
  • EPUB
  • 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 Prüfung ausgenommen.
    • Drittanbieter Inhalte, die keine grundlegende, zentrale Funktionalität der Seite bereitstellen, sind von der Prü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. Website ist in diesem Fall nicht auditierbar.
  • Online-Karten und Kartendienste, diese müssen aber eine barrierefreie Alternative haben.
  • Google Captcha (ReCaptcha V2): Verwendung gültig nur für die WACA Qualitätsstufen Silber und Bronze.

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.

Geprüftes Testsample

Abweichungen zur WCAG und WACA-Einstufung

    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

Copyright © waca.at 2024.