www.pageflow.io Open in urlscan Pro
2606:4700:10::ac43:1a1d  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Diese Website verwendet Funktionen, die Ihr Browser nicht unterstützt. Bitte
aktualisieren Sie Ihren Browser auf eine aktuelle Version.
Bitte aktivieren Sie JavaScript, um diese Website korrekt anzuzeigen.

Zum Inhalt
Imprint

Datenschutz
Mail
Facebook
LinkedIn
Twitter




15. August 2022 | #Accessibility #Barrierearmut




WIE DU DIE ZUGÄNGLICH­KEIT 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

Diese Seite wirkt am besten mit eingeschaltetem Ton. Klicke hier, um den Ton zu
aktivieren.

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:



 1. Wähle für den Abschnitt ein Hintergrund-Bild oder -Video aus
 2. 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?

Jetzt kostenlos starten






WEITERE ARTIKEL



Wie Du Web Stories für Smartphones optimierst





Visual Storytelling mit Pageflow Next





Wie Web Stories von Scroll-Animationen profitieren können








PRODUKT

 * Start
 * Pageflow Next
 * Login
 * Tarife


RESSOURCEN

 * Blog
 * Helpdesk


ÜBER UNS

 * Impressum
 * AGB
 * Datenschutz


FOLGE UNS

 * Twitter
 * Facebook
 * GitHub

© 2021 Codevise Solutions