Accessibility

Reduced motion

By default, the element appears with no animation when the user prefers reduced motion. The reducedMotion option changes this:

Value	Behavior
"user"	Skips the animation when the operating system setting asks for less motion.
"always"	Always skips the animation.
"never"	Always plays the animation.

Keep "user" unless you have a strong reason. Motion makes some people ill, and they set this option in their operating system.

Hidden content

Until the reveal, the element has an inline opacity: 0 style. With Astro, a stylesheet rule hides it instead. It stays in the accessibility tree, and the browser’s find-in-page finds its text. Links and buttons in it stay focusable and clickable. When a keyboard user tabs to one, the browser scrolls it into view, and the reveal starts.

Pages without JavaScript

The server renders hidden elements with opacity: 0. If JavaScript does not run, they stay hidden. To show them, put this in the document head. Astro pages do not need it: see Astro.

<noscript>
  <style>
    [data-reveal="hidden"] {
      opacity: 1 !important;
    }
  </style>
</noscript>

Hidden elements have the data-reveal="hidden" attribute. This attribute is reserved: do not use it for your own data.

• The React Reveal component, the Vue v-reveal directive and Reveal component, the Astro Reveal component, and the core reveal function set it.
• The React useReveal hook sets it in getProps. See useReveal.
• With the core observe, play and hiddenStyle, set it yourself. See Write an adapter.

Printing

Elements that are not revealed yet stay invisible on a printed page. To print them, add this rule to your stylesheet. The Astro Reveal component and the reveal function on markup with no hidden state need only this rule, not the <noscript> style:

@media print {
  [data-reveal="hidden"] {
    opacity: 1 !important;
  }
}

Content Security Policy

The React, Vue and core packages add no <style> elements. Under a strict Content Security Policy, the inline opacity: 0 style in the server markup needs style-src-attr 'unsafe-inline'.

If you put the <noscript> style or the print rule in a <style> element, give it a nonce, or put the print rule in your stylesheet.

The Astro markup has no inline style, so it needs no unsafe-inline. See Astro.