Accessibility issue: cannot zoom with ctrl+plus

[snotskie]

The svg containers for Marp slides are set to 100% viewport width and height. When one of my collaborators, who is legally blind with low vision, tries to zoom in on her desktop computer using ctrl+plus as she normally does for websites, the Marp slides do not change size, because they rescale to the new viewport size. In effect, Marp disables zoom.

(In our case, I can let her borrow my touchpad so she can pinch-zoom, which fixes the issue in our case, but not the general accessibility case)

[yhatt]

🚚 Transferred from Marp Core to Marp CLI. The scaling to the viewport is provided by templates by Marp CLI.

For supporting various screen size in the full-screen presentation, HTML slide generated by Marp CLI has fit slides to the viewport size.

In common, the zoom feature of the desktop browser by Ctrl++ / Ctrl+- will zoom the HTML content, but will not zoom the size of actually visible viewport.

And there is not a stable way to get the current zoom level of the desktop browser, so unfortunately scaling the slide along with the browser zoom is difficult.

Workarounds

• Use zoom feature by OS accessibility.
• Use pinch gesture on the trackpad or touch screen. (Recommend to use bare template: bespoke template may disable that due to swipe gesture support)
• Firefox: Enable View → Zoom → Zoom Text Only to zoom the text only.
• Safari: Use Cmd+Opt++ / Cmd+Opt+- to zoom the text only.

Currently I have no better idea to scale along with the browser zoom level correctly, but we welcome any idea to achieve that.

[snotskie]

One idea I've tried (still not perfect, but maybe it works for someone else) is to set a specific width and height to the svg, eg.:

body > svg {
  width: 11in;
  height: 8.5in;
}

That plays well with desktop browser zoom, but looks less nice on mobile, but could be creatively toggled on and off I guess just while developing content before presentation.

[yhatt]

Do you think is the slide scale switch useful, provided by the presenter interface like Slidev? If set it to Fit (default), the slide will fit to the viewport. If set it to 1:1, the slide keeps the original size (1280x720), and viewers can scale the slide by browser's zoom feature.

https://poc-marp-slidev.netlify.app/
https://github.com/yhatt/poc-marp-slidev

[snotskie]

Oh? That is an interesting solution for sure

I ended up creating a similar toggle for our case, with it defaulting to Fit if it detected touch (eg., mobile) where pinch-zoom would be preferred, and 1:1 otherwise (eg. desktop) where browser-zoom would be preferred.