Barrierefreiheit
Überblick
Barrierefreie Webseitenerstellung
Barrierefreiheit ist ... zunächst eine Selbstverständlichkeit, eine gesetzliche Vorgabe und nicht immer ganz einfach einzuhalten.
Rein formal geht es um den Zugang der Inhalte. Diese sollen unabhängig vom Ausgabegerät, den motorischen oder relevanten sensorischen Fähigkeiten der Nutzenden verfügbar sein. Da jedoch eins der wichtigsten Merkmale von barrierefreien Webseiten die Umsetzung nach Standards ist, profitieren alle von entsprechend optimierten Seiten.
Allerdings: Barrierefreiheit ist keineswegs ausschließlich eine technische Aufgabenstellung. Vielmehr müssen die Redakteurinnen und Redakteure mit jedem neuen Inhalt darum ringen.
Tipps für die Typo3 Redaktion: Maßnahmen
Diese Informationen gelten für die redaktionelle Bearbeitung durch die Typo3 Redaktion: Welche Bedarfe gibt es und worauf sollte man achten?
Einfacher und übersichtlicher Webseitenaufbau
- Seite durch aussagekräftige Überschriften strukturieren
- Überschriften als solche definieren
- Sinnvolle Überschriften Hierarchie
- HTML Elemente (Listen, Zitate, Textabsätze, Überschriften, Tabellen, Schalter, Eingabefeld, etc.) nicht zweckentfremden und diese mit HTML-Tags definieren.
- Keine verstecken Elemente, wie z.B. Inhaltselemente ohne Inhalt zur Abstandsregulierung nutzen.
- Rein ästhetische Elemente wie z.B. Rahmen, Linien, etc. wohlüberlegt einsetzen
- Keine verstecken (zweckentfremdete) Elemente zur Gestaltung benutzen
- große und komplexe Tabellen, möglichst vermeiden
- Nur barrierefreie Dokumente, Dateien, etc. in die Seite einbetten
- Videos enthalten Untertitel
- Videos enthalten Audio-Deskription
- Podcasts benötigen Transkripte
- Alle rein visuellen Inhalte (Grafiken, Diagramme, Bild-Tabellen, Fotos und Bilder) haben aussagekräftige Alternativtexte
- Keine Textgrafiken
- Dynamische und einblendende Inhalte (z.B. Slider, Carousel) mit Bedacht nutzen.
- Bei interaktiven Grafiken mit Funktion (z.b. Verlinkung), Ziel angeben (Beispiel „Logo Uni Kassel, Linkziel: Startseite“)
- Beschriftung von Links: aussagekräftiger Linkname + enthält Ziel, keine URL
- Linkname enthält Dateiformat (pdf, jpg, docx, etc. …)
- Unsichtbare Beschriftung = Sichtbare Beschriftung (z.B. Formularfelder)
- Im Text-Editor der Datensätze möglichst keine HTML-Elemente verwenden, sondern mit den vorhandenen Formatierungen arbeiten oder ein passenderes Inhaltselement nutzen (z.B. keine Tabellen im Editor über HTML anlegen, sondern den Datensatz "Tabelle" nutzen).
- Wichtige Bereiche der Seite sind mit Überschriften zur besseren Übersicht zu versehen.
- Die Überschriften H2 und H3 strukturieren hierarchisch, durchgängig nutzen (nicht mischen oder für Markierungen oder Hervorhebungen nutzen)
- Inhaltselementen stets einen Titel/Überschrift geben und ggf. auf "verborgen" setzen, wenn es für die Anordnung auf der Seite selbst keine Relevanz hat.
- Screenreader-Benutzerinnen und Benutzer können immer nur eine Zelle der Tabelle gleichzeitig erfassen, daher Verwendung nur für tabellarische Daten
- große und komplexe Tabellen möglichst vermeiden
- Überschriften von Tabellen nicht nur Fett markieren, sondern diese auch richtig auszeichnen (Überschrift des Inhaltselementes nutzen)
- A-Z Listen
- Gleichbleibende Struktur auch auf Unterseiten
- Seiten nicht überladen
- Erklärvideos einfügen
Bilder, Videos, Podcasts
für hörgeschädigte Nutzerinnen und Nutzer:
- YouTube und andere Applikationen (wie Facebook, Adobe Premiere Pro, …) besitzen eine Funktion zur automatischen Erzeugung von Untertiteln, die anschließend allerdings noch nachbearbeitet werden müssen. (Das kann bei Youtube z.B. im Untertitel-Editor gemacht werden).
für hörgeschädigte Nutzerinnen und Nutzer.
für blinde und sehbehinderte Nutzerinnen und Nutzer:
- Alternativtext für Grafiken, Diagramme, Bild-Tabellen, Fotos und Bilder, in dem die visuellen Inhalte verständlich und nachvollziehbar beschrieben werden.
- Buttons und andere „Funktionsgrafiken“ (interaktive Elemente) mit Links benötigen als Alternativtext einmal die Beschreibung der Grafik (z.B: Logo Unikassel) und das Ziel des Links (z.B. Linkziel: Startseite)
Der Alternativ Text für das Logo auf der Uniwebseite wäre dann: „Logo Uni Kassel, Linkziel: Startseite“. Damit sind diese Buttons und Links auch für blinde und sehbehinderte Nutzerinnen und Nutzer erkennbar. - Ziel eines Links muss auch ohne Kontext erkennbar sein. (Negativ Beispiel: „weiterlesen“, „hier klicken“ ohne Angabe von Ziel); Keine URLS, sondern Link Name soll den Zielinhalt wiedergeben.
- unsichtbare Beschriftungen sollen immer auch den Text der sichtbaren Beschriftung enthalten
- Textgrafiken vermeiden, da Screenreader, das nicht erkennt, und blinde und sehbehinderte Nutzer*innen diese Inhalte nicht wahrnehmen können.
Was ist für das Verständnis des Inhaltes wichtig? Oft sind nicht alle Details für den Inhalt relevant
- Keine Bewertungen, objektive Beschreibung (schlecht: ein schöner blauer Himmel, gut: ein blauer Himmel)
- Kurz und prägnant
für blinde und sehbehinderte Menschen
- Verständliche und nachvollziehbare Beschreibung der relevanten visuellen Inhalte des Videos
- Die Audio-Deskription sollte sich nicht mit den bereits vorhanden Auditiven Elementen des Videos überlagern.
- Neutrale, objektive Beschreibung
- Audio-Deskription sollte von einer (kein Sprecherwechsel) Person gesprochen werden
Leitfaden und gesetzliche Vorgaben
- Barrierefreies Webdesign: Einfach für Alle – eine Initiative der Aktion Mensch (öffnet neues Fenster)
- Einfach für Alle:Einführung Barrierefreiheit (öffnet neues Fenster)
- BIK – barrierefrei informieren und kommunizieren (öffnet neues Fenster)
- Web ohne Barrieren – Leitfaden zur Gestaltung eines barrierefreien Intranets für Autoren (öffnet neues Fenster)
- Barrierefreie-Informationstechnik-Verordnung (öffnet neues Fenster)
- Zugang für alle –Barrierefreie Technologienutzung – Barrierefreiheit (Accesibility) (öffnet neues Fenster)
- Accessibility Checklist 2.0 Download (öffnet neues Fenster)
- Barrierefreie Inhalte – ein Schnelleinstieg (Technische Universität München) (öffnet neues Fenster)
- Der richtige Alternativtext (Barrierefreies Webdesign) (öffnet neues Fenster)
- Gut fürs Image:Praxisleitfaden zur Erstellung textbasierter Alternativen für Grafiken (öffnet neues Fenster)