Zertifikatsbericht für EQS COCKPIT Integrity Line System

Webseiten Betreiber: EQS Group GmbH
Webseiten Domain: barrierfree.integrityline.com
Zertifikat Status: Bronze
Zertifizierungsdatum: 14.09.2022

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:

Bei der WACA-Zertifizierung wurden 7 Templates der betreffenden Webapplikation auf Web Accessibility nach WCAG 2.1 - A und WCAG 2.1 - AA überprüft (https://www.w3.org/WAI/WCAG20/quickref/). Bei den getesteten Templates ist eine starke Orientierung in Richtung Barrierefreiheit erkennbar. Viele der im ersten Audit aufgetretenen Problemstellen wurden behoben. Es kann nun WACA in Bronze vergeben werden.
Als repräsentative Stichprobe für die gesamte Applikation wurde für den Zertifizierungsaudit ein kompletter Usecase einer Testversion inkl. Login/Logout und Postfach in deutscher sowie englischer Sprache gewählt. Die Produktwebsite www.eqs.com/de/compliance-loesungen/integrity-line/ war nicht im Scope des Audits.

Re-Zertifizierung 2025 nach WCAG 2.2-AA: Es sind noch einige Anpassungen zu erfüllen, damit das WACA-Zertifikat in Bronze aufrechterhalten bleibt. Diese Adaptionen werden gerade durchgeführt. 

Geprüftes Testsample

Abweichungen zur WCAG und WACA-Einstufung

    EQS COCKPIT Integrity Line System: T1 Startseite DE

    Kriterium 1.3.1 - Info und Beziehungen: Nicht Erfüllt

    Die optische Überschrift ist keine semantische Überschrift

    <div _ngcontent-ng-c3753939488="" class="heading editable ng-star-inserted" data-il-qa-frontpage-element="1" data-menu-item-type="Headline" aria-label="Hinweisgebersystem" data-translation-id="265">Hinweisgebersystem</div
    => diese Überschrift sollte als <h1> ausgezeichnet werden

    Silber: Listen optimierbar
    => im Menü würde sich eine Liste als semantisches Element gut eignen
    (Tritt auch auf Subseiten auf und wird dort nicht mehr explizit erwähnt)

    Kriterium 1.3.2 - Bedeutungstragende Reihenfolge: Silber

    die Reihenfolge der Navigation in der mobilen Ansicht ist für Tastatur Nutzer:innen und Screenreader Nutzer:innen nicht ideal da die Navigation erst am Seitenende eingebunden ist.
    => optisch kann die Navigation unten bleiben, im DOM also im HTML Code sollte die Navigation besser oben sein

    Kriterium 2.1.1 - Tastatur: Nicht Erfüllt

    Bei den Dialog Overlays z.B “sicheres Postfach” (Zugang zum Fall) ist der Abbrechen Button nicht ausreichend mit Tastatur bedienbar. Abbrechen lässt das Overlay offen und der Tastaturfokus springt unter das Overlay. Wenn dann wieder in das Overlay navigiert wird und nochmal Abbrechen ausgeführt wird, verschwindet das Overlay (Bei Maus Benutzung funktioniert abbrechen normal)
    => Abbrechen mit Tastatur sollte gleich zum Schließen des Overlays führen

    Kriterium 2.4.2 - Seite mit Titel versehen: Silber

    HTML Title “barrierfree” beschreibt nicht den Seiteninhalt - der Punkt ist aber auf die Teststellung bezogen wird und bei realen Projekten ohnehin anders lautet

    Kriterium 2.4.3 - Fokus-Reihenfolge: Silber

    bei mehreren Overlays (Sicheres Postfach -> Falsches Passwort) kann mobil tlw. noch unter dem letzten sichtbaren Overlay navigiert werden
    für Silber tolerierbar da der Fokus gleich auf den Schließen Button springt

    Kriterium 2.4.7 - Fokus sichtbar: Bronze

    Der Tastaturfokus ist bei manchen Elementen in manchen Browsern schlecht oder nicht sichtbar z.B. Sprachwechsel Button in Firefox, Button wie Abbrechen, Login etc.
    => entsprechende Fokus Outline auch hier einsetzen

    Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

    Das bei der Sprachauswahl eingesetzte aria-expanded Attribut ist nicht korrekt in Verwendung da das Element z.B. kein button ist
    <a _… tabindex="0"... aria-haspopup="menu" aria-expanded="false">
    => role=”button” ergänzen

    Der Link sicheres Postfach triggert einen modalen Dialog, hier sollte z.B. role=button verwendet werden

    (Für bronze tolerierbar da die Elemente ausreichend bedient werden können)


    weitere Anmerkung: Es finden sich auf vielen Elementen aria-labels, diese sind an den meisten Stellen allerdings nicht notwendig (da redundant) z.B.

    <a tabindex="0" ... href="/">...<span ... aria-label="Startseite" ...>Startseite</span>...</a>
    <a ... type="button" ... href="javascript:;">...<span ... aria-label="Sicheres Postfach" ...>Sicheres Postfach</span>...</a>
    etc.
    Diese Labels stören aber derzeit auch nicht, da sie derzeit korrekt verwendet werden. Die Konstruktion ist aber fehleranfälliger.

    EQS COCKPIT Integrity Line System: T2 Startseite EN

    EQS COCKPIT Integrity Line System: T3 Meldung abgeben

    Kriterium 1.1.1 - Nicht-Text-Inhalt: Bronze

    Beim Passwort Hilfe Text (Eine Mindestlänge von 8 Zeichen haben, Mindestens eine Ziffer enthalten. etc,) ist für nicht visuelle Nutzer:innen nicht klar welcher von den Punkten noch fehlerhaft ist da die Häkchen und die "X"e keine Alternativen haben

    => Alternativen setzen
    (für bronze tolerierbar da eingeführte Passwort Regeln)

    Kriterium 1.3.1 - Info und Beziehungen: Nicht Erfüllt

    Überschriften:

    Beim Aufrufen der Seite ist keine Überschrift vorhanden. Zudem ist eine leere <h1> aufgefallen.

    <mat-toolbar _ngcontent-ng-c2881413392="" class="mat-toolbar e-form-toolbar header mat-toolbar-single-row"><h1 _ngcontent-ng-c2881413392="" class="mat-mdc-tooltip-trigger wb-title mat-mdc-tooltip-disabled" aria-label="" data-translation-id="null">

    Sobald ein Land ausgewählt wird sind ausreichend Überschriften da

    => “Eine Meldung abgeben” sollte schon vor Länderauswahl als <h1> eingeführt werden

    Labels:

    Mehrere Formularfelder sind nicht ausreichend mit Labels verbunden:
    Name, Telefonnummer, Email, Passwort, Passwort Wiederholen, Captcha z.B.
    <mat-label … required="" aria-label="Name"...>Name</mat-label>
    …
    <input … autocomplete="name" data-qa="FullName-input" type="text" dir="ltr" id="mat-input-9" required="" aria-required="true">

    => alle Formularelemente mit ausreichenden Labels versehen

    Kriterium 1.4.3 - Kontrast (Minimum): Nicht Erfüllt

    der Kontrast der roten Fehlermeldungen (rot auf weiss oder umgekehrt) ist nicht ausreichend ca. 4:1

    der Kontrast der grünen Meldungen (bei “Passwort Hilfe Text”) ist zu gering ca. 3,7:1

    => Kontrast erhöhen (soll min 4,5:1)

    Kriterium 1.4.11 - Nicht-Text Kontrast: Nicht Erfüllt

    Manche Formularfelder haben einen Rahmen (ohne enthaltenen Text). Diese Rahmen haben in diesem Fall zu wenig Kontrast: 2,7:1
    => Kontrast erhöhen (soll min 3:1)

    Kriterium 2.4.2 - Seite mit Titel versehen: Nicht Erfüllt

    redundanter Seitentitel “barrierefree” wie auf Startseite
    => individuellen Seitentitel sicherstellen z.B. “Eine Meldung abgeben - Seitentitel”

    Kriterium 2.4.3 - Fokus-Reihenfolge: Bronze

    beim Abschicken des Formulars bleibt im Fehlerfall der Tastaturfokus auf dem weiter button,
    => Der Tastatur Fokus sollte i.d.F. nach oben (idealerweise zum ersten fehlerhaften Eingabe Feld springen)

    Kriterium 2.4.7 - Fokus sichtbar: Nicht Erfüllt

    Der Tastaturfokus ist bei den Buttons weiter und zurück in der mobilen Ansicht nicht sichtbar

    => entsprechende Fokus Outline auch hier einsetzen

    EQS COCKPIT Integrity Line System: T4 Senden

    Kriterium 1.3.1 - Info und Beziehungen: Nicht Erfüllt

    In der Desktop Ansicht gibt es im Gegensatz zur mobilen Ansicht keine <h1>

    => <h1> auch in der Desktop Ansicht einführen

    Kriterium 1.4.3 - Kontrast (Minimum): Nicht Erfüllt

    der Kontrast blau auf weiss (z.B. “Bitte notieren Sie sich die folgende Fall-ID…”) ist nicht ausreichend ca. 4,2:1

    => Kontrast erhöhen min 4,5:1

    Kriterium 2.5.3 - Beschriftung im zugänglichen Namen: Bronze

    Der Button “Code kopieren” hat den sichtbaren Namen “Code kopieren” und den Accessible Name aria-label="Fall-ID in die Zwischenablage kopieren"

    <button … aria-label="Fall-ID in die Zwischenablage kopieren"><mat-icon role="img" tabindex="0" … aria-hidden="true" ...></mat-icon><p … aria-label="Code kopieren" .. >Code kopieren</p></button>
    => sichtbaren Namen und Accessible Name mehr angleichen

    Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

    Der Button “Code kopieren” hat enthaltene interaktive Elemente welche aria-hidden=true sind

    <button … aria-label="Fall-ID in die Zwischenablage kopieren"><mat-icon role="img" tabindex="0" … aria-hidden="true" ...></mat-icon><p … aria-label="Code kopieren" .. >Code kopieren</p></button>

    => tabindex=0 entfernen

    EQS COCKPIT Integrity Line System: T5 Postfach

    Kriterium 1.3.1 - Info und Beziehungen: Bronze

    Überschriften: in jedem Inhaltsreiter sollte eine Überschrift als H2 eingefügt werden (z.B. <h2>Schreibverkehr</h2>).

    Semantik: zu wenig Semantik in der Auflistung des Falls und der Dateien sowie beim Schriftverkehr, hier wäre die Verwendung von z.B. Listen sinnvoll,
    Weiters ist für nicht visuelle Nutzer:innen beim Schriftverkehr nicht gleich klar welche der Meldungen von User:innen und welche von Sachbearbeiter:innen kommt. Hier könnten sr-only Texte oder Bereiche mit role region und aria-labels eingesetzt werden.

    Kriterium 1.3.2 - Bedeutungstragende Reihenfolge: Bronze

    die Reihenfolge der Fragen und Antworten ist optisch chronologisch absteigend, im DOM bzw,. in der Lesereihenfolge für Screenreader jedoch chronologisch aufsteigend, das sollte angeglichen werden-

    Kriterium 1.4.3 - Kontrast (Minimum): Nicht Erfüllt

    der Kontrast der Datum Werte hat zu wenig Kontrast: 4,3:1 (soll min. 4,5:1)

    Kriterium 1.4.11 - Nicht-Text Kontrast: Nicht Erfüllt

    Die Rahmenlinie des Textfeldes im ersten Reiter (unten) hat zu wenig Kontrast; 2,7:1 (soll min. 3:1)

    Kriterium 2.4.7 - Fokus sichtbar: Silber

    Der Tastaturfokus der Schaltfläche für die Sprachaufnahme ist etwas unklar. Es ist nicht sofort klar, wann man die Schaltfläche aktivieren kann und wann nicht. Es sollte deutlicher gemacht werden, wann der Fokus auf der Schaltfläche liegt (eventuell durch eine Umrandung).

    EQS COCKPIT Integrity Line System: T6 Logout

    EQS COCKPIT Integrity Line System: T7 Datenschutz

    Kriterium 1.3.1 - Info und Beziehungen: Nicht Erfüllt

    Die optischen Überschriften sind keine semantischen Überschriften z.B.

    <div _ngcontent-ng-c3753939488="" class="heading editable ng-star-inserted" data-menu-item-type="Headline" aria-label="Datenschutzhinweis" data-translation-id="184">Datenschutzhinweis</div>

    => semantische Überschriften wie <h1>, <h2> verwenden



    Kriterium 2.1.1 - Tastatur: Nicht Erfüllt

    Die Scrollbare Region des Inhalts ist nicht ausreichend mit Tastatur erreichbar
    Hier sollte z.B. auf <main> ein tabindex="0" Attribut eingesetzt werden (+ Tastaturfokus Kennzeichnung wie Outline etc.)
    (betrifft wahrsch. auch alle ähnlichen Seiten)

Copyright © waca.at 2025.