Regionales Hochschulrechenzentrum Kaiserslautern-Landau

Barrierefreiheit von Webseiten

Umsetzung gesetzlicher Vorgaben

Über die Vollständigkeit, Richtigkeit oder Aktualität der folgenden Informationen

Die hier zusammen getragenen Informationen entsprechen jeweils dem aktuellen Wissenstand im Typo3 Team. Wir können leider keine Garantie für die Vollständigkeit, Richtigkeit und über die Zeit auch Aktualität dieser Informationen geben. 

Die Informationen beziehen sich zudem auf Anforderungen, denen Typo3 Redakteur*innen beim Erstellen von Seiten und Inhalten begegnen. 

Das Thema Barrierefreiheit und die gesetzlichen Anforderungen sind wesentlich umfangreicher, als sie hier auf der Seite abgebildet werden. 

Deshalb: Bitte recherchieren Sie zusätzlich selbst! Im Zweifel sind Fragen an die Rechtsabteilung der beste Weg. 

Worum geht es?

Teilhabe ist ein Menschenrecht und damit ist die Barrierefreiheit von Webseiten nicht nur Notwendigkeit sondern längst Qualitätsmerkmal und Wettbewerbsfaktor.

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!

Doch die Zahl der Menschen, die von Barrierefreiheit profitieren, ist 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)

Das bedeutet schlicht: wir alle profitieren von Barrierefreiheit! 

Für wen?

Beispiele für Beeinträchtigungen

Gesetzliche Grundlagen

Das gilt für jede einzelne Webseite/Webpräsenz/Web-Applikation der Universität!

  • Die Webseite/Applikation muss den Anforderungen der europäischen Norm  EN 301 549 genügen. Diese entsprechen den „Richtlinien für Barrierefreie Webinhalte (WCAG) 2.1” auf Level AA.
  • Jede Website/-app benötigt eine eigene Erklärung zur Barrierefreiheit mit Ergebnis der Testung und Kontakt zur Durchsetzungsstelle.
  • Barrierefreie Kontaktmöglichkeit auf jeder Seite
Ein Muss für Typo3 Redakteur*innen

Worauf man beim Webseiteninhalt achten muss

Geben Sie jeder Seite mit Überschriften eine Struktur

Screenreader-Benutzern wird die Struktur mit den Überschriften zusammen vorgelesen. Sie können damit den Aufbau der Seite und die Struktur des Inhalts leichter erfassen. Darüber hinaus ist die klare Gliederung einer Seite hilfreich für die maschinelle Auswertung des Inhalts z.B. von Suchmaschinen oder KI.

  • Geben Sie jeder Seite eine Seitenüberschrift in Layout 1 (H1).
  • Gliedern Sie Abschnitte der ganzen Seite hierarchisch mit Überschriften in Layout 2-4 (H2-H5), ähnlich wie ein Buch in Kapitel und Unter-Kapitel aufgeteilt wird.
  • Überspringen Sie keine Überschriftenebenen
  • Wählen Sie Überschriften nicht aufgrund ihrer Optik aus

Aussagekräftige Verlinkungen

Formulieren Sie aussagekräftige Linktexte, die Aufschluss über die verlinkte Aktion oder verlinkte Seite geben. 

Vergeben Sie zusätzlich für Verlinkungen das Titel Attribut, wenn der Linktext nicht selbst ausführlich genug ist. Der Titel des Links, soll klar aussagen, welche Aktion ausgeführt wird, oder wohin die Verlinkung zeigt.

Linktext und Link-Titel ähneln sich. Der Titel ist i.d. etwas ausführlicher.

Beispiel für Linktexte: 

  • Gut
    • "Seminar-Anmeldung"
    • "Webseite der RPTU"
  • Schlecht
    • "Hier klicken"

Beispiele für das Titel-Attribut:

  • “Zur Webseite mit der Seminar-Anmeldung”
  • “Zur Webseite der RPTU”

Bieten Sie alternativen Text und ggf. Bildunterschrift für alle Bilder und Grafiken an

Ein Bild ohne alternativen Text wird von einem Screenreader einfach als "Bild" angekündigt. Hier fehlen 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. Der Text soll maximal 80 Zeichen umfassen.

Dabei gilt:

  • ausführliche Beschreibung ohne Interpretation
  • Von wichtig zu nebensächlich
  • Schmuckgrafiken ohne inhaltlichen Beitrag können so benannt 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 sitzt auf einer Bank und reicht einem anderen Mann im Rollstuhl eine Dose Bier. 

Kein Text im Bild!

Texte in Bildern werden von Screenreadern nicht erfasst. Übrigens auch nicht von Suchmaschinen oder aktuellen KI Tools. Sollten Sie Text in Bild aus gestalterischen Gründen nicht vermeiden wollen, schreiben Sie den kompletten Text verständlich als Alternativtext. Nur so kann Ihre Seite eine Prüfung auf Barrierefreiheit bestehen.

 

Zusätzliche Textalternativen für komplexe Grafiken

Besonders komplexe Grafiken benötigen u.U. eine zusätzliche Textalternative. 

Beispiele:

  • Schemazeichnung der Zellatmung (Biologie)
  • Überblick über Module eines Studienganges
  • Organigramm

Bieten Sie eine zusätzliche Textalternative an, wenn der Inhalt der Grafik nur unvollständig durch den Seiten-Text erklärt wird. 

Der Alternativtext des Bildes kann hier lauten: “Komplexe Schemadarstellung von Zellatmung. Beschreibung nach dem Bild.” Unterhalb des Bildes erklären Sie die vollständigen Informationen und Zusammenhänge aus der Grafik z.B. in einem einzelnen Akkordeonelement mit Titel “Beschreibung”. 

Verständlich auch ohne Farben

Farben sollten nicht notwendig sein, um den Inhalt zu verstehen. Heben Sie zum Beispiel Warnungen nicht nur mit roter Infobox hervor. Fügen Sie ein Hilfssymbol hinzu.

Nutzen Sie nicht eine der RPTU-Farben für die eine Zielgruppe und eine andere Farbe für eine andere Zielgruppe, ohne das auch jeweils im Text kenntlich zu machen. 

Bieten Sie 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.

Aktion Mensch zeigt auf der Webseite “Barrierefreie Videos verständlich erklärt” wie es funktioniert!

 

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">