Feature: "accessible handout mode"

[salbeira]

Adds a feature to the "a11y" plugin:

The user can click a button in the navigation menu to view the presentation as a single scrollable page instead of a slide deck. This is done so assistive technology can parse and navigate through the presentation as a single document.

In addition this allows us to sunset the handout feature of decker as all of our reveal.js plugins are not activated inside handouts, causing them to lack a lot of features and content conversions.

Also I heared some people like to scroll through presentations on their smartphone rather than swipe around.

The feature is implemented by "kidnapping" the slides into a fake reveal element. This is done so our css rules responsible for layouting are kept the same. The "kidnapping" is necessary because if the slides are kept inside the reveal container, reveal itself randomly re-establishes its layouting and resets all attribute changes that are necessary to enable the scrolling view.

Intersection Observers are used to load and unload iframes and videos that scroll in and out of view.

The feedback plugin is modified so it does not reload the "currentSlide" questions if the handout mode is enabled and instead takes the data from the currently "in view" slide while the handout mode is active.

[mbotsch]

Some more comments and bugs:

• In handout mode, demos/iframes cannot be switched to fullscreen mode, since the intersection observer unloads the content.
• Background images do not work in handout mode. This might be a bit more cumbersome due to Reveal's handling of background content. Same should apply for background videos.
• Vertical sub-slides do not work. When switching back to normal mode the slide order is wrong.
• Let's try to keep the restructuring of Reveal's slide container to an absolute minimum, in order to avoid errors. Try not to change any parent/child relationships, just copy all slides to the handout container. Then try to fix the sub-slide layout with CSS.
• Add comments to your code to make it easier to understand and more maintainable.
• Keyboard navigation by cursor up/down, page up/down, home/end does not work in handout mode.

[mbotsch]

Look's good, thanks! I noticed two more things that do not work:

• Keyboard navigation by cursor up/down, page up/down, home/end does not work in handout mode.
• On tablets and phones one cannot scroll up and down by touch input (hence one cannot scroll at all).

[mbotsch]

I fixed the background images and the touch scrolling issue. The keyboard navigation is still open.

[monofon]

Very nice!

So far, I found one thing that does not seem to work: background interactive iframes.

# ![](/apps/image-zoom.html){.frame .interactive}

Produces an empty slide. The iFrame is nowhere to be seen. The iframe app works as expected if not used on the slide background.

[salbeira]

The keyboard one is a bit of a doozy: The default keyboard behaviour can be restored by disabling reveal's keyboard configuration. None of our custom keyboard commands are available then though.

I am adding a custom keyboard event handler that scrolls the viewport if we are in handout mode.

@monofon Can you list what media elements are available as background elements? (Before you wrote this I thought images and videos are the height of technological advancements in background technology)

[monofon]

Standard Reveal feature: https://revealjs.com/backgrounds/

[mbotsch]

I implemented background videos for handout mode. I guess that background iframes should work in a similar fashion.

@monofon are you using background iframes for your slides? I didn't even know that those existed...

[monofon]

Yes, i do.

[mbotsch]

I just noticed that background videos and background iframes should use data-src instead of src and the intersection observer should then load the content when the slide becomes visible.

[mbotsch]

The ping-pong is getting inefficient. Let me give it a try...

[mbotsch]

@salbeira , @monofon What do you think about those?

• Should we keep the scroll snapping? I like it on the desktop, but not so much on the iPad.
• Should we add plus/minus-buttons for adjusting the zoom level in handout mode? Maybe users want to see more slides, maybe users with a11y needs want to zoom in more.
• Should the explain videos also work in handout mode?

[monofon]

Todschick.

My background iFrames work perfectly. Videos too.

Zoom is nice but:

• Zooming in and out repeatedly seems to pollute the browser history
• Zooming changes the current slide seemingly at random and quite uncomprehensibly

Even my Javascript embeddings work.

Same for my embedded test quizzes.

As to your questions:

1. No snapping to see here. Do I have to enable that somehow?
2. Zoom is good. See above.
3. Probably not.

Tested on 9edf1461c91f77.

[mbotsch]

I found some more quirks. Fixing them required that our UI anchors had to be move from the Reveal element to its parent (the reveal-viewport element). While this seem to be the more natural choice anyway, I had to make several CSS adjustments (presenter mode, (my) poll mode, whiteboard buttons).

Please test once more...