Zertifikatsbericht für AIT

Webseiten Betreiber: AIT Austrian Institute of Technology
Webseiten Domain: www.ait.ac.at
Zertifikat Status: Bronze
Zertifizierungsdatum: 27.09.2021

Allgemeiner Kommentar:

Grundsätzliche Anforderungen der Barrierefreiheit nach WCAG 2.1 – AA wurden erfüllt bzw. wurden erfolgreich nachgebessert. Es kann daher das WACA Zertifikat in Bronze vergeben werden. Die Problematik der Anglizismen auf der deutschen Seite wird in diesem Fall milder bewertet, da als internationale Forschungseinrichtung diese sehr gebräuchlich sind und für die spezielle Zielgruppe keine hohe Relevanz darstellen.

Der Blog mit der URL ait.ac.at/blog wurde wegen seines unterschiedlichen Aufbaus zur Hauptseite als eigenständige Website betrachtet und bewertet. Im Oktober 2022 wurde ein Softrelaunch durchgeführt. Dazu wurden die Startseite und eine repräsentative Unterseite nochmals auditiert und die Einstufung WACA in Bronze bestätigt.

Folgende Verlinkungen der Website waren nicht im Scope des Audits, da externe URLs:
- Publikationsdatenbank: http://pubdb.ait.ac.at/hilite_pubs.php?lang=1&hilite=1&iterate_fak=2
- Research Gate: https://www.researchgate.net/institution/AIT-Austrian-Institute-of-Technology
- Podcast 1: https://open.spotify.com/show/4ZAdiTs8KcJXH3c8NfQeES
- Podcast 2: https://soundcloud.com/user-378778548
- sowie alle Social Media Kanäle

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

AIT: T00 Rahmen der Website

Kriterium 1.1.1 - Nicht-Text-Inhalt: Silber

WACA Gold:
Alternativtexte bzw. Texte für Barrierefreiheit öfters doppelt und werden dadurch vom Screenreader 2 Mal vorgelesen (Logo, Suche, ...)
<a class="logo_ait" title="AIT - Austrian Institute Of Technology" href="/"><span class="sr-only">AIT Logo</span><img class="ait hidden-sm hidden-xs" src="./fileadmin/template_relaunch/img/ait-logo_blog.svg" alt="AIT Logo"></a>

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

Die Headernavigation Suche, Sprache, Social-Media-Links hat bei einigen Seiten (z.B. https://www.ait.ac.at/karriere/diversity) mit hellem Headerbild zu wenig Kontrast zum Hintergrund und ist daher schlecht lesbar. Siehe Screenshots. Auf den wichtigsten/häufigsten Seiten passt der Kontrast - daher Bronze.

Kriterium 1.4.4 - Textgröße ändern: Bronze

Bei bestimmten Bildschirmbreiten/Zoomstufen erscheint ein horizontaler Scrollbalken, da sich die Links im Footer nicht responsiv anpassen, siehe Screenshot (aufgenommen bei 970px Browserfensterbreite).

Kriterium 1.4.10 - Umbruch: Bronze

- Der Placeholder des ausgeklappten Suchfelds ist mobil abgeschnitten und dadurch erschwert zu bedienen.

Kriterium 1.4.12 - Textabstände: Silber

Zusatzanmerkung generelles Problem: es werden bei den hinteren Menüpunkten die Untermenüs bei einer gewissen Fensterbreite (kurz bevor das Menü auf Hamburger wechselt) abgeschnitten, siehe Screenshot. Bei Anpassung der Textabstände werden die Untermenüpunkte noch mehr abgeschnitten und sind nicht mehr vollständig lesbar.

Kriterium 2.4.4 - Linkzweck (im Kontext): Bronze

Silber:
- der Suchbutton (type=submit) ist mit "Suche anzeigen" beschriftet, was irreführend ist (Suche wird ja bereits angezeigt) - sollte besser "Suche starten" o.ä. heißen
- Links zu Telefonnummern, Email-Adressen, Dokumenten (PDF, Blätterkatalog, ...), zu externer Seite (neues Fenster), Bildvergrößerung in Lightbox, etc. sind für Screenreader nicht als solche gekennzeichnet (betrifft alle Seiten, auf denen solche Links vorhanden sind).
Diese Zusatzinformation kann z.B. im Linktext, als Screenreader-Text oder im title-Attribut ausgegeben werden.

Kriterium 2.4.7 - Fokus sichtbar: Bronze

Silber:
Der Browser-Standard-Fokus wird für Links im Inhalt verwendet. Dabei ist das Offset etwas nach innen versetzt, sodass der Text bei fokussierten Elementen schwer lesbar ist, siehe Screenshot.
Die Social-Media-Buttons vor dem Footer (.shariff-button) haben keinen sichtbaren Fokus.

Kriterium 3.1.2 - Sprache von Teilen: Silber

Wichtige Inhalte/Überschriften/Beschriftungen von Formularen sollten generell auf Deutsch übersetzt werden, da die deutsche Website sonst nur für BenutzerInnen mit Englisch-Kenntnissen zugänglich ist. Da es sich im Forschungs-Bereich als gängige Praxis erweist, Anglizismen zu verwenden, wird mit Silber beurteilt.

Beispiele für englische Begriffe auf diversen Seiten:
- Researcher Profile
- Junior Scientist (m/w) for Urban Design Computation
- According to Helmut Leopold and Ross King, two AI experts at the AIT…
- Heads of Center
- Surnames starting with:
- Publications
- How it works, etc.

Kriterium 3.2.4 - Konsistente Erkennung: Silber

Gold:
- Email-Adressen sind manchmal mit mailto verlinkt, manchmal öffnen diese ein Kontaktformular in einem Overlay.
- Nicht verlinkte Kacheln (z.B. auf der Startseite "NETWORK OPERATORS & ENERGY SERVICE PROVIDERS") unterscheiden sich nicht von verlinkten Kacheln. Es wird bei jeder Kachel ein Pfeil-Icon sowie ein Screenreader-Text "mehr erfahren" angezeigt.

Kriterium 4.1.2 - Name, Rolle, Wert: Silber

WACA Gold:
- Durch das Vorkommen von mehreren Navigations-Elementen mit role="navigation" bzw. <nav>-Elementen, benötigt jede Navigation einen eindeutigen Namen.

Kriterium 4.1.3 - Statusmeldungen: Bronze

Screenreader werden nicht über die Vorschläge der Autovervollständigung beim Suchfeld informiert.

AIT: T01 Startseite DE

Kriterium 1.1.1 - Nicht-Text-Inhalt: Silber

WACA Gold:
- ReCaptcha-Alternative verwenden, welche barrierefrei ist

Kriterium 1.4.3 - Kontrast (Minimum): Silber

Die Sprachumschalter Texte haben keinen ausreichenden Kontrast wenn diese einen Fokus besitzen.

Kriterium 1.4.12 - Textabstände: Bronze

Der Textbereich bei den Terminen ist zu klein gewählt, daher wird bei längeren Titeln der Text
abgeschnitten wenn man die Testabstände erhöht

Kriterium 2.1.1 - Tastatur: Bronze

Wenn man auf "Mehr Erfahren" eines Slides ist, überspringt man die restlichen Slider und kommt sofort auf die nächste Sektion.

Kriterium 3.1.2 - Sprache von Teilen: Silber

Siehe T00

Kriterium 3.3.1 - Fehlererkennung: Silber

- Browser-Validierung mit Attribut "required" wird noch nicht vollständig unterstützt.
- Der Pflichtfeld-Hinweis sollte vor dem Formular, nicht danach stehen: "Mit * markierte Felder sind
Pflichtfelder."

Kriterium 3.3.3 - Fehlerempfehlung: Silber

Browser-Validierung mit Attribut required wird noch nicht vollständig unterstützt.
Fehlerhafte Felder sind nicht mit Feldname und Korrekturempfehlung beschrieben.

AIT: T02 Startseite EN

Kriterium 1.1.1 - Nicht-Text-Inhalt: Silber

siehe T01

Kriterium 1.4.12 - Textabstände: Bronze

siehe T01

Kriterium 3.1.2 - Sprache von Teilen: Silber

Gold:
Mehrere Inhalte sind immer wieder auf Deutsch, aber nicht mit lang="de" gekennzeichnet
- Suche
- News-Beiträge "Kickoff für „We3D“: Additive Fertigung der nächsten Generation"
- Inhalte beim Slider sind zum Teil auf Deutsch, aber nicht mit lang="de" gekennzeichnet (z.B. Agnes Reiner gewinnt Falling Walls Lab)
- Mobiles Menü unten "Anrufen", "E-Mail", "Standorte" ist auf Deutsch, aber nicht gekennzeichnet

Kriterium 3.3.1 - Fehlererkennung: Silber

siehe T01

Kriterium 3.3.3 - Fehlerempfehlung: Silber

siehe T01

AIT: T03 Suchergebnis

Kriterium 1.4.3 - Kontrast (Minimum): Silber

Hover/Fokus-Style der autocomplete-Vorschläge hat zu wenig Kontrast (hellgrau auf weiß, siehe Screenshot)

Kriterium 2.4.4 - Linkzweck (im Kontext): Silber

siehe 4.1.2 (Links ohne href)

Kriterium 3.1.2 - Sprache von Teilen: Silber

Siehe T00

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Silber:
- Dateipfade (.link-to-document) und Dateityp bei den Ergebnissen sind als <a> implementiert, obwohl sie zu keiner Ressource verlinken
- AutoComplete Vorschläge sind für Screenreader-BenutzerInnen nicht vollständig barrierefrei. Z.B.:
„Überschrift: Top-Treffer“ wird nicht vorgelesen.
- Paging: es gibt einen Link mit den Namen "..." - die Bedeutung dieses Links sollte für Screenreader beschrieben werden (bzw. statt dem Link einen Text schreiben, weil es im Moment ein Link ohne Funktion ist)

Gold:
- Paging: aktuelle Seite wird für Screenreader-BenutzerInnen nicht kommuniziert (aria-current)

Kriterium 4.1.3 - Statusmeldungen: Bronze

Screenreader werden nicht über die Vorschläge der Autovervollständigung beim Suchfeld informiert.

AIT: T04 Management

Kriterium 1.3.5 - Zweck von Eingaben bestimmen: Bronze

Silber:
- betrifft alle Seiten wo Personen mit Kontaktformular vorkommen: es sind keine autocomplete-Werte für die Eingabefelder Name und Email vorhanden

Kriterium 3.1.2 - Sprache von Teilen: Silber

Siehe T00

AIT: T05 Researcher Übersicht

Kriterium 1.3.1 - Info und Beziehungen: Bronze

- die Überschriften der einzelnen Spalten haben ein jeweils ein überflüssiges aria-label: "AIT profile ..." - es reicht der Inhalt des <h2>-Elements

Kriterium 2.4.4 - Linkzweck (im Kontext): Silber

Gold:
Die Buchstaben bei "Surnames starting with" haben keine aussagekräftige Beschriftung, nur den jeweiligen Buchstaben. Das title-Attribut "Surnames starting with 's'" wird nicht durchgehend unterstützt, besser wäre es, diese Beschriftung als Screenreader-Text anzuzeigen.

Kriterium 3.1.2 - Sprache von Teilen: Bronze

siehe T00

eine Kennzeichnung der Tabelle wird dringend empfohlen, weil diese 100% Englisch ist

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

Silber:
- der aktive Buchstabe, nach welchem gerade gefiltert ist, hat keinen Aktiv-Zustand. Screenreader haben daher keine Information, nach welchem Buchstaben gerade gefiltert ist.

AIT: T06 Researcher Detail

Kriterium 3.1.2 - Sprache von Teilen: Bronze

siehe T00

der Inhalt ist 100% englisch und sollte daher gekennzeichnet werden

AIT: T07 Themen

Kriterium 1.1.1 - Nicht-Text-Inhalt: Silber

Die Hintergrundbilder der Boxen haben keinen Alternativtext (bei der Umsetzung auf der Startseite haben die gleichen Inhalte Alternativtexte hinterlegt und die Hintergrundbilder sind zusätzlich als <img> eingebunden). Die optimale Umsetzung wäre, wenn es auf beiden Seiten gleich gehandhabt wird.

Kriterium 1.3.1 - Info und Beziehungen: Silber

- Überschriften Struktur nicht ganz korrekt

Kriterium 3.1.2 - Sprache von Teilen: Silber

siehe T00

AIT: T08 Themen Detail

Kriterium 3.1.2 - Sprache von Teilen: Silber

siehe T00

AIT: T09 Lösungen

Kriterium 1.3.1 - Info und Beziehungen: Silber

Gold:
- es sind mehrere leere Absätze <p></p> vorhanden

Kriterium 3.1.2 - Sprache von Teilen: Silber

siehe T00

AIT: T10 News Übersicht

Kriterium 1.4.12 - Textabstände: Nicht Erfüllt

Bei den Boxen wird der Text bei erhöhten Textabständen abgeschnitten, siehe Screenshot.

Gold:
Das Datum bei den Veranstaltungs-Boxen überlappt leicht und erschwert dadurch das Lesen.

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

Gold:
die Überschrift "Mehr laden" ist nicht aussagekräftig. Für Screenreader sollte dabei stehen, welche Inhalte geladen werden (z.B. "Mehr Veranstaltungen und News laden")

Kriterium 3.1.2 - Sprache von Teilen: Silber

siehe T00

AIT: T12 Über das AIT

Kriterium 1.3.1 - Info und Beziehungen: Silber

Gold:
- es sind leere Absätze vorhanden

AIT: T13 Blog Übersicht

Kriterium 1.3.1 - Info und Beziehungen: Bronze

Silber:
- Die Links im Footer sind weder als Liste noch als Navigation ausgezeichnet (keine Buchstaben als Trennsymbole verwenden).

Empfehlung: Die Social Links (.follow-social-link) könnten in einer Liste ausgezeichnet werden.

Gold:
Überschriften strukturieren den Inhalt nicht ideal.

Kriterium 1.3.2 - Bedeutungstragende Reihenfolge: Silber

Gold:
Die Slidernavigation (weiter/zurück) sollte vor dem Slider-Inhalt kommen, sonst müssen TastaturbenutzerInnen zurück navigieren beim Weiterschalten.

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

- der weiße Text auf Bildern im Header-Slider hat nicht immer ausreichend Kontrast zum Bild und ist dadurch schwer lesbar; für "großen" Text gilt ein Mindest-Kontrastverhältnis von 3:1

Kriterium 1.4.4 - Textgröße ändern: Silber

Gold:
Bei normaler Bildschirmauflösung (Full-HD = 1920*1080) soll 200% Vergrößerung möglich sein (browser-zoom), ohne dass es zu einer Beschneidung des Inhaltes kommt (durch z.B. die mobile Version). Dh. auf mobile (abgespeckte) Version soll erst später (210%+) umgeschaltet werden.

Kriterium 1.4.11 - Nicht-Text Kontrast: Bronze

Buttons für Vorheriges/Nächstes Element im Slider auf manchen Bildern zu wenig Kontrast.

Kriterium 3.1.2 - Sprache von Teilen: Silber

siehe T00

Gold:
Ein Begriff wird gekennzeichnet, obwohl mehrere vorkommen: <span lang="en">Technology</span>

Kriterium 4.1.1 - Syntaxanalyse: Bronze

- IDs bei SVGs mehrfach verwendet
- Attribut "href" ist für die Links in .blog-footer-links nicht erlaubt, weil role="listitem" gesetzt

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

- Footer Links sind fälschlicherweise als "listitem" ausgezeichnet
Empfehlung: .blog-footer-links als <ul> und nicht mit role="list"

AIT: T14 Blog Detail

Kriterium 1.3.2 - Bedeutungstragende Reihenfolge: Silber

siehe T13

Kriterium 1.4.3 - Kontrast (Minimum): Bronze

Text auf Headerbild hat zu wenig Kontrast

Kriterium 1.4.4 - Textgröße ändern: Silber

siehe T13

Kriterium 1.4.11 - Nicht-Text Kontrast: Bronze

siehe T13

Kriterium 2.4.3 - Fokus-Reihenfolge: Silber

Gold:
siehe 1.3.2 (Slider Buttons)

Kriterium 3.1.2 - Sprache von Teilen: Silber

siehe T00

Kriterium 4.1.1 - Syntaxanalyse: Bronze

siehe T13 (href bei listitem)

Kriterium 4.1.2 - Name, Rolle, Wert: Bronze

siehe T13

AIT: T15 Newsletter

Kriterium 1.3.5 - Zweck von Eingaben bestimmen: Silber

Gold:
- der eingesetzte autocomplete-Wert "email-confirmation" existiert nicht

AIT: T16 Barrierefreiheit

AIT: T17 Presse

Kriterium 1.3.1 - Info und Beziehungen: Silber

Gold:
Überschriften-Hierarchie ist nicht ideal (Kontakt rechts hat keine Überschrift)

Kriterium 3.1.2 - Sprache von Teilen: Silber

siehe T00