15. August 2022 | #Accessibility #Barrierearmut
Wie du die Zugänglichkeit Deiner Web Stories optimierst
Wir werden immer häufiger gefragt, ob das Storytelling mit Pageflow barrierefrei ist. Und uns gefällt diese Frage, weil sie zeigt, wie die Zugänglichkeit von Web Stories mit der Zeit immer stärker ins Bewusstsein von Medienschaffenden rückt.
Bei einer Software für die Erstellung von Webseiten kann es darauf allerdings keine eindeutige Antwort geben. Denn entscheidende Komponenten die zur Barrierearmut beitragen hast Du als Content Creator selbst in der Hand.
Besonders wichtig ist dabei die Lesbarkeit von Text, einfache Sprache, eindeutige Bildsprache, sowie Textspuren und Alternativ-Texte für Bilder, Videos und Audios.
Zudem sollte eine Webseite natürlich per Tastatur steuerbar und für die Nutzung von Screen Reader Software optimiert sein. Wie Dir Pageflow dabei helfen kann, eine möglichst barrierearme Seite zu erstellen, erfährst Du hier:
Lesbarkeit von Text
Der Ton kann über das Lautsprecher-Symbol in der Navigationsleiste wieder deaktiviert werden.
Kontrastreiche Hintergründe
Für die generelle Lesbarkeit einer Webseite bedarf es einem starken Kontrast zwischen Text und Hintergrund. Bei Pageflow ist das besonders wichtig, da Hintergrund-Bilder und Hintergrund-Videos stets bildschirmfüllend angezeigt werden.
So ist es bei der Auswahl von Bildern und Videos sinnvoll für dunkle Hintergründe auf weiße Schrift und für helle Bilder oder Videos auf schwarze Schrift zu achten.
Da diese Hintergründe jedoch eher selten nur schwarz oder weiß sind, stellt Pageflow einen statischen Farbverlauf bereit, der einen zusätzlichen Kontrast generiert. Die Intensität der Abdunklung oder Aufhellung wird dabei per Schieberegler bestimmt. Auf diese Weise wird Text auch auf Hintergründen lesbar, die an sich einen eher schwachen Kontrast bieten.
Kontrasterhöhung per Farbverlauf
Bis zu einem gewissen Grad können durch den Farbverlauf sogar hellere Hintergründe soweit abgedunkelt werden, dass auch weißer Text darauf lesbar wird. Andersrum genauso: Die Option "Invertieren" sorgt für eine Aufhellung des Hintergrunds und ändert die Schriftfarbe auf schwarz. Das folgende Video zeigt die Bandbreite bei der Herstellung von zusätzlichem Kontrast:
✅ Auf dem Desktop lässt sich ein ausreichender Kontrast herstellen
Das Problem:
Web Stories für Desktop und Smartphones gleichermassen gut zu gestalten und plattformübergreifende Lesbarkeit zu garantieren ist in der klassischen Version von Pageflow bislang nicht immer möglich. Denn oftmals überlagert der Text je nach Größe des Bildschirms essentielle Bestandteile eines Motivs. Das macht es besonders für Menschen mit visueller Beeinträchtigung schwer, die Inhalte beider Ebenen zu erfassen.
In diesem Beispiel kann die Lesbarkeit in der mobilen Variante optimiert werden, indem der Bildausschnitt nach rechts, also auf den hellblauen Hintergrund verschoben wird. Alternativ dazu kann die Schriftfarbe auch invertiert werden, um den Hintergrund aufzuhellen und mit schwarzer Schrift zu überlagern.
Benutze den Schieberegler, um die Unterschiede der beiden Varianten zu sehen:
Das Motiv wäre in der mobilen Version allerdings in beiden Fällen nicht bzw. nur sehr schwach sichtbar.
Die Lösung:
Um auf diese Problematik eine intelligente Lösung anzubieten, stellt Pageflow Next nun zwei neue Features bereit um Motive bestmöglich in Szene zu setzen. Die "Motivauswahl" und der "dynamische Schatten" sorgen dafür, dass Deine Protagonisten auf allen Geräten gut sichtbar sind, bevor sie von Text überlagert werden. Darüberhinaus gibt es mit den "Mobilen Bildern" nun eine weitere Lösung, um die Darstellung auf Smartphones zu optimieren. Diese hatten wir bereits in einem früheren Artikel vorgestellt.
Feature #1 Motivauswahl
In diesem Abschnitt kann man die Motivauswahl direkt in Aktion sehen. Durch das Markieren eines Motivbereichs wird das Motiv zunächst freigestellt. So stellst du sicher, dass essentielle Bildausschnitte vollständig zu sehen sind, bevor sie anschliessend mit Text überlagert werden.
Motive perfekt in Szene setzen
Die Motivauswahl schafft eine Safe Area, drückt den Text - einfach gesagt - nach unten, sobald er an der Fläche anstösst, die du auswählst. Um einen Motivbereich zu markieren bedarf es nur drei einfachen Schritten:
- Wähle für den Abschnitt ein Hintergrund-Bild oder -Video aus
- Fahre mit der Mouse über den blauen Button neben der Datei und klicke auf "Motivbereich auswählen"
3. Wähle den Bereich des Bildes aus, der zunächst ohne Text zu sehen sein soll und klicke auf "Speichern"
Um den Text nun noch stärker vom Hintergrund abzuheben und die Lesbarkeit zu optimieren, folgt hier der Einsatz des dynamischen Schattens.
Das nun folgende Hintergrundbild lässt an sich ja eigentlich darauf schliessen, dass nur weißer Text für eine Überlagerung sinnvoll ist. Doch anhand des dynamisches Schattens kann ein so starker Kontrast hergestellt werden, dass auch dunkle Schrift funktioniert. Scrolle weiter und sieh es selbst:
Feature #2 Dynamischer Schatten
Der dynamische Schatten arbeitet im Zuammenspiel mit dem statischen Schatten. Je stärker diese beiden Effekte ineinander greifen, desto höher wird die Intensität durch das Scrollen getriggert. Hier die Einstellungen von diesem Beispiel:
Textspuren Als Ton-ersatz
Um die Barrierearmut für Audios und Videos zu verbessern, können auch Textspuren als Ton-Ersatz, Bild-Beschreibung oder als Untertitel in beliebig vielen Sprachen hochgeladen werden. In dem zuvor verwendeten Video ist Dir eine solche Textspur vielleicht schon aufgefallen.
Als Textspuren können .vtt- und .srt- Dokumente genutzt werden. Sie sorgen dafür, dass zeitgesteuert der passende Text angezeigt wird. Hier ein Beispiel, wie eine Ton-Ersatzspur bei einem Inline Audio mit Posterbild aussehen kann:
Textspuren erstellen
Textspuren sind Textdokumente, die anhand einer entsprechenden Formatierung von Video- und Audio-Playern ausgelesen und passend zur Zeitachse eines Video oder Audios ausgespielt werden können. Sie enthalten Informationen über den Zeitraum (z.B. 00:00:04.001 --> 00:00:07.001) in dem ein bestimmter Text angezeigt werden soll.
Um solche Textspuren zu erstellen, kannst Du auf zahlreiche Online-Tools zurückgreifen, beispielsweise VTT Creator (kostenlos), happyscribe oder rev. Alternativ kannst Du .vtt Dateien aber auch selbst erstellen. Dazu benötigst Du nur einen einfachen Text Editor.
Die .vtt- oder .srt.-Dateien kannst Du über die Datei-Einstellungen ganz einfach hochladen und bestimmen, in welcher Sprache sie als Ton-Ersatz, Bild-Beschreibung oder als Untertitel für Deine Audios oder Videos angezeigt werden sollen.
Alt-Texte, Screen Reader und Tastatur-Steuerung
Um die Zugänglichkeit von Pageflow Stories zu erhöhen sind alle Komponenten auf die Navigation per Tastatur-Steuerung ausgelegt und Screen Reader-kompatibel.
Neben den allgemeinen Texten einer Webseite können Screen Reader auch Alt-Texte für Bilder, Videos und Audios vorlesen. Und diese Alt-Texte können in Pageflow ebenfalls ganz einfach über die Datei-Einstellungen vergeben werden.
Wie funktioniert ein Screen Reader?
Um die generelle Funktionsweise einer Screen Reader Software kurz vorzustellen, hier ein Video über den Besuch einer Webseite unter Verwendung von JAWS:
Fazit
Mit dieser Vielzahl an Optionen stellt Pageflow Dir alle notwendingen Tools zur Verfügung, um multimedialen Content so barrierearm wie möglich zu gestalten und Deinen Teil zu einem inklusiven Internet beizutragen. Damit gewährst Du Menschen mit sensorischen oder motorischen Einschränkungen den bestmöglichen Zugang zu Deiner Web Story.
Willst auch Du Deine cross-medialen Inhalte in eine beeindruckende Web Story verwandeln?
Weitere Artikel