Guides
Accessibility
How halloween.js handles reduced motion, assistive technology and pointer events, and what to do about contrast and layering.
Reduced motion#
Every animation respects the visitor's
prefers-reduced-motion: reduce setting, and picks up changes while the
page stays open. No reload is needed.
| Element | With reduced motion on |
|---|---|
| Eyes, witches, spider drop, tombstones | Not created. Any already on screen are removed at once. |
| Screen-corner webs | Unchanged. They do not move. |
| Badge | Unchanged |
pageEffects.start() |
Does nothing |
Assistive technology#
The effects layer and every decorative picture are marked aria-hidden, so
screen readers skip them. The layer ignores pointer events, so it never blocks a
click, a tap or text selection on your page. The only focusable thing the library can
add is the optional badge, which is a normal link.
Contrast and layering#
- The decorations take the text color of your page by default, which keeps them visible on both light and dark themes. If you override the color, check it against both.
-
The effects layer sits at
z-index: 999. Lower--halloween-page-z-indexif it has to stay under a cookie banner or a modal. -
Lower
--halloween-page-opacity, or usehalloween-intensity-subtle, if the effects compete with content.