Barrierefreiheit von Webseiten
Teilhabe ist ein Menschenrecht und damit ist die Barrierefreiheit von Webseiten nicht nur Notwendigkeit sondern längst Qualitätsmerkmal und Wettbewerbsfaktor.
Barrierefreiheit dient allen!
2019 betrug der Anteil schwerbehinderter Menschen an der gesamten Bevölkerung in Deutschland 9,5%. Dazu zählen alle Menschen die von offizieller Stelle einen Behinderungsgrad von mind. 50% anerkannt bekommen haben.
Für diese Menschen sind wir gesetzlich verpflichtet, Webseiten barrierefrei anzubieten.
Die Zahl der Menschen, die von Barrierefreiheit profitieren, ist jedoch weit größer, z.B. Menschen,
- deren Grad der Beeinträchtigung nicht ganz so stark ist,
- deren Beeinträchtigung vorübergehend ist (z.B. durch einen Unfall oder eine Krankheit) oder
- die in einer Situation sind, durch die sie beeinträchtigt werden (z.B. laute Umgebung).
Webredakteur*innen
Worauf man beim Webseiteninhalt achten muss
Geben Sie jeder Seite mit Überschriften eine Struktur
- Geben Sie jeder Seite eine Seitenüberschrift in Layout 1 (H1).
- Gliedern Sie Abschnitte der Seite hierarchisch mit Überschriften in Layout 2-4 (H2-H4)
Screenreader-Benutzern wird diese Struktur zu den eigentlichen Überschriften vorgelesen. Sie können damit den Aufbau der Seite und die Struktur des Inhalts leichter erfassen.
Bieten Sie alternativen Text und Bildunterschrift für alle Bilder und Grafiken
Ein Bild ohne alternativen Text wird von einem Screenreader einfach als "Bild" angekündigt. Hier fehlten dem Screen Reader Benutzer wichtige Informationen, die Sie als Redakteur*in mitgeben müssen.
Formulieren Sie zwingend für jedes Bild und jede Grafik einen alternativen Text.
Dabei gilt:
- ausführliche Beschreibung ohne Interpretation
- Von wichtig zu nebensächlich
- Schmuckgrafiken ohne inhaltlichen Beitrag können so benannt und nur kurz beschrieben werden.
Eine Bildunterschrift ist nicht vorgeschrieben. Sie hilft aber allen Seitenbesuchern bei Orientierung und Verständnis des Gezeigten. Die Bildunterschrift beschreibt den Bildinhalt nur knapp.
Beispiel für den alternativen Text des nebenstehenden Bildes:
Ein Mann, der auf der Lehne einer Bank sitzt, reicht einem zweiten Mann eine Dose Bier. Beide Männer tragen Freizeitkleidung und im Hintergrund ist eine Kühlbox zu sehen. Der zweite Mann sitzt in einem Rollstuhl.
Bieten Sie zusätzlich Untertitel, Transkription und Deskription für Videos an
Menschen mit einer Beeinträchtigung des Hörens benötigen eine Transkription des Videos und Untertitel im Video, um einem Video bestmöglich folgen zu können. Diese kommen auch all den Menschen zugute, die sich z.B. in einer Umgebung befinden, in der sie den Ton des Videos auch nicht hören können.
Eine Transkription ist die Verschriftlichung des gesprochenen Wortes. Ein Akkordeon-Element eignet sich besonders gut, um ein Transkript unterhalb des Videos einzubinden.
Untertitel werden im Video selbst zu dem Zeitpunkt eingeblendet, in dem die Worte im Video gesprochen werden.
Menschen mit einer Beeinträchtigung des Sehens benötigen eine Beschreibung des visuellen Inhaltes des Videos. Wenn eine Audiodeskription (hörbare Beschreibung) nicht möglich ist, kann die Deskription mit der Transkription kombiniert werden.
Wann wird was benötigt? Untertitel eignen sich besonders für Videos, in denen Handlung und Gesagtes am besten zeitgleich erfasst werden (z.B. Kinofilme). Ein Transkript ermöglicht, das Gesagte aus dem Video im Ganzen zu erfassen. Denn oft ist es schwierig, dem Filmverlauf und gleichzeitig den Untertiteln zu folgen. (z.B. Anleitungsvideo)
Wenn Sie Ihre Videos auf http://vcm.uni-kl.de hochladen, können Sie diese automatisch untertiteln lassen. Die Spracherkennung ist dabei recht gut, benötigt aber auch noch leichte händische Korrekturen.
Videos auf YouTube bekommen automatisch Untertitel, die inhaltlich sehr gut sind.
Eine Transkription ist leider nicht so einfach zu erstellen. Sie wird am einfachsten aus den automatisch erstellten Untertiteln kopiert.
Beispiel Transkription des Beispiel-Videos mit Beschreibung der visuellen Inhalte
[Kathrin Kunert]
Herzlich willkommen an der technischen Universität Kaiserslautern. Mein Name ist Kathrin Kunert und ich leite das studierenden Service Center bei uns auf dem Campus.
[Im Studierenden Service Center. 2 Arbeitsplätze mit Mitarbeiter:innen]
Mein Team und ich stehen Ihnen gerne bei Fragen rund um das Studium gerne zur Verfügung.
[Musik, Kameraflug mit Drohne über den Campus und rund um den runden Verwaltungsbau 47]
An der RPTU erwartet sie vor allem erst mal eine Campus Uni. Das heißt, alles was sie für ihr Studium brauchen das erreichen sie innerhalb von wenigen Minuten zu Fuß ganz bequem. [...]
Den Umgang mit den neuen Content Elementen bzw. einen anderen Umgang mit den
0:01
alten Content Elementen zeige ich Ihnen jetzt hier bei uns im Schulungs System.
0:07
Das können Sie auch immer erreichen. Das geht unter t3coach.rhrk.uni-kl.de
0:12
Und dort gibt es eine Seite.
0:19
Als erstes gibt es eine Übersicht über unsere Schulungen, aber auch eine Seite, die heißt Sandbox und die habe ich hier aufgerufen.
0:21
Wir haben hier in diesem System Ihnen zur Verfügung gestellt ein Backend User Account, den Sie benutzen können, um beliebig Dinge auszuprobieren.
0:27
Das System wird nachts immer wieder zurückgesetzt, so dass sie täglich ein frisches System vorfinden.
0:36
Und das bedeutet aber auch, dass Sie Ihre Änderungen nicht lange aufheben können.
0:42
Die Backend URL wird hier gleich mit auf der Seite Sandbox angezeigt.
0:47
Das ist T3 Coach aka UNIQA, Oldesloe, TYPO3 und der Benutzername ist T3 Sandbox und das Passwort Sandbox unterstrich T3 steht da,
0:51
kann sich anmelden und das machen wir jetzt bzw. habe ich schon gemacht.
1:02
Ich gehe ins Backend und habe mir unter der Seite Sandbox eine Unterseite angelegt.
1:07
Die heißt im VB im Test ein bisschen größer für sie und wir werden uns als allererstes mit den Rasta Elementen beschäftigen.
1:13
Ich lege jetzt hier auf der Seite ein neues Element an und wir wollen ein Raster Element haben.
1:21
Und Sie sehen hier jetzt schon an dieser Übersicht, dass wir jede Menge neue Spalten Größen haben, die bedeutenden Spalten Größen sind,
1:30
die meines Erachtens nach die mit jeweils 33 33 33 prozent, mit 66 33 umgekehrt die 50 50 und die 80 prozent breiten.
1:42
Warum nicht mehr die mit den 25 prozent Größe?
1:58
Wir haben eine deutlich größere Schriftgröße als bei unserem letzten Layout.
2:03
Dabei ist die größte Breite in der Desktop Darstellung nicht so sowieso so viel größer geworden, je nachdem wie lang die Worte sind, die wir haben.
2:10
Und die sind hier an der Uni echt teilweise enorm lang.
2:22
Und wie viel Text da drin steht, sind die 25 prozent Spalten Größe einfach zu schmal für Content.
2:25
Das werden sie auch sehen, wenn sie ihre Seiten betrachten. Da lohnt sich ein Wechsel auf die 33 prozent, also mit Reichhaltigkeit Prinzip.
2:33
Wofür benutzt man die 80 prozent?
2:42
Manchmal möchte man ein Element schon über die gesamte Seiten breite anzeigen, aber eben doch nicht ganz so übergroß.
2:46
Dann legt man sie in eine 80 prozent Spalte hinein.
2:54
Ich glaube, genau das machen wir hier mal.. Ich nehme mal 80 prozent Breite.
2:58
Wir können hier weiterhin Überschriften geben.
3:05
Ein kleiner Fehler, der noch im Template ist, der aber schon Report wurde und behoben werden sollte, ist.
3:08
Wenn hier auch keine Unterschrift drin ist, stimmen die Abstände teilweise nicht so ganz nach innen im Raster Element.
3:15
Aber das werden Sie sehen und ich hoffe, dass es bald behoben.
3:26
80 prozent spalten Breite und das haben wir schon ausgewählt.
3:35
Sie sehen hier bei Raster Layout kann man noch mal auch noch mal was anderes auswählen.
3:40
Wir speichern und schließen und jetzt legen wir einfach mal einen Moment hier rein und nehmen einfach mal ein Bild.
3:45
Nur mal drei Spalte.
3:59
Ich muss man aufpassen, wenn im Text und Medien ich schreibe kein Text rein, lege aber im Bild rein, die den Datei hinzufügen zum Beispiel.
4:01
Bilder haben wir hier.
4:14
Da könnten wir auch mal neuere haben und größere.
4:18
Ich versuche es groß zu finden. Ich nehme das hin und speichere und lass es anzeigen.
4:24
Wir haben immer so ein Springen vom Template, das schalten wir baldmöglichst ab.
4:33
Also ich gehe noch mal nach ganz oben.
4:40
Wir sprechen hier bei diesem Template überhaupt immer von verschiedenen Breiten, und zwar einmal von Fenster Breite.
4:42
Das betrifft auch diesen Rahmen ganz außen, wo normalerweise auch kein Konnten.
4:50
Dann haben wir die Content Breite, die hier so geht.
4:55
So an dieser. Linie hier senkrecht nach unten. Jetzt sieht man, dass dieses Bild hier 80 prozent Spalten Breite hat.
4:59
Ich habe ihn hier jetzt mal eine Seite aufgerufen, auf der alle neuen Raster Element Größen sichtbar werden.
5:08
Wir haben hier ein Spalte 100 prozent, 80 prozent zweimal 50 prozent 75 25 und das ganze auch umgekehrt.
5:16
Das hat mir total gefehlt. Vorher ein 66 33 und umgekehrt.
5:26
Dann den 3. Spalte mit 50 25 schon 20 prozent umgedreht 25 25 50 prozent, 3 mal 33 prozent, 4 mal 25 prozent.
5:33
Ich glaube, da ist jetzt für alle schon irgendwie was dabei. Das was zu dem was elementen.
Formulieren Sie aussagekräftige Links und nutzen Sie das Titel Attribut
"Zur Seminar-Anmeldung", "Zur Webseite der RPTU", "Hier klicken"
Label für jedes Formular Element
Formular Input-Felder benötigen <label> für Screenreaderzugang. Das Attribut placeholder ist keine Alternative. Bsp. <label for="search">Search</label><input id="search">
Verständlich auch ohne Farben
Farben sollten nicht notwendig sein, um den Inhalt und seinen aktuellen Zustand zu verstehen. Heben Sie zum Beispiel Fehler nicht nur mit rotem Text hervor. Fügen Sie ein Hilfssymbol hinzu.
Worauf man zusätzlich technisch achten muss (Webadmins und -entwickler:innen)
Gesetzliche Vorgaben
Achtung Webseitenbetreiber
Das gilt für jede Webpräsenz/Web-Applikation der Universität einzeln!
- Konform mit BITV 2.0 mind. AA
- BITV (Selbst-)Testung der Webseite
- Erklärung zur Barrierefreiheit mit Ergebnis der Testung und Kontakt zur Durchsetzungsstelle
- Barrierefreie Kontaktmöglichkeit auf jeder Seite
Praktische Ansätze um grundlegende Barrierefreiheit zu erreichen
Nutzen Sie HTML semantisch richtig
Semantisch richtig ausgezeichnetes HTML hilft Screenreader-Benutzern, die Struktur des Inhalts zu verstehen und gibt ihm Bedeutung. Screenreader lesen diese Strukturelemente vor! Fragen Sie sich "Was ist das?", wenn Sie HTML schreiben. Verwenden Sie eine logische Reihenfolge der Überschriften und strukturierende Elemente wie header, footer, nav, ul, p ...
Bieten Sie alternativen Text für Inhalte ohne Text
Alle Inhalte, die nicht durch Text dargestellt werden, sind für Screenreader nicht sichtbar. Geben Sie prägnante Beschreibungen in alt-Attributen für alle Bilder und Textalternativen für Diagramme usw. an. Auch CAPTCHAs müssen zugänglich sein.
Formulieren Sie aussagekräftige Links und nutzen Sie das Titel Attribut
"Zur Seminar-Anmeldung", "Zur Webseite der RPTU", "Hier klicken"
Label für jedes Formular Element
Formular Input-Felder benötigen <label> für Screenreaderzugang. Das Attribut placeholder ist keine Alternative. Bsp. <label for="search">Search</label><input id="search">
Verständlich auch ohne Farben
Farben sollten nicht notwendig sein, um den Inhalt und seinen aktuellen Zustand zu verstehen. Heben Sie zum Beispiel Fehler nicht nur mit rotem Text hervor. Fügen Sie ein Hilfssymbol hinzu.
Wählen Sie kontrastreiche Farben
Je nach Größe von Schrift oder grafischem Element müssen unterschiedliche Kontrastverhältnisse zwischen benachbarten Farben erreicht werden.
Großer Text bedeutet mindestens 18 pt bei normaler Schriftstärke und mindestens 14 pt bei fetter Schriftstärke. Bei AAA (WCAG 2.1-Stufe) beträgt das Kontrastverhältnis 4,5:1. Bei AA beträgt das Kontrastverhältnis 3:1.
Normaler Text bedeutet höchstens 17 pt bei normaler Schriftstärke und höchstens 13 pt bei fetter Schriftstärke. Bei AAA beträgt das Kontrastverhältnis 7:1. Bei AA beträgt das Kontrastverhältnis 4,5:1.
Das Farbkontrastanalyse-Tool von Adobe hilft bei der Überprüfung und beim Finden der richtigen Farbkombinationen.
Erhalten Sie die Funktion von Pinch und Zoom
Das Auf- und Zuziehen zum Zoomen ist weit verbreitet und hilft älteren und sehbehinderten Nutzern. Verwenden Sie diese <meta name="viewport" Angabe: user-scalable="yes". Vermeiden Sie user-scalable="no" und maximum-scale: 1 um jeden Preis.
Machen Sie den :focus sichtbar
Um gut mit dem Keyboard navigieren zu können, benötigt das Element, das aktuell im Fokus ist eine visuelle Hervorhebung. Interaktive Elemente müssen den Fokus in einer sinnvollen Reihenfolge bekommen und generell fokussierbar sein. z.B. Nutzen Sie <button> anstelle von <span>.
Nutzen Sie WAI-ARIA für dynamische Webseiten
Dynamische Websites sind in Bezug auf die Barrierefreiheit oft kompliziert. Der WAI-ARIA-Standard bietet Werkzeuge, um die Barrierefreiheit in dynamischen Anwendungen zu gewährleisten: https://www.w3.org/TR/wai-aria/
Empfohlene ARIA Rollen und Attribute, die stabil in Browsern funktionieren.