Text in revealjs presentations cannot be resized

[cwickham]

A reader cannot make the text in a revealjs presentation larger. This fails WCAG 1.4.4 Resize Text. I am filing this to record the problem. I do not have a fix to propose.

Browser zoom has no effect

Reveal.js scales each slide to fit the viewport. When a reader zooms in with the browser controls, the viewport gets smaller in CSS pixels, and reveal.js scales the slide down to fit it. The text stays the same size on screen. Scroll view has the same result.

To see this, render any deck, open it in a desktop browser, and zoom to 200%:

---
title: "Zoom"
format: revealjs
---

## Slide

Some text.

The template also disables pinch-zoom

The revealjs template hard-codes maximum-scale=1.0, user-scalable=no in the viewport meta tag:

quarto-cli/src/resources/formats/revealjs/pandoc/revealjs.template

Line 18 in 6e7f7ca

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

axe reports this tag on every deck (critical, WCAG 2.0 AA 1.4.4, rule meta-viewport):

Zooming and scaling must not be disabled

user-scalable=no on <meta> tag disables zooming on mobile devices

Removing user-scalable=no clears the axe finding. It does not by itself make text larger, because reveal.js still scales the slide to fit. I did not test pinch-zoom on a device.

Workaround for authors

The quarto-revealjs-a11y extension adds font-size controls for readers. It also rewrites the viewport tag to width=device-width, initial-scale=1.0 when the page loads.

---

Quarto 1.11.4, macOS 26.6.2 (build 25G83).

Investigation was AI-assisted, grounded in a local clone of quarto-cli, per CONTRIBUTING.md's note on using AI tools.

[cderv]

Thanks for the report. I can reproduce both parts, and they have different causes.

The viewport tag is not something we added on purpose. It comes from reveal.js's own index.html (added in 2013 for mobile layout), which Pandoc copied into its revealjs template, and we copied Pandoc's template. The template actually used by Quarto is this one:

quarto-cli/src/resources/formats/revealjs/pandoc/template.html

Line 23 in 39c153e

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

reveal.js already dropped the lock from its demo page in 3.8.0, and allowed pinch gestures on the deck in the same change (source):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

.reveal { touch-action: pinch-zoom; }

#14956 uses the same tag in our template, with a test checking the rendered deck no longer has user-scalable or maximum-scale. I checked in Chromium mobile emulation: with the current tag a pinch gesture does nothing, with the new one the page zooms 3x and the slide does not change. Pinch zoom magnifies the visual viewport and reveal.js does not re-layout for it, so on touch devices the text really gets bigger once the tag is fixed. I still need to check on a real phone that panning while zoomed does not trigger swipe navigation.

Browser zoom is another story. This is how reveal.js layout works: it scales each slide to fit the window, so when zoom makes the window smaller in CSS pixels, the slide is scaled down by the same factor. Same thing in plain reveal.js outside of Quarto. The existing options don't really help: min-scale: 1 lets the text grow but the slide gets clipped, and disable-layout: true lets it grow but the slide no longer fits the screen. Giving readers a way to enlarge text with a slide that still fits needs some design on our side, so I am keeping this issue open for that part after #14956 is merged.

In the meantime, the quarto-revealjs-a11y extension you mention is the workaround for both: it fixes the viewport tag at load and its font-size controls work independently of reveal.js scaling.

[mcanouil]

FWIW, I did the two (and more) in quarto-revealjs-a11y because I wasn't sure it was possible to fix at Quarto level alone and some issues with Reveal.js are long standing issues where the recommended approach was to basically work around it with a plugin.

[cderv]

#14956 is merged, so the next 1.11 prerelease no longer blocks pinch-zoom.

I checked on an iPhone too. Safari was already ignoring user-scalable=no, so pinch worked before, but with the old tag the zoom was reset on each slide change, and now it is kept. One thing remains in slide view: panning left or right with one finger while zoomed changes slide, because reveal.js takes it as a swipe. This was already the case with the old tag. Recent reveal.js has a check for this, but its calls are commented out for now (source), so it looks like one of those long standing reveal.js issues. I'll look at it with the browser zoom part.

@mcanouil makes sense, the viewport tag was the part we could fix at Quarto level. For the browser zoom, we could look at a text-size control like the one in quarto-revealjs-a11y, as reveal.js scaling works against zoom. Did you have to handle swipe navigation while zoomed in the extension ?

[mcanouil]

Did you have to handle swipe navigation while zoomed in the extension ?

No, I didn't handle it in the extension. (I did not think about mobile navigation yet)
The only mobile change I made is making the extension rewrite the viewport tag at load, so it has the same one-finger pan problem you saw in theory.