Examples

The configuration behind the deck.

The a11y options as set on this site’s preview deck, with what each one changes.

The preview deck is built by this site with every control enabled. This page is the configuration behind it.

What the deck sets

format:
  revealjs:
    revealjs-plugins:
      - a11y
    revealjs-a11y:
      skip-navigation: true
      focus-indicators: true
      font-size-controls: true
      font-selection: true
      text-spacing: true
      link-highlight: true
      transcript: true
      pointer-indicator: true
      menu:
        enabled: true
        shortcut: a
        position: right

Most of these are on by default; they are written out so the deck says what it is doing.

Nothing at all

format:
  revealjs:
    revealjs-plugins:
      - a11y

Enabling the plugin alone gives the skip link, the focus indicators, the zoomable viewport, reduced-motion support, the font and spacing controls, underlined links, slide landmarks, the announcements, the transcript, the visual slide change cue, and the settings menu on A.

The pointer indicator, high contrast, the audio cue, and the alt text warnings are the four that start off.

Checking alt text while you write

revealjs-a11y:
  alt-text-warnings: true

Every image with no alt text is outlined, which is what you want while writing and not while presenting. Take it out again before you show the deck to a room.

Turning things off

revealjs-a11y:
  announce-fragments: false
  slide-change-cue: false

Announcements and cues are the ones worth reconsidering on a deck that steps through many fragments at once, where every one of them is spoken.

The pointer indicator

revealjs-a11y:
  pointer-indicator:
    size: 120
    colour: "rgba(178, 34, 34, 0.4)"
    shortcut: p

The pointer indicator is off unless you ask for it. size is clamped to between 16 and 800 pixels, and an invalid value falls back to the default with a console warning rather than failing. It is a ring that tracks the cursor and the keyboard focus, so it only means anything in motion: turn it on in the deck with P and move the mouse.

Slide change cues

revealjs-a11y:
  slide-change-cue:
    visual: true
    audio: false

true enables both; the object form separates them, which is usually what a room full of people wants. Both cues fire on a slide change, so the deck is the place to judge them: move a slide and watch, then turn the audio cue on from the settings menu.

The transcript in print

revealjs-a11y:
  transcript:
    print: true

The transcript is an overlay in the browser, toggled with T. With print: true it is also written below each slide in print-pdf output, which is the only part of the plugin that survives outside the browser.

Fonts

revealjs-a11y:
  font-families:
    - name: "Atkinson Hyperlegible"
      value: "'Atkinson Hyperlegible', sans-serif"
      url: "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible"
    - name: "System"
      value: "system-ui, sans-serif"

Each entry needs a name and a value; url loads a webfont for the ones not already present.

Source

The repository ships a short, standalone starting point you can copy: example.qmd.

Back to top