Barrierefreiheit im Web - Tipps und Tricks
Die WU möchte als öffentliche Universität für alle Personen gleichermaßen freien Zugang zu Informationen sicherstellen. Dies betrifft auch den freien und uneingeschränkten Zugang zu Web-Inhalten.
Deshalb freut es uns sehr, dass unser Webauftritt unter www.wu.ac.at seit August die Kriterien zur Erlangung des Web Accessibility Certificate Austria (WACA) erfüllt.
Durch Verleihung des WACA-Zertifikats durch die unabhängige Stelle TÜV Austria - übrigens als erster Universitätsauftritt in Österreich - wurden unsere Bemühungen um Barrierefreiheit und Zugänglichkeit nun offiziell bestätigt und ausgezeichnet.
Nun gilt es, die Qualität unserer Website weiterhin auf diesem hohen Niveau zu halten!
Sie finden hier Tipps und Tricks, wie Sie die Barrierefreiheit mit Hilfe des Contentmanagementsystems (CMS) Typo3 erhöhen können. Die Hinweise sind aber nicht nur für Webmaster interessant, sondern lassen sich auch ganz allgemein auf Unterlagen wie Berichte oder Präsentationen an der WU anwenden.
Inhaltsübersicht:
- 1. Sprache und Text
- 2. Links und Buttons
- 3. Fremdsprachige Inhalten kennzeichnen
- 4. Bilder
- 5. Infografiken, Diagramme und Tabellen
- 6. Gliederungselemente
- Linktipps
-----------------------------------------------------------------------------------------------
1. Sprache und Text
Generell gilt: Einfach, verständlich und sinnvoll.
Leicht verständliche Sätze mit wenigen Fremdwörtern helfen den Nutzer*innen, Inhalte besser konsumieren zu können. Komplizierte Schachtelsätze sollten vermieden werden.
Es empfiehlt sich, Textpassagen linksbündig darzustellen. Insbesondere der Blocksatz führt zu großen Lücken zwischen den Wörtern und erschwert den Lesefluss.
Verwenden Sie für Hervorhebungen die Fett-Schreibweise anstatt der Kursiv-Schreibweise.
Tipp: Texte können anhand eines Lesbarkeitsindex auf Verständlichkeit überprüft werden. Je höher der Index, desto leichter ist ein Text verständlich. Ein entsprechendes Tool zur Berechnung finden Sie unter der Website https://fleschindex.de/berechnen/.
Tipp: Wie Sie zeitgemäß und verständlich formulieren, können Sie im Handbuch „WU versteht sich“ nachlesen. Sie finden dort Formulierungsvorschläge aber auch Empfehlungen für die Schreibweisen im WU-Kontext.
2. Links und Buttons
Verlinkungen sowie Buttons sollten selbsterklärend sein und eine sinnvolle Beschreibung enthalten
Nicht aussagekräftige Linkbezeichnungen wie z.B. „Weitere Informationen finden Sie hier“ oder „weiterklicken“ sollten vermieden werden
⇒ Besser ist es, das Linkziel mit einem erklärenden Text zu beschreiben.
3. Fremdsprachige Inhalten kennzeichnen
Für Personen mit Seheinschränkung ist die korrekte Auszeichnung der Sprache von besonderer Bedeutung.
Englischsprachige Inhalte müssen als englischsprachig ausgezeichnet werden, damit diese vom Screen Reader in der entsprechend Sprache vorgelesen werden können.
Sonst würde ein englisches Wort mit deutscher Betonung vorgelesen.
Tipp: In Typo3 gibt es generell die Möglichkeit, Texte und Wörter als englischsprachig zu markieren.
Idealerweise sollten keine englischen Wörter innerhalb von deutschen Textinhalten vorkommen.
„Neudeutsch“ oder „Denglisch“ sollte vermieden werden.
Ist dies nicht möglich, so müssen einzelne Wörter entsprechend ihrer Sprache ausgezeichnet werden.
Beispiel: Im Satz "Eine Auflistung unserer Benefits finden Sie..." sollte das Wort Benefits als englischsprachig gekennzeichnet werden, da es sich um ein englisches Wort in einem deutschsprachigen Text handelt.
4. Bilder
Bilder und Grafiken müssen immer mit Alternativ-Texten (kurz „Alt-Texten) hinterlegt werden.
Der Alt-Texte soll das Bild und die sich im Bild befindlichen Elemente kurz beschreiben.
⇒ Die Felder für Alt-Texte sind im Typo3 Backend rot markiert.
Beispiel: Ein gut formulierten Alt-Text: „Ein Student und eine Studentin sitzen auf einer Holzbank vor einem rostfarbenen Gebäude am WU Campus und halten ihre Laptops in der Hand“
Tipp: Generell sollten Bilder immer auch mit Bildunterschriften näher beschrieben werden und damit den Alt-Text ergänzen.
Vorschlag für einen Bildtext: Auch nach den Vorlesungen ist der attraktive WU Campus zum gemeinsamen Lernen bei den Studierenden beliebt
5. Infografiken, Diagramme und Tabellen
Komplexe Grafiken, Diagramme oder Tabellen könnten mit Abbildungs- und Alt-Texten beschrieben werden.
Bei Diagrammen und Tabellen sollten Sie auf ausreichenden Kontrast zwischen den Diagrammelementen und Textelementen achten, damit sich Inhalt und Beschreibung deutlich voneinander abheben.
Hinweis: Bei Headerbildern oder Newsbeiträgen werden von Typo3 automatisch Balken oder Farbverläufe unterlegt, um den Kontrast zu erhöhen.
⇒ Sollten Sie selbst eine Grafik mit Bild und Text-Overlay entwerfen, achten Sie bitte auf ausreichend Kontrast.
6. Gliederungselemente
Überschriften helfen dabei, den Seiteninhalt in Abschnitte zu gliedern und längere Texte leichter wahrnehmen zu können.
Definieren Sie ein stimmige Überschriftenhierarchie und achten Sie darauf, dass keine „Löcher“ in der Überschriftenstruktur entstehen.
Auf die Überschrift H1 folgt der Logik nach die Überschrift H2, nicht eine H3 oder eine H4-Überschrift.
Eine weitere Möglichkeit zur Gliederung sind Seitenabschnitte, die den Nutzer*innen ebenfalls helfen, sich auf der Seite besser zurechtzufinden und Texte lesefreundlicher in Blöcke aufzuteilen.
Tipp: Wenn Sie überprüfen wollen, ob die Überschriftenstruktur einer Seite den Vorgaben entspricht, können Sie dies mittels Browser-Plugin „HeadingsMap“ überprüfen.
Fehler in der Hierarchie werden Ihnen rot dargestellt. Unter diesem Link finden Sie das Plugin für Firefox
Hinweis: Weitere Tipps für ein barrierefreies Studieren und Arbeiten finden Sie auf der Website „Barrierefrei, aber wie?“.
Bitte helfen Sie mit, unsere Inhalte allen Personengruppen gleichermaßen zugänglich zu machen!
Linktipps
Offizielle Web Content Accessibility Guidelines (WCAG) 2.0
Tipps und Tricks zur Barrierefreiheit – Blogeinträge: