Skip to main content
svelte-pdf-mini

Guides

Accessibility

Semantics, keyboard support, focus management and motion in svelte-pdf-mini.

Semantics

  • Pages are role="region" landmarks labelled “Page N”; the text layer keeps the PDF’s reading order and is selectable and copyable.
  • <Paper.Headings /> adds real h2–h6 headings at every section, hidden visually but available to screen readers — the document gets a navigable heading structure.
  • Controls are buttons with labels (translatable through messages); toggles use aria-pressed, the current outline or TOC item aria-current="location", find results aria-current, and Find.Count is a polite live region.
  • Thumbnails are a listbox of options, the minimap a vertical scrollbar with value text, floating cards dialog or tooltip, the selection menu a toolbar.

Keyboard

  • The viewport is focusable and handles zoom, page and history keys; annotation and find shortcuts are scoped to the viewer so they never fire while typing elsewhere. See Keyboard shortcuts.
  • Text fields (find, notes, labels) keep their keys: plain digits type, Alt + digit recolours.
  • Escape always backs out one level: discard a new annotation, deselect, close a menu, clear find.

Motion

  • prefers-reduced-motion turns eased zoom, smooth scrolling, focus pulses and floating-part animations off.
  • Every animation is CSS you can override.

Language

All visible and assistive strings come from defaultMessages. Translate them globally with setMessages() or per viewer with the messages prop.

When you render parts through child, spread props on a semantic element (a button for buttons, an input for inputs): the ARIA attributes the part provides assume it.