Audio, Bilder und Videos barrierefrei gestalten

Tipps, wie du deine Medieninhalte in verschiedenen Formaten präsentieren kannst.

Zuletzt aktualisiert: 20. Juni 2023

Das Hinzufügen von Audio-, Bild- und Videoinhalten, auch Medieninhalte genannt, ist eine großartige Möglichkeit, deine Website zu verbessern. Überlege jedoch, wie diese Informationen von Besuchern wahrgenommen werden, die den Inhalt nicht vollständig sehen oder hören können.

In dieser Anleitung erfährst du mehr über die alternativen Möglichkeiten, Besuchern deine Medieninhalte zu präsentieren.

Hinweis

Diese Anleitung ist als Ressource verfügbar, um dir den Einstieg zu erleichtern, sollte aber nicht als Rechtsberatung ausgelegt oder verstanden werden. Squarespace kann keine Ratschläge dazu geben, ob deine Website mit spezifischen Gesetzen, Vorschriften oder Standards zur Barrierefreiheit konform ist.

Bilder

Da das Internet ein visuelles Medium ist, können Bilder durchaus wichtig für die Website-Präsentation sein. Daher solltest du dir gut überlegen, wie du animierte Bilder oder GIFs formatieren und welchen Alternativtext du bereitstellen möchtest.

Alternativtext

Beim Scannen einer Seite identifizieren Screenreader Bilder und lesen den Besuchern den beschreibenden Text (Alternativtext) vor. Nimm dir beim Hinzufügen von Alternativtext einen Moment Zeit, um zu überlegen, warum du das Bild überhaupt verwendet hast. Soll es zum Beispiel Informationen vermitteln oder ist es ein dekoratives Element? Was müssen Besucher mit Sehbeeinträchtigungen über das Bild wissen, um auf alle Informationen zugreifen zu können, die sehenden Besuchern zur Verfügung stehen?

Eine bewährte Methode besteht darin, das Bild in wenigen Worten zu beschreiben, so wie du es einem Freund am Telefon beschreiben würdest. Rein dekorative Bilder wie Grafiken, die Inhalte trennen, oder abstrakte Hintergrundbilder brauchen keine Beschreibungen. Es ist wichtig, daran zu denken, dass Alternativtext ein Inhalt auf einer Seite ist. Er sollte klar und prägnant formuliert sein.

Do
  • Berücksichtige den Zweck des Bildes und versuche, diese Bedeutung in 125 Zeichen oder weniger zu vermitteln.
  • Wenn das Bild eine Klick-URL oder eine andere funktionale Verwendung hat, beschreibe die Funktion. Beispielsweise könnte der Alternativtext für ein Bild eines verlobten und lachenden Paares, das auf eine Seite mit Verlobungsfotos verweist, die Beschreibung Ein lachendes, verlobtes Paar. Verweist auf Verlobungsfotos haben.
  • Für Bilder wie Diagramme, Grafiken oder komplexe Grafiken, die eine detaillierte Beschreibung benötigen, kannst du eine Beschreibung des Bildes in der Nähe vom Text auf deiner Website einfügen. Alternativ kannst du eine separate Seite mit einer Beschreibung des Bildes hinzufügen und dann eine Klick-URL vom Bild zu dieser Seite hinzufügen.
 
Nein
  • Begriffe wie „ein Bild von“ oder „ein Foto von“ in deinen Alternativtext einfügen. Hilfstechnologien identifizieren diese automatisch als Bilder.
 

Animierte .gif-Dateien

Du kannst animierte Bilder oder GIFs zu den meisten Bereichen deiner Website hinzufügen. Stelle sicher, dass deine animierten GIFs innerhalb einer Sekunde nicht dreimal oder öfter flackern. Diese Art von Inhalten können Anfälle oder körperliche Reaktionen hervorrufen.

Tipp

Wenn du eine Website der Version 7.1 hast, können deine Besucher einige animierte Funktionen über ihre Geräteeinstellungen deaktivieren. Dadurch sehen sie beim Besuch deiner Website weniger Animationen. Haben Mac-Benutzer beispielsweise eine reduzierte Bildschirmbewegung auf ihrem Gerät konfiguriert, werden Animationen, die du für Hintergrundbildeffekte oder Creative Backgrounds aktiviert hast, für diese Besucher ohne Bewegung angezeigt.

Videos

Beachte beim Hinzufügen von Videos zu deiner Website diese Tipps:

  • Füge synchronisierte Untertitel mit den integrierten Untertitelfunktionen für YouTube und Vimeo hinzu. Auf diese Weise können Zuschauer Untertitel im Video-Block aktivieren oder deaktivieren. Weitere Informationen zum Hinzufügen von Untertiteln findest du auf YouTube und Vimeo .
  • Füge nicht mehr als zwei Hintergrundvideos pro Seite hinzu. Zu viel Bewegung kann für Menschen, die empfindlich darauf reagieren, störend sein.
  • Vermeide Inhalte in deinem Video, die innerhalb einer Sekunde dreimal oder öfter flackern.

Audio

Du kannst Besuchern mit Hörbeeinträchtigungen beim Zugriff auf deine Audioinhalte wie Podcasts helfen, indem du ein Transkript hinzufügst. Um eine gute Struktur deiner Seiten zu gewährleisten, kannst du Transkripte auf „Nicht verlinkt“-Seiten einfügen.

Bewegung

Mit Bewegungen und Animationen kannst du deine Website interaktiver und auffälliger gestalten. Du solltest jedoch sicherstellen, dass Besucher dadurch nicht desorientiert werden. Die Wahl des Designs, insbesondere wenn es um Bewegungen geht, kann sich negativ auf Menschen auswirken, die empfindlich darauf reagieren. Im Folgenden findest du Designelemente, die du dezent verwenden oder ganz vermeiden kannst, um sicherzustellen, dass deine Website vollständig barrierefrei ist.

Parallax-Effekt

Ein Parallax-Effekt liegt vor, wenn sich Hintergrundelemente beim Scrollen mit einer anderen Geschwindigkeit als Vordergrundelemente bewegen. Berücksichtige bei der Verwendung dieser Arten von Effekten die Bedürfnisse von Personen mit Gleichgewichtsstörungen.

Parallax-Effekte können besonders problematisch sein, wenn sie:

  • Viel Platz einnehmen
  • Hinter oder in der Nähe von Text erscheinen
  • Mehrfach auf einer Seite vorkommen

Um Hintergrundbildeffekte zu deaktivieren, befolge die Schritte unter Abschnittshintergrundbilder. Stelle sicher, dass du Ohne als Bildeffekt wählst. Wenn du Parallax-Effekte verwendest, solltest du sie auf einen pro Seite beschränken und die Größe und Tiefe jedes Effekts minimieren.

Weitere Informationen zum Verringern von Bewegungen und Animationen auf deiner Website findest du unter Seitenweite Animationen.

Blinken

Inhalte mit blinkenden oder schnell wechselnden Farben können bei empfindlichen Besuchern Anfälle verursachen. Vermeide nach Möglichkeit Inhalte, die blinken oder ihre Farben schnell ändern, und beachte die folgenden Richtlinien:

  • Der Inhalt blinkt nicht mehr als dreimal pro Sekunde.
  • Er liegt unter den Schwellenwerten für allgemeines Blinken und rotes Blinken.

Die Blink-Schwellenwerte sind für jede Farbe unterschiedlich. Menschen sind von roten Blinkeffekten stärker betroffen als von jeder anderen Farbe.

Du kannst das Photosensitive Epilepsy Analysis Tool von Trace Center verwenden, um das Anfallsrisiko und die Blink-Schwellenwerte zu testen.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.

Audio, Bilder und Videos barrierefrei gestalten