Webseiten Betreiber: AIT Austrian Institute of Technology
Webseiten Domain: www.ait.ac.at
Zertifikat Status: Bronze
Zertifizierungsdatum: 27.09.2021
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:
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
Geprüftes Testsample
Abweichungen zur WCAG und WACA-Einstufung
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