Electronic Accessibility

Last updated: 5/21/2025

There are various ways you can achieve this standard within Storyline, using different combinations of settings and triggers. Whichever method you utilize, make sure to test it thoroughly and account for factors like:

• Ensuring consistent behavior across the various ways learners can play a slide, including using the course player's play button and the Ctrl + Alt + P pause/play keyboard shortcut
• Ensuring screen reader users and non-screen reader users have an equivalent ability to read, or not read, slide content before media is played
  • That is, if screen reader users are somehow prevented from reading slide text before media is played, non-screen reader users should be prevented from reading the slide text as well; if non-screen reader users can read slide text before media is played, screen reader users need to be able to as well
• Keeping media tied to the slide timeline/seekbar (as applicable), so that they start and end together, and so that users can reliably scrub forward and backward through the slide media using the provided controls

Methods of implementing "manual play"

Here are two common methods for implementing "manual play," so that slide media does not autoplay by default. Again, other methods can be utilized so long as all users have an equivalent experience.

Instructions are also provided, further down on the page, for incorporating an autoplay option into these methods.

Implementing "manual play" using a base-layer trigger

This method is simplest to implement. It relies on learners utilizing the course player play button, or built-in play slide keyboard shortcut, and, by default, allows all learners to read and engage with slide content before playing a slide. However, that also means assistive technology users have to execute more key presses, reading or tabbing through the slide, before they reach the play button.

To utilize this method, simply create a trigger that will pause the slide timeline when the slide timeline starts.

Implementing "manual play" using a layer

1. Create a new layer; in these instructions, we'll refer to this as the "manual play layer"
2. Assign the layer the Pause timeline of base layer layer property
3. In the slide's base layer, create a trigger that will show the manual play layer when the slide timeline starts

Those are the fundamental steps involved in implementing this method. However, since this method is often used specifically to facilitate other course behavior, such as including a more visible, in-slide play button and restricting visibility of the slide content until the slide is played, additional steps are often also taken:

4. In the slide base layer, add a trigger that will Hide the manual play layer when the slide timeline reaches 0.01 seconds
   • This trigger will ensure that the manual player layer closes, and does not remain visible, blocking some base layer contents, if learners choose to play the slide using the course player play button or the play slide keyboard shortcut
5. Add a play button within the slide area; give it a Hide this layer when user clicks trigger; and, make it the first element in the slide's focus order (or second element, if the next step [#6] is also taken)
   • A more visible, in-slide play button should help ensure learners play, and listen to, the slide media before proceeding to the next slide, and it will benefit assistive technology users by being available much earlier in the focus order than the course player play button
   • While "Play slide" could be perfectly appropriate alt text for this button, you can also use the button's alt text as another opportunity to programmatically reinforce the slide title/name, which will help screen reader users know where they are within the course — for example, "Play [slide title] slide" as the button's alt text; however, this step is less imperative and impactful if the next step (#6) is also taken
6. Copy and paste into the manual play layer an instance of the slide title (still programmed as a heading of the appropriate level), and position it at the very top of the slide focus order, right above the in-slide play button (if present)
   • This instance of the slide title will also help programmatically reinforce a screen reader user's current location within a course
   • It will also help maintain a fully consistent screen reader user experience by ensuring there is always a heading at the top of the slide area's focus order
   • This instance of the heading should be hidden visually or styled and positioned so it perfectly overlaps with the base layer version of the slide title, creating the appearance of there only be one visible slide title
7. Assign the manual play layer the "Prevent the user from clicking on the other layers" layer property
   • This setting will prevent screen reader users from being able to read and engage with any of the content in the slide's base layer, which may help ensure they play, and listen to, the slide media before proceeding to the next slide
8. Insert a rectangle that covers the entire slide area; position it beneath the in-slide play button; hide it from accessibility tools; and, give it solid fill and less than 25% transparency
   • Specifically, the transparency value should ensure that nothing in the base layer visible beneath the rectangle passes its contrast requirement, because:
     • If the "Prevent the user from clicking on the other layers" layer property is assigned, screen reader users will not be able to read base layer content
     • If screen reader users are prevented from reading base layer content, all users need to be prevented from reading base layer content, to ensure all users have an equivalent experience within the course
     • Users cannot read content if they cannot see it, and under the WCAG definitions, users cannot see content if it fails to achieve its contrast requirement

This method can be modified to allow all users to be able to read and engage with base layer content before playing the slide:

• Do not assign the "Prevent the user from clicking on the other layers" layer property
• Do not cover the slide area with a semi-transparent rectangle
• Ensure the in-slide play button does not block the view of any non-decorative base layer content
• If a slide includes other layers that can be opened and these layers employ the Hide other slide layers layer property, you may need to employ a variable and conditions to ensure that, if a learner opens another layer before playing the slide and then closes that other layer, the manual play layer reappears rather than the slide beginning to play (since the learner wouldn't have actively chosen to play the slide yet); for example:
  • Create a "manual-play-open" True/False variable, with the default value False
  • Add a Set (adjust variable) manual-play-open to true when layer timeline starts trigger to the manual play layer
  • Add a Set manual-play-open to false when user clicks trigger to the in-slide play button
  • Add a Set manual-play-open to false when slide timeline reaches 0.01 seconds trigger to the slide base layer
  • In the other layer(s), modify the layer close button's trigger, so it hides the layer if manual-play-open = False
  • Add an Else clause to that other layer's hide layer trigger, showing the manual play layer, or add a second When user clicks trigger to the other layer's close button, that will show the manual play layer if manual-play-open = True

Incorporating an autoplay option

To incorporate an autoplay option into either of these methods:

1. Create a True/false variable with the default value False, intended to track if the autoplay option is toggled on or not; in these instructions, we'll refer to this as the "autoplay_on" variable
2. Modify the triggers that pause the slide timeline or show the manual play layer, adding If autoplay_on = True conditions