This website uses features that your browser doesn't support. Please upgrade to a recent version of your browser.



15th August 2022 | #Accessibility

How to optimize the accessibility of your web stories



We are asked more and more often if storytelling with Pageflow is accessible. And we like this question because it shows how the accessibility of web stories is becoming more crucial to content creators as time goes on.

However, when it comes to software for creating interactive content, there can be no clear-cut answer to this. After all, as a content creator, you have the decisive components that contribute to low barriers in your own hands.

Essentials are: readability of text, simple language, clear imagery, text tracks, and alternative texts for images, videos, and audio.

In addition, a website should be controllable via keyboard and optimized for screen reader software. How Pageflow can help you to create a web story with as few barriers as possible, you can find out here:







Readability Of text

Sound can be muted again using the speaker icon in the navigation.









High contrast backdrops

The general readability of web pages requires a strong contrast between text and background. With Pageflow, this is especially important because background images and background videos are always displayed full-screen.

Thus, when selecting images and videos, it makes sense to use white font for dark backgrounds and black font for light photos or videos.

But since these backgrounds are rarely just black or white, Pageflow provides a static color gradient that generates additional contrast. You can increase the intensity of the darkening or brightening of backdrops by a slider. In this way, the text becomes legible even on backgrounds that offer relatively weak contrast.





Contrast increase via color gradient

To a certain extent, the color gradient can even darken lighter backgrounds so that one can also read white text on them. The reverse is also possible: the "Invert" option lightens the ground and changes the font color to black. The following video shows the range when creating additional contrast:



✅ You can create sufficient contrast on the desktop.



The problem:

Designing web stories for desktop and smartphones equally well and guaranteeing cross-platform readability is not always possible in the classic version of Pageflow. Depending on the size of the screen, the text often overlaps essential components of a motif, which makes it particularly difficult for users with visual impairments to grasp the content of both layers.

In this example, we can optimize the readability in the mobile version by moving the image section to the right, focusing on the light blue background. Alternatively, we can invert the font color to lighten the backdrop and overlay it with black text.

Use the slider to see the differences between the two variants:



However, the motif would not be visible - or only very faintly - in the mobile version in both cases.



The solution:

To offer an intelligent solution to this problem, Pageflow Next provides you with two new features to stage motifs in the best possible way. The "motif area selection" and the "dynamic shadow" ensure that your protagonists are visible on all devices before being overlaid with text. In addition, there is now another solution with mobile images to optimize smartphone display. We had already introduced this in an earlier article.

Feature #1 Motif Area Selection



In this section, you can see the motif area selection directly in action. Pageflow ensures that the subject is visible when first entering the section.



Set your motifs ideally in scene

Motif selection creates a safe area, pushing the text down as soon as it touches the area you select. To select a motif area, you only need to follow three simple steps:

  1. Select a background image or video for the section
  2. Move the mouse over the button next to the file and click "Select motif area"





3. Select the area of the image that you want to be visible without text initially and click "Save"





The dynamic shadow separates the text from the background and optimizes readability. By itself, the background looks as if it might only work with white text. But using the dynamic shadow, you can create a strong enough contrast even with dark text.

Keep scrolling and see for yourself:









Feature #2 Dynamic Shadow

The dynamic shadow works in conjunction with the static shadow. It gradually increases background opacity as you scroll. Here are the settings from this example:







Text tracks as sound substitute





To improve the accessibility of audio and video, you can upload text tracks as sound substitutes, image descriptions, or subtitles in any number of languages. For example, you may have noticed such a text track in the earlier video.

Text tracks can be .vtt and .srt documents. They ensure that the appropriate text is displayed time-controlled. Here is an example of what a sound replacement track can look like for an inline audio with a poster image:





How to create text tracks

Text tracks are text files using appropriate formatting to be read and played out by video and audio players to match the timeline of a video or audio. They contain information about the time (e.g. 00:00:04.001 --> 00:00:07.001) to display a certain text.

To create such text tracks, you can use numerous online tools, such as VTT Creator (free), happyscribe, or rev. Alternatively, you can create .vtt files yourself. All you need is a simple text editor.





You can easily upload the .vtt or .srt files via the file settings and determine in which language they should be visible as a sound replacement, image description, or subtitles for your audios or videos.



Alt texts, screen readerS and keyboard navigation

All components are designed for keyboard navigation and are screen reader compatible, increasing the accessibility of your web stories.

In addition to the available texts of a web page, screen readers can also read alt texts for images, videos, and audio. You can easily assign these alt texts in Pageflow via the file settings:



How does a screen reader work?

To briefly introduce the general functionality of screen reader software, here is a video of visiting a web page using JAWS:





Conclusion

With this variety of options, Pageflow equips you with all the necessary tools to make multimedia content as accessible as possible and contribute to an inclusive internet. This way, you provide users with sensory or motoric impairments the best possible access to your web story.