Zertifikatsbericht für AGM

Webseiten Betreiber: ADEG Österreich Handels-AG, Bereich C&C (AGM)
Webseiten Domain: www.agm.at
Zertifikat Status: Bronze
Zertifizierungsdatum: 07.12.2020

Allgemeiner Kommentar:

Die Website ist in den überwiegenden Teilen WCAG 2.0-AA konform umgesetzt. Die meisten Abweichungen zur WCAG sind technische Kleinigkeiten (z.B.: falsche Labels, leere Überschriften, Validierungsfehler). An einigen Stellen gibt es JavaScript-Komponenten bei denen noch nachgebessert werden sollte (z.B.: „Mehr Laden”-Button, Tabs/Reiter mit entsprechenden Rollen). Die größte Aufgabe wird es sein, die Flugblätter zu optimieren. Dabei gibt es zwei wichtige Aufgaben: 1. Alternativen für alle Flugblätter bereitzustellen und 2. Flugblätter für Keyboard Benutzer zugänglich zu machen.

Startseite: Die Gesamtdatengröße der Startseite ist sehr groß (über 10 MB). Das entspricht nicht gängigen Best Practices und hat Auswirkungen auf die Zugänglichkeit. Auch wenn Performance nicht Teil der WCAG ist, wird empfohlen, die Ladezeiten deutlich zu reduzieren.

Folgende Verlinkungen der Website waren nicht im Scope des Audits, da externe URLs:
Webshop: https://shop.agm.at/de/login
Newsletter Anmeldung: https://agm-news.at/de/newsletter-optin-anmeldung

Beim Zertifikat WACA sind ganz allgemein vom Audit ausgeschlossen folgende Inhalte bzw. Funktionen einer Website:
Websites mit nicht deutscher und/oder englischer Sprache
Apps für mobile Anwendungen
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, Intranets)
externe Inhalte von Drittanbietern, die vom Betreiber der Website weder finanziert noch entwickelt wurden und somit auch nicht dessen Kontrolle unterliegen (wie z.B. Google Maps, Youtube, Facebook, andere Iframes und Widgets,...) 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 Zertifizierung abgelehnt und Auftrag nicht angenommen. Website ist nicht auditierbar.
Online-Karten und Kartendienste, diese müssen aber eine barrierefreie Alternative haben
Google Captcha (ReCaptcha V2): gültig nur für Silber und Bronze

AGM T01: Startseite

Kriterium 1.3.1 - Info und Beziehungen: Silber

Das Dokument ist nicht ausreichend strukturiert. Es gibt nur eine Überschrift (h1), wobei die Seite aus mehreren Bereichen besteht. Die Navigation über Überschriften ist nicht möglich. Beispielsweise sollte “Aktuelle Angebote aus dem Flugblatt” eine Überschrift sein, um einen direkten, unkomplizierten Zugang zu ermöglichen.

-> Dokument ausreichend mit Überschriften strukturieren für Gold.

Kriterium 1.4.3 - Kontrast (Minimum): Silber

In den Teaserboxen ist der Kontrast nicht ausreichend. Grün auf Weiß (und vice versa) hat ein Kontrastverhältnis von 3.78:1.

-> Kontrastverhältnis von 4.5 für Gold.

Kriterium 1.4.5 - Bilder eines Textes: Silber

Der Hauptinhalt auf der Startseite besteht hauptsächlich aus Bildern, die wiederum hauptsächlich aus Text bestehen. Die Beschreibungen der Bilder (alt) stimmen zwar mit dem Textinhalt im Bild überein, jedoch sollte hier aufgrund der Menge an Text keine Bilder verwendet werden, sondern reine CSS Lösungen mit tatsächlichem Textinhalt bzw. eine Kombination aus Bild, Text und CSS. Die Teaserboxen sind mit zeitgemäßen Techniken auch ohne reine Bilder umsetzbar.

Argumente gegen Bilder:
- Die Textgröße bei wichtiger Information wie „Ausschließlich am 07.08.2020 gültig“ ist winzig. Es muss stark gezoomed werden.
- Text kann nicht markiert/kopiert werden.
- Text kann von Übersetzungstools nicht übersetzt werden.
- Die Bilder verlängern die Ladezeit der Seite.
- Kontrastverhältnisse in den Bildern sind nicht ausreichend.
- Text kann nicht durchsucht werden.

-> „Text-Bilder“ durch tatsächlichen Text austauschen für Gold.

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Titel ist vorhanden, die relevante Information sollte jedoch am Anfang stehen, gefolgt vom Firmennamen, also z.B.: „Willkommen beim ADEG Großmarkt! | AGM“ statt „AGM | Willkommen beim ADEG Großmarkt !“

--> Umdrehen für Gold

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

- Am Anfang des Hauptinhalts findet sich eine vermeintliche Überschrift, zwar ausgezeichnet mit einem div, aber der Textinhalt ist „Hauptüberschrift“. Das stiftet Verwirrung.

<div id="maincontent-headline" class="sr-only">Hauptüberschrift</div>

- Die „Subnavigation anzeigen” Links im Menü werden buchstabiert (text-transform: uppercase; am Parent).

- Im verlinkten Logo im Header reicht es vollkommen, wenn der Linktext „Startseite“ ist. „AGM - Adeg Großmarkt Wir verstehen uns. - Zur AGM Startseite” ist zu viel.

Für Gold:
-> „Überschrift“ entfernen oder durch sinnvollen Inhalt ersetzen.
-> text-transform bei „Subnavigation anzeigen” ändern.

Kriterium 2.4.7 - Fokus sichtbar: Silber

Focusstyles sind zwar vorhanden, aber sehr dezent. Das ist besonders bei dunklen Bildern oder im Slider am Anfang des Inhalts bemerkbar, da sind sie bei den meisten Bildern kaum sichtbar. Insbesondere wenn man über den Skip Link zum Hauptinhalt springt, kann man die Orientierung schnell verlieren, weil man da direkt zum Slider kommt und womöglich den Fokusindikator nicht sieht.

-> Deutlichere Focusstyles, insbesondere im Slider, für Gold.

Kriterium 4.1.1 - Syntaxanalyse: Silber

Validierungsfehler (u.a. eine leere Überschrift)

-> Ausbessern für Gold.

PS: Wir konnten nicht nachvollziehen, wo das Modal mit der leeren Überschrift verwendet wird. Kann man es vielleicht komplett entfernen?

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

#menu-toggle sollte kein Button sondern ein Link sein.

Button statt Link verwenden für Gold.

AGM T02: Über uns

Kriterium 2.1.1 - Tastatur: Silber

Siehe T1

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 4.1.1 - Syntaxanalyse: Silber

Validierungsfehler: h1 in h1 geschachtelt

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Siehe T1

AGM T03: Neukunde

Kriterium 1.3.1 - Info und Beziehungen: Silber

Abkürzungen sind nicht als solche ausgezeichnet (akadem., max.)
Fieldsets verfügen über mehrere legend Elemente

-> Abkürzungen richtig auszeichnen und Fieldsets richten für Gold.

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 3.2.1 - Bei Fokus: Silber

Es ist irritierend und störend, dass bei onBlur in einem Eingabefeld das Layout dermaßen springt. Die inline-Fehlermeldungen wären noch erträglich, aber dadurch, dass die Zusammenfassung der Fehler am Anfang des Formulars live erstellt wird, rutscht das Formular bei fehlerhafter Eingabe nach unten. Es reicht vollkommen, wenn die Zusammenfassung erst bei Submit gezeigt wird.

-> Zusammenfassung nicht live ausgeben für Gold.

Kriterium 3.2.4 - Konsistente Erkennung: Silber

Eingabefelder sehen aus wie Buttons

-> Deutlicher zwischen Eingabefeld und Button differenzieren für Gold.

Kriterium 3.3.2 - Beschriftungen (Labels) oder Anweisungen: Silber

- Labels sind nicht als solche erkennbar (sehen aus wie Placeholder Text)
- Labels verschwinden, sobald Eingabefelder ausgefüllt sind. Besonders problematisch bei Auto-Befüllung durch den Browser.
- Labels sind abgeschnitten (zb. Akadem. Ti)
- Inline Fehlermeldungen sollten mit dem Eingabefeld via aria-describedby verknüpft werden.

-> Fehlermeldungen mit Eingabefelder verbinden für Silber.
-> Labels optimieren für Gold.

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Siehe T1

AGM T04: Jobs

Kriterium 1.3.1 - Info und Beziehungen: Bronze

Im Filter werden <a> mit role="button" verwendet, stattdessen sollte gleich <button> verwendet werden. ARIA Attribute sollten in den meisten Fällen verwendet werden, um fehlende Semantik zu ergänzen, nicht um bestehende zu überschreiben.

Der „Mehr Jobs Laden“ Link sollte kein Link, sondern ein Button sein, weil er nirgends hin linkt, sondern lediglich Daten lädt.

Überschriften sind nicht in der richtigen Reihenfolge (h1, h2, h4, h2,..)

-> Heading Outline korrigieren für Silber
-> Richtige semantische Elemente verwenden für Gold.

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Titel ist „Jobs CuC” - Es ist nicht klar, wofür CuC steht.

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 3.3.1 - Fehlererkennung: Silber

Die Postleitzahl wird nicht validiert, bspw. kann „A-1210“ eingegeben werden, ist aber nicht valide. Nachdem es sich hier nur um Jobs in Österreich handelt, sollte einfach validiert werden können (nummerisch, 4 Stellen). Die fehlende Validierung ist insofern problematisch, als dass das Formular nicht ausreichend Feedback bei Fehleingabe liefert.

-> Fehlermeldung bei falscher Eingabe für Gold.

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Gibt es keine gültigen Treffer, liefert der Filter kein direktes Feedback (Live Region fehlt)

-> Feeback optimieren + Siehe T1 für Gold

AGM T05: Job Detail

Kriterium 1.3.1 - Info und Beziehungen: Silber

Die Job-Infos sind eine Reihe von divs. Eine ul würde helfen, Kontext zu schaffen.

-> Semantisch auszeichnen für Gold.

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 3.2.1 - Bei Fokus: Silber

Siehe T3

Kriterium 3.2.4 - Konsistente Erkennung: Silber

Siehe T3

Kriterium 3.3.2 - Beschriftungen (Labels) oder Anweisungen: Silber

Siehe T3

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Siehe T1

AGM T06: Presse

Kriterium 2.4.1 - Blöcke umgehen: Silber

Siehe T1

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.4 - Linkzweck (im Kontext): Silber

Redundante Links pro Pressemeldung. Außerdem entsteht dadurch, dass sie unterschiedliche Bezeichnungen haben, die Erwartung, dass es sich um unterschiedliche Ziele handelt.

-> <a> Elemente zum selben Ziel pro Meldung auf 1 reduzieren für Gold.

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Siehe T1

Für die lokale Navigation (2017, 2016) werden die falschen HTML Elemente verwendet. Wenn es Links sind, sollten sie auch wie Links funktionieren (Neues Dokument öffnen, Titel vorlesen, URL ändern, etc.) Wenn es Tabs sind, dann sollten sie die entsprechenden Rollen und Keyboard-Funktionen besitzen.

-> siehe T1 für Silber
-> Für Gold semantisch richtig auszeichnen.

AGM T07: Aktionen

Kriterium 1.3.1 - Info und Beziehungen: Bronze

Mehrere h1 (u.a. auch leere h1), Ebenen werden übersprungen (h1 > h5).

-> Korrekte Outline herstellen und leere Überschriften entfernen für Gold

Kriterium 1.4.3 - Kontrast (Minimum): Silber

Text hat tlw. nicht genüg Kontrast (z.B. h5 Unser aktuelles Flugblatt KW 30 bis 31)

Kriterium 2.1.1 - Tastatur: Bronze

Flipbook ist nicht bedienbar für Keyboard- oder Screen Reader-BenutzerInnen, aber zumindest gibt es eine alternative Darstellung.

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

- Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 3.2.4 - Konsistente Erkennung: Silber

Die lokale Navigation (Wien, NÖ, etc.) sieht genauso aus wie die Navigation in T6 (2017, 2016), funktioniert aber anders.

-> Vereinheitlichen für Gold oder auch optisch differenzieren

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T2

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Siehe T1

Die Benutzung des Karussells über einen Screenreader ist nicht vergleichbar mit der Benutzung über Keyboard oder Maus, weil beim Blättern zwar Feedback gegeben wird, welches Bild gezeigt wird, aber um den Inhalt konsumieren zu können, müssen alle Links durchgetabbt werden, bis man zum Inhalt kommt. Will man dann weiter blättern, muss man wieder zurücknavigieren. Angekündigt sollte nicht nur werden, welches Bild gezeigt wird, sondern auch was im Bild zu sehen ist.
Das Karussell ist ein Pattern, das bekannt ist für seine Barrieren.

-> Karussell optimieren für Gold

AGM T08: Märkte

Kriterium 1.1.1 - Nicht-Text-Inhalt: Silber

Google Map am Beginn der Seite nicht als solche beschrieben bzw. angekündigt.

-> Bspw. Überschrift ergänzen für Gold.

Kriterium 1.3.1 - Info und Beziehungen: Silber

Mehrere h1 (u.a. auch leere h1), Ebenen werden übersprungen (h1 > h4).

-> Korrekte Outline herstellen und leere Überschriften entfernen für Gold

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.4 - Linkzweck (im Kontext): Silber

„Navigation“ und „Details“ Links wiederholen sich.

-> Redundanz entfernen für Gold

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

- Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Der „GPS Koordinaten“ Button ist kein echter Button, sondern ein <i> Element mit tabindex und title. Sollte ein richtiger Button mit adäquatem Label sein. Außerdem gibt es keinerlei Feedback wenn man den „Button“ clickt.

Das Google Map iframe ist nicht Screen Reader accessible und sollte auch nicht erreichbar sein. Für Keyboard User ist es nur teilweise accessible. Wenn das reicht, dann sollte es zumindest einen Skip Link am Anfang der Map geben.

-> Siehe T1 + Semantisches HTML + Map aria-hidden machen für Silber

AGM T09: Service

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.4 - Linkzweck (im Kontext): Silber

Die Links ZU PDF Dokumenten sind visuell als PDF Links erkennbar, aber nicht für Screenreader UserInnen.

-> Dateityp und am besten auch Dateigröße alle zugänglich machen für Gold

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

- Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Siehe T1

AGM T10: Produktwelt

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 3.2.4 - Konsistente Erkennung: Silber

Die lokale Navigation (Fleisch, Obst & Gemüse) sieht genauso aus wie die Navigation in T6 (2017, 2016), funktioniert aber anders.

-> Vereinheitlichen für Gold oder auch optisch differenzieren

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Siehe T1

AGM T11: Katalogwelt

Kriterium 1.1.1 - Nicht-Text-Inhalt: Bronze

Es gibt zwar einen „Zum barrierefreien Inhalt springen“ Skip-Link bei jedem Flipbook, aber der führt jeweils zu einem PDF, das nicht barrierefrei ist. Für Silber müsste eine gute barrierefreie Alternative zu den Katalogen gegeben sein, PDFs reichen hier nicht, da es sich doch um einen essentiellen Teil der Website handelt. Es kann aber trotzdem Bronze vergeben, da PDFs vom Audit generell ausgeschlossen sind, siehe Ausschlusskriterien.
-> Barrierefreie Darstellung wie beim ersten Flipbook in T7 für Gold

Kriterium 1.3.1 - Info und Beziehungen: Silber

Abkürzungen sind nicht als solche ausgezeichnet (CuC)

-> Abkürzungen auszeichnen für Gold

Kriterium 2.1.1 - Tastatur: Bronze

Siehe T7

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.4 - Linkzweck (im Kontext): Silber

- Siehe T9
- Mehrere „Katalog zum Download“ Links

-> Siehe T9 für Silber
-> Einzigartige Links für Gold

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 3.2.4 - Konsistente Erkennung: Silber

Die lokale Navigation (Weinkatalog, etc.) sieht genauso aus wie die Navigation in T6 (2017, 2016), funktioniert aber anders.

-> Vereinheitlichen für Gold oder auch optisch differenzieren

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Siehe T1

AGM T12: Kontakt

Kriterium 1.3.1 - Info und Beziehungen: Silber

Ebenen werden übersprungen (h1 > h3). Nicht schlimm, weil die Seite nicht komplex ist, aber perfekt ist es nicht.

> Korrekte Outline herstellen für Gold

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Siehe T1

AGM T13: Kochgut

Kriterium 1.3.1 - Info und Beziehungen: Silber

Das Dokument ist nicht ausreichend strukturiert, es gibt nur eine h1.

-> h2s ergänzen für die einzelnen Bereiche für Gold.

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Siehe T1

AGM T14: Presse Detail

Kriterium 1.3.1 - Info und Beziehungen: Bronze

Das Dokument ist nicht ausreichend strukturiert, es gibt nur eine h1.


Die Liste an Bildern am Ende der Seite ist nicht ideal umgesetzt. Die Beschreibungen der Bilder sind von den Links getrennt. Die Beschreibungen sind in einem Absatz, gefolgt von divs mit Links. Der Linkzweck (siehe 2.4.4) ist für sich nicht erkennbar. Die Links sollten kurzen, sprechenden Linktext haben und die Beschreibungen der Bilder gehören auf die verlinkten Detailseiten.

-> Links optimieren für Silber
-> Zwischenüberschriften ergänzen für die einzelnen Bereiche für Gold.

Kriterium 2.4.1 - Blöcke umgehen: Silber

Siehe T1

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.4 - Linkzweck (im Kontext): Silber

Bild 01, Bild 02, Bild 03 vermitteln zwar, dass es sich um Links zu Bildern handelt, aber mehr auch nicht.

-> Sprechendere Links für Gold.

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

Siehe T1

AGM T15: Zufallssample

Kriterium 2.4.2 - Seite mit Titel versehen: Silber

Siehe T1

Kriterium 2.4.6 - Überschriften und Beschriftungen (Labels): Silber

Siehe T1

Kriterium 2.4.7 - Fokus sichtbar: Silber

Siehe T1

Kriterium 4.1.1 - Syntaxanalyse: Silber

Siehe T1

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

- Siehe T1 und „Weitere Ergebnisse laden“ barrierefrei gestalten für Gold.