Lectora 17 WBTs: Accessebility on all (mobile) devices

tbeutler9950

I used to create digital trainings for internal staff only, but recently started to offer WBTs for customers as well.

This led me to a variety of challenges, most of all the accessibility on mobile devices/ all desktop browsers.

 

Since mobile device browsers disable any sort of auto-play for audio/video, I cam across two work-arounds:

(1) Browser Detection with Lectora

Sergey Snegirev suggests a javascript extension that ensures that a play button will be shown on each page with audio for mobile devices.

(2) Detecting Mobile Platforms the Smart Way for Lectora

Randy of the elearning brothers suggests to show an overlay on each page that the user has to click on to start the page for mobile devices. This is based on a variable that recognizes if the device is not a desktop/laptop with a Win/Mac/Linux OS.

 

Since I use auto-play for audio/video on every single WBT page, both solutions force users of mobile devices to start every single WBT page manually with a click which leads to a bad user experience in my opinion.

 

Is there any other solution out there?

 

Besides this, does anyone have experiences in cross browser testing for WBTs, especially developed with Lectora 17?

 

Any kind of advice and/or suggestions are highly appreciated

timk

According to the release notes for Lectora 17, titles published with "Seamless play" do autoplay on mobile devices, but I haven't yet tested whether this is true.

Lectora has an in-built variable called "CurrentView" that tells which of the 5 views is currently displayed: Desktop, TabletPortrait, TabletLandscape, PhonePortrait, PhoneLandscape. You'll know the user is on a mobile device if CurrentView does not contain "Desktop" and use it to show / hide play and pause buttons or any kind of overlay.

tbeutler9950

Thanks for your reply, Tim!

The WBTs I tested are published with "Seamless play" and autoplay won't work on mobile devices.

The "Responsive title" possibility of Lectora 16/17 with the 5 different views is impossible for me to manage with our WBTs since they are built in a complex manner, so I prefer to include js/CSS extentions for dynamic resizing as shown here (developed by http://www.apixel.com).
<div class="presenseTest"></div>

mnotermans5114

If you bypass the built-in Lectora options, well then Lectora only can assume its a desktop only title, and thus anything related to "responsiveness' and multi-devices you will need to add manually in your Js/CSS.

If you use Bootstrap, that is solved in the library itself. If not you need to do it yourself. Even the Autoplay option might be comprimised by using your approach. I do know a previous version of Lectora17 caused issues with audio and autoplay when the 'accessibility' checkbox was on. Obviously because Autoplay for audio and video is a big breach against 508-accessibility rules. So you actually should get rid of that in your courses, cause when using the strict 508-rules your courses will fail for 508.

Quote straight from .gov:
"However, it’s not recommended to “autoplay” media (to load and automatically play a media file when a web page loads) since it interrupts assistive technologies (AT). Allow your users to choose if they want to listen to the track and provide an on and off button.