Zertifikatsbericht für Campus Online

Webseiten Betreiber: CAMPUSonline
Webseiten Domain: coreview.tugraz.at
Zertifikat Status: Silber
Zertifizierungsdatum: 28.02.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:

Die webbasierte Plattform CAMPUSonline 3.0 (Zugang für Studierende) auf Basis des Review-System coreview.tugraz.at in deutscher und englischer Sprache erfüllt weitestgehend die WCAG 2.1 - AA Erfolgskriterien und es kann daher die WACA Stufe Silber vergeben werden. Das WACA Zertifikat in Silber gilt nur für den Anwendungsbereich bzw. den Zugang der Studierenden und hier auch nur alle Module der Version 3.0.

Folgende Funktionen der Anwendung waren nicht im Scope des Audits:

  • Vorgänger-Version 2.0
  • Zugang für Bedienstete bzw. Lehrende
  • Das Modul Personen (TS8) wird von Studierenden fast nie verwendet, da Infos über Vortragenden gleich bei der Lehrveranstaltung angeklickt und nachgelesen werden können (einfacherer und alternativer Weg). Das Modul wird hauptsächlich von Bediensteten verwendet und ist daher out of Scope.

Beim Zertifikat WACA sind folgende Inhalte bzw. Funktionen einer Web-Anwendung ganz allgemein vom Audit ausgeschlossen:

  • Websites bzw. Webinhalte 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

Geprüftes Testsample

  • Campus Online: TS1 Startseite und Login Studierende: https://coreview.tugraz.at
  • Campus Online: TS2 Szenario 1: Meine Lehrveranstaltungen:
  • Campus Online: TS3 Schritt 1.1: Prüfungstermine ansehen:
  • Campus Online: TS4 Schritt 1.2: Zur Prüfungsanmeldung:
  • Campus Online: TS5 Schritt 1.3: Anmelden:
  • Campus Online: TS6 Schritt 1.4: Anmeldung erfolgreich:
  • Campus Online: TS7 Szenario 2: Module:
  • Campus Online: TS8 Szenario 3: Personen:
  • Campus Online: TS9 Sprachweiche und Abmeldung:

Abweichungen zur WCAG und WACA-Einstufung

    Campus Online: TS1 Startseite und Login Studierende

    Kriterium 1.3.1 - Info und Beziehungen: Silber

    Anmerkungen:
    - Der HTML Code ist allgemein in keinem zufriedenstellenden Zustand:
    -- Semantische Elemente werden nicht eingesetzt, wo es aber Sinn machen würde (z.B.: span statt button)
    -- Viele Validierungsfehler

    Markup in Ordnung bringen für Gold.

    Kriterium 2.4.1 - Blöcke umgehen: Silber

    - Keine Skip Links vorhanden.

    Ergänzen für Gold.

    Kriterium 3.1.2 - Sprache von Teilen: Silber

    - Das Label des Buttons in der mobilen Navigation ist „Side-Navigation“.
    - Das Label des „Suchbegriff löschen“ Buttons ist „Clear“.

    Übersetzen für Gold

    Kriterium 3.3.1 - Fehlererkennung: Silber

    Gesamte Website:
    - Fehlermeldungen sind nicht mit dem Eingabefeld verknüpft.

    Ergänzen für Gold.

    Kriterium 4.1.1 - Syntaxanalyse: Silber

    - Viele Validierungsfehler. Die meisten kommen aber durch Angular. Es gibt aber auch tatsächliche Fehler, wie beispielsweise, dass div kein Kindelement von button sein darf.
    - ids sind im Dokument doppelt vorhanden

    Eklatante Fehler richten für Gold

    Campus Online: TS2 Szenario 1: Meine Lehrveranstaltungen

    Kriterium 1.4.13 - Eingeblendete Inhalte: Silber

    - Tooltips verschwinden bei Hover über den Content

    Anpassen für Gold

    Kriterium 4.1.3 - Statusmeldungen: Silber

    - Wenn man nach Begriffen filtert, gibt es zwar Feedback, es wird die Anzahl der Einträge vorgelesen, aber die Zahl stimmt nicht.

    Richten für Gold

    Campus Online: TS3 Schritt 1.1: Prüfungstermine ansehen

    Kriterium 1.3.1 - Info und Beziehungen: Silber

    - Listen sollten zur Gruppierung von 2 oder mehr Elementen verwendet werden, nicht für nur ein Element (Semester Dropdown).
    - HTML Elemente werden falsch verwendet (Platzhalter-Link statt Button)
    - Die Paginierung sollte als ol ausgezeichnet werden.

    In Ordnung bringen für Gold

    Kriterium 1.4.13 - Eingeblendete Inhalte: Silber

    - Tooltips verschwinden bei Hover über den Content

    Anpassen für Gold

    Kriterium 2.1.1 - Tastatur: Silber

    - Fokus geht im “Filter”-Dropdown leicht verloren, weil nicht klar ist, wie man die Optionen wieder ausblenden kann.

    Optimieren für Gold

    Kriterium 2.4.7 - Fokus sichtbar: Silber

    - Manche Focus-Styles sind nur sehr schwer und andere gar nicht sichtbar

    Focus Styles deutlich sichtbar machen für Gold.

    Kriterium 4.1.2 - Name, Rolle, Wert: Silber

    1. Der Mehranzeigen Button ist kein richtiger Button, sondern ein Platzhalter Link.
    2. Der Mehranzeigen Button gibt keine Information darüber, ob der Inhalt angezeigt wird oder nicht.
    3. Navigationen sollten gelabelled werden

    Anpassen für Gold

    Campus Online: TS4 Schritt 1.2: Zur Prüfungsanmeldung

    Kriterium 1.4.12 - Textabstände: Silber

    Es kommt zu Überlappungen im Bereich „Prüfungstermine und Anmeldung”.

    Anpassen für Gold.

    Kriterium 1.4.13 - Eingeblendete Inhalte: Silber

    - Tooltips verschwinden bei Hover über den Content

    Anpassen für Gold

    Kriterium 2.1.1 - Tastatur: Silber

    - Überschriften sind fokussierbar obwohl mit ihnen nicht interagiert werden kann.
    - Die „Buttons“ in den Disclosure Widgets sind keine echten Buttons und haben deswegen nicht die ausreichenden Events.

    Anpassen für Gold.

    Kriterium 2.4.4 - Linkzweck (im Kontext): Silber

    - Inhaltliche Verknüpfungen zwischen den Labels und Links in „Prüfungsinformation” sind nur schwer zu verstehen, weil die Komponente nicht ausreichend semantisch ausgezeichnet ist und HTML Elemente falsch verwendet werden (label).

    Optimieren für Gold.

    Kriterium 4.1.2 - Name, Rolle, Wert: Silber

    1. role=switch mit falschen Attributen umgesetzt
    2. role=switch wird fälschlicherweise als Disclosure Widget verwendet
    3. Verwendetes Attribut aria-title existiert nicht
    4. Links in der Navigation sind semantisch keine richtigen Hyperlinks.
    5. Für Ankerlinks kann und soll das <a> Element mit dem href Attribut verwendet werden. Nach Möglichkeit sollen nativen Rollen nicht überschrieben werden.
    6. „Vergangene Termine anzeigen“ ist weder Link noch Button.

    Anpassen für Gold

    Campus Online: TS5 Schritt 1.3: Anmelden

    Kriterium 1.3.1 - Info und Beziehungen: Silber

    - Wizard sollte als ol und nicht ul ausgezeichnet werden.
    - label wird falsch verwendet
    - div wird inflationär verwendet

    Seite sauberer strukturieren für Gold

    Kriterium 1.4.12 - Textabstände: Silber

    Es kommt zu Überlappungen.

    Anpassen für Gold.

    Kriterium 2.1.1 - Tastatur: Silber

    „Vorbehaltliche Anmeldung“ ist fokussierbar, aber nicht interaktiv.

    tabindex entfernen für Gold

    Kriterium 2.4.2 - Seite mit Titel versehen: Silber

    - Es wäre besser, wenn der Titel nicht nur „XY” sondern „XY - Campus Online“ wäre.

    Anpassen für Gold

    Campus Online: TS6 Schritt 1.4: Anmeldung erfolgreich

    Kriterium 1.3.1 - Info und Beziehungen: Silber

    Siehe TS5

    Kriterium 1.4.12 - Textabstände: Silber

    Siehe TS5

    Campus Online: TS7 Szenario 2: Module

    Kriterium 1.3.1 - Info und Beziehungen: Silber

    - Für Auflistungen können die Listenelemente <ul> oder <ol> verwendet werden.
    - In der Paginierung werden Platzhalter- anstatt echter Hyper-Links verwendet.
    - Die Paginierung sollte als ol ausgezeichnet werden.

    In Ordnung bringen für Gold

    Kriterium 1.4.10 - Umbruch: Silber

    Optionen im „Organisation“-Dropdown sind abgeschnitten.

    Anpassen für Gold

    Kriterium 2.4.7 - Fokus sichtbar: Silber

    - Manche Focus-Styles sind nur sehr schwer und andere gar nicht sichtbar

    Focus Styles deutlich sichtbar machen für Gold.

    Campus Online: TS8 Szenario 3: Personen

    -

    Campus Online: TS9 Sprachweiche und Abmeldung

    Kriterium 2.4.4 - Linkzweck (im Kontext): Silber

    DE und EN sind verständlich, aber besser wären „Deutsch“ und „English“.

    Anpassen für Gold

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

    DE und EN sind verständlich, aber besser wären „Deutsch“ und „English“.

    Anpassen für Gold