Storyline 360 recommandations

Recommendations for making an accessible e-learning presentation.
Note : in addition, the general editorial recommendations (colors, make reading easier, etc.) must also be applied, but are not described in this article.

Personalize the user experience from the start #

Provide instructions from the first slide #

Users must be able to know and anticipate the navigation mechanisms.

  • Provide textual instructions from the first slide
  • These instructions provide all the shortcuts specific to e-learning
  • For screen reader users, we suggest adding keyboard navigation instructions
If keyboard shortcuts are defined, they must be announced from the first slide.

Give the choice between different profiles #

The goal of accessibility is to provide a single interface that can be used by all users.
However, e-learning has specific features, such as serious games for example, which can prevent the implementation of an interface without degradation of the experience for all users.
The solution is therefore to offer the choice of profiles.
The content (serious game, exercises, etc.) can be adapted to the context of each user.

  • Propose alternative mechanisms (example: replacing a drag n’drop system for example)
  • Offer additional content (example: addition of detailed descriptions for screen readers)
In this example, alternative Serious Games are offered to blind users.

Allow to use the main functions of the application through a keyboard interface #

This is to allow users who cannot use the mouse (blind, motor impaired, etc.) to access the main functionalities of the application from the keyboard.

  • Ensure that all interactive elements are usable from the keyboard
  • Focus on native components (radio, checkbox, button) offered by Storyline
  • Do not use systems that only rely on mouse interaction, such as:
    • drag n’drop
    • the "hover" state to transmit important information

Make the focus visible in all circumstances #

A visible focus indicator allows keyboard users to know which component is currently active.

  1. Activate "Player properties"
  2. Select "Colors & Effects"
  3. Change the default focus color

 

Ensure that the user keeps control during interactions #

Know the result of your actions #

The results of quizzes in particular must be perceived by all users.

  • Use Storyline's native notification components (feedback layers)
  • Start a vocalization of the result after submission by the user
In this example, the result "Not quite ... All of the above are correct!" is vocalized by a voice-over

Avoid time limits #

All users must be able to complete their actions without unexpected behavior, such as a slide change for example.

  • Avoid time limits to complete an exercise or a quiz, read content
  • If a time limit is essential for carrying out an exercise, offer an alternative (possibility of deactivating or modifying the time limit, or proposing a different exercise depending on the profile for example)

Conversely, it may be useful to specify the time required for viewing alternative content, or viewing e-learning.

Organize objects and texts in a logical way #

For all users, whatever their method of browsing (screen reader, screen magnifier, keyboard navigation), the reading order of the components on the screen will correspond to the reading direction of the language of the document (therefore from left to right and from top to bottom for an interface in French for example)..

  • In general, make sure to reproduce a logical reading order (left to right and top to bottom depending on the language used)
  • Make sure that the order of the items allows the information to be understood. For example, in a questionnaire make sure that users move the focus or vocalize first on the question, then on the choice of answers
  • If control buttons are used (submit button, next button), place them at the bottom right of the slide, so that they are read last
  • Avoid layouts on several columns so as not to disrupt the understanding of information

The procedure:

  1. Activate the "Focus order" function
  2. The "Focus Order" dialog box opens. This centralizes all the elements of the slide
  3. Select "Create a custom focus order"
  4. Select an item
  5. Use the "up / down" arrows to change the order of the item
  6. Activate "save"
Storyline allows all items to be rearranged with the "Focus Order" option.
The order of items on the screen does not always match the order of items in the source code. The order of the elements in the source code will have an impact when reading from a technical aid, such as a screen reader for example.

Give a title to the presentation and slides #

Presentation title #

The presentation title must be explicit.
It allows end users to identify the training in their browser.
This is especially important for users of screen readers.

The procedure:

  1. Click on Publish
  2. Go to the "Web" tab of the dialog box
  3. Complete the "Title" field
Click on Publish, then fill in the Title field.
The title appears in the browser tab.

Slide title #

The slide title should also be self-explanatory.
It allows end users to understand the context of each new slide.
Especially screen reader users, indeed this element will be vocalized automatically upon arrival on a new slide.

 
Double click on the title of the slide to modify it.

Structure the content with headings #

Apply heading styles to texts presented as heading.
Headings are essential for screen reader users to understand the structure of content and navigate easily within it.

 
Use the appropriate styles (from Heading 1 to Heading 4).

Provide relevant alternative texts #

Alt text is essential for blind users.
It is this content that will be vocalized.

List of 3 buttons : anticiper (anticipate), gérer (manage), communiquer (communicate), based on images.
  • Invalid alternative: button-gerer-1.png
  • Valid alternative: Gérer

The recommendations:

  • For images with text, the alternative text includes the textual content present in the image
  • For buttons and other form elements, the alternative text conveys the target or the action carried by the button
  • It is counterproductive to begin texts with "image of". Be concise and provide only the information that is necessary for the user
  • Avoid abbreviations and repetition of punctuation elements
Example of an image that conveys information:
  • Invalid alternative: coche.png
  • Valid alternative: hearing impaired sequence already consulted

The procedure:

  1. Activate the "Focus order" function
  2. The "Focus Order" dialog box opens. This centralizes all the elements of a slide
  3. Enter the alternative text of buttons or objects carrying information
  4. Click on "Save"
Alternative texts can be defined from the "Focus order" panel.

 

Hide decorative images #

An image is considered decorative when it does not provide additional information for the understanding of a text or a feature.

It is recommended that you hide these items from screen reader users.

Profits :

  • Lighten vocalization, avoiding the reading of information useless to understanding the content
  • Simplify keyboard navigation by removing unnecessary elements from the keyboard path
Examples of decorative images, in these contexts, the figures or the table leg do not provide any information. They can therefore be hidden from users of technical aids.

The procedure:

  1. Right click on the image
  2. Select "Accessibility" in the menu
  3. The "size and position" dialog box opens
  4. The "Accessibility" tab is open by default
  5. Uncheck the box "The object is visible ..."
  6. Click on "close"
 

Indicate the main language of the document #

Defining the language of a document will allow screen readers to adapt their vocalization to the language of the content.

The procedure:

  1. Select "player - modify reader properties"
  2. Select "text labels"
  3. In the "language" drop-down menu, select the language corresponding to the document
  4. Edit the texts in the "personalized text" column
  5. Click on “OK”

 

Audio or video content #

  • Provide transcription for audios and videos
  • Do not start audio or video automatically
  • If the media starts automatically, make sure the user has the option to stop it manually

 

Accessible audios #

Some formations have a vocalization of each slide (voice over):

  • If the voice provides information not present in the content of the slide, then subtitles are necessary.
    Storyline enables the creation of synchronized captions.
  • Make sure that all textual content on the slide is vocalized, so as not to mislead blind users who may rely solely on audio and not manually view all of the slide's content.
Give the possibility to users to activate the subtitles from the beginning of the presentation.

Accessible videos #

See Accessibility of video, animation and audio content to learn more.

Ressources #