skip to content

Regional Computing Centre (RRZK)

Barrierefreiheit im Internet

Barrierefreies Internet dient dazu, möglichst allen Personen Web-Angebote nutzbar zu machen – unabhängig von ihren Einschränkungen oder technischen Möglichkeiten. Zudem führen verschiedene Behinderungen zu ungleichen Voraussetzungen bei der Internet-Nutzung. 

Blinde haben beispielsweise die Möglichkeit, ein Bildschirmleseprogramm zu nutzen. Diese lesen die Webseiten ein und geben den Inhalt über eine Sprachausgabe oder eine Braillezeile wieder aus. Braillezeilen stellen Text in Blindenschrift dar.

Öffentliche Einrichtungen sind gesetzlich dazu verpflichtet, ihre Internetangebote barrierefrei zu gestalten. Das „Behindertengleichstellungsgesetz - BGG“ bildet dazu seit 2002 die rechtliche Grundlage.

Tipps zur Barrierefreiheit für Webseiten

Hinweise fürs Layout

  • Achten Sie bei Ihrer Webseite auf einen validen Code.
  • Ihre Seite sollte von allen Browsern auch bei abgeschaltetem JavaScript oder CSS gelesen werden können.
  • Erstellen Sie eine Sitemap, ein Inhaltsverzeichnis der Seite sowie eine Brotkrümelnavigation (breadcrumb). 
  • Erstellen Sie eine schlüssige Reihenfolge von Hyperlinks, Formularelementen und anderem, um eine einfache Navigation durch die Tabulatortaste zu ermöglichen.
  • Verwenden Sie keine blinkende und sich bewegende Elemente.
  • Gestalten Sie die Schaltflächen ausreichend groß. 
  • Ermöglichen Sie das Navigieren sowohl per Maus als auch per Tastatur. Die Bedienung und Navigation per Tastatur ist vor allem wichtig für Nutzer*innen mit motorischen Störungen.
  • Wählen Sie eine kontrastreiche Farben für Schrift und Hintergrund. Als Beispiel: Helle Texte auf hellem, oder dunke Texte auf dunklem Hintergrund sind für Menschen mit Sehbehinderung schlecht lesbar.
  • Strukturieren Sie Ihre Webseiten übersichtlich. Menschen mit Behinderung fällt es so leichter, die Inhalte zu erfassen. Sehbehinderte nutzen häufig eine vergrößerte Ansicht. Eine gute Seitenstruktur ermöglicht auch in diesem Fall eine gute Lesbarkeit.
  • Nutzen Sie keine Tabellen für das Layout. Screenreader können Tabellen fälschlicher Weise als Datentabellen interpretieren, was Verständnis und Lesbarkeit beeinträchtigt.
  • Nutzen Sie keine Framesets.

Hinweise für Überschriften und Inhalt

  • Verwenden Sie sinnvolle, kurze und sprechende Überschriften.
  • Überschriften sollten sauber hierarchisch mit <H1> bis <H5> gegliedert sein (von der größten Titelüberschrift H1 bis zur kleinsten H5).
  • Verwenden Sie <H1> nur einmal pro Seite. 
  • Dies ist auch für Suchmaschinen wichtig.
  • Zur Erklärung: Screenreader navigieren oder „springen“ häufig durch die Seiten anhand von Überschriften. Bei einer uneinheitlichen Hierarchisierung gerät die Lesereihenfolge durcheinander.
  • Verwenden Sie eine einfache und angemessene Sprache.
  • Verwenden Sie kurze Textpassagen.
  • Setzen Sie wenn möglich sinnvolle Absätze. Klare Abgrenzungen und Aufteilung des Textes erleichtern die Lesbarkeit auf dem Bildschirm erheblich.
  • Vermeiden Sie Mixed Content, also eine Vermischung von deutschem und englischem Inhalt, da dies bei Screenreadern zu falscher Aussprache führen kann.
  • Sollten Sie doch Sprachen mischen, markieren Sie fremdsprachige Wörter als solche (bspw. <span lang="en">Website</span> ).
  • Für englischen Inhalte sollte eine deutsche Übersetzung angeboten werden. Nicht alle Nutzer*innen beherrschen die englische Sprache, so dass dies zur Barriere werden kann.
  • Zeichnen Sie Abkürzungen im Text aus. Abkürzungen werden von Screenreadern zum Teil anders interpretiert und vorgelesen, z.B. „PLZ“ als Abkürzung für „Please“. (Bspw. <abbr title="das heisst">d.h.</abbr>) oder verwenden die dafür vorgesehene Funktion Ihres CMS.
  • Setzen Sie sprechende Links (statt „hier“ beispielsweise „Weitere Informationen“).
  • Verlinken Sie URLs (Webadressen) nicht mit der Adresse als Text. Negativbeispiel: „Weitere Infos: https://irgendeinedomain.de/~dlsd1288532/umgr/tss.html“.
  • "Sprechende Pfade" haben sinnvoll lesbare Elemente in der  Adresse, z.B. https://portal.uni-koeln.de/studium-lehre.
  • Doppelte Verlinkung, z.B. auf ein Bild und einen danebenstehenden Text mit demselben Linkziel, sollte vermieden werden.
  • Eindeutige Bezeichnungen sind für den Screenreader und die Navigation mit der Tastatur wichtig, da häufig von Link zu Link gesprungen wird.
  • Verwenden Sie möglichst keine viel-spaltigen Tabellen. Falls Tabellen notwendig sind, achten Sie auf korrekte Zeilen- und Spaltenüberschriften. Tabellen werden von Screenreadern strukturell in Zeilen und Spalten erfasst. Ist diese Struktur einer Tabelle fehlerhaft, können Zeilen und Spalten nicht korrekt zugeordnet und vorgelesen werden.
  • Wenn möglich, ersetzen Sie Tabellen durch Listen.
Hierarchische Darstellung der Überschriften.

Hinweise zu Medien

  • Nutzen Sie grafische Darstellungen und Bilder zusätzlich zum Text – diese können erklärend wirken und so das Verständnis erleichtern.
  • Vermeiden Sie den Einsatz von Bildern als ausschließliche informationstragende Inhaltselemente.
  • Setzen Sie bei Grafiken, Videos und Tabellen einen beschreibenden Titel (HTML-Attribut "title").
  • Setzen Sie bei Grafiken, Videos und Tabellen einen beschreibenden Alternativ-Text (HTML-Attribut "alt") - aber nur wenn der Titel nicht schon ausreichend ist.
  • Hinweise zum alternativen Text (ALT-Attribut): Der "ALT"-Text sollte das Bildes prägnant und nur so ausführlich wie nötig darstellen. Rein dekorative Bilder können getrost einen leeren "ALT"-Text vorweisen.
  • Verwenden Sie keine rein visuellen Anleitungen („Weitere Infos im Bild“, „Klicken Sie auf den grünen Schalter links“). Komplexe Informationen, die ausschließlich im Bild dargestellt werden, stünden Nutzenden mit Sehbehinderung nicht zur Verfügung.
  • Wenn möglich, setzen Sie bei Videos Audiodeskriptionen ein, oder bieten Sie einen alternativen Text zum Video an.
  • Verwenden Sie keine IFRAMES.
  • Verwenden Sie möglichst keine Imagemaps. Imagemaps sind grafische Inhaltselemente, die mittels Tooltipps (Infofenster bei Mauszeiger-Überfahrt) oder Klick, Nutzer*innen zusätzliche Informationen anbieten. Menschen, die auf Tastaturnavigation angerwiesen sind, werden hier benachteiligt. Interaktive Bildelemente müssen korrekt ausgezeichnet sein.

Tipps für Webseiten mit TYPO3

Für TYPO3 haben wir Ihnen weitere Hinweise und Anleitungen zum Anfertigen barrierearmen Webseiten zusammengestellt.

Weitere Informationen zur Barrierefreiheit und Rechtliches

Weitere Informationen zur Barrierefreiheit:

Rechtliches und Richtlinien zur Barrierefreiheit:

Contact
If you have any questions or problems, please contact the RRZK-Helpdesk