Accessible interactive illustrations: reduced motion, screen readers and WCAG

Accessibility for illustrations used to be one question: what is the alt text? Interactive and animated illustrations add two more: what happens for people who are sensitive to motion, and what happens for people who cannot use a pointer? This guide covers all three.

The WCAG criteria that apply

2.3.3 is the one written for exactly this case. W3C's Understanding 2.3.3 explains why: movement that is not part of normal scrolling can cause dizziness, nausea or headaches for people with vestibular disorders. It is Level AAA, so many teams treat it as optional. The cheapest way to meet it, honouring the operating system's reduced-motion setting, takes a few lines, so there is little reason not to.

Reduced motion in CSS

People who are bothered by motion can turn it down in their system settings, and browsers expose that as a media query:

@media (prefers-reduced-motion: reduce) {
  .illustration * {
    animation: none !important;
    transition: none !important;
  }
}

For draw-on animations, also show the finished drawing; see Animated SVG illustrations for the exact rules.

Reduced motion in JavaScript

Pointer-driven illustrations move from script, so CSS alone will not stop them. Read the same setting in JavaScript, and listen for changes, because people can switch it while the page is open:

const rm = matchMedia('(prefers-reduced-motion: reduce)')
let reduce = rm.matches
rm.addEventListener('change', e => { reduce = e.matches })

// in your animation step:
const k = reduce ? 1 : 0.15   // 1 = jump straight to the target, no gliding

There are two reasonable responses. You can switch the interaction off entirely, or keep the response but drop the motion, so the drawing jumps to its new state instead of gliding there. The second keeps the feedback without the movement that causes discomfort.

Alt text or hidden?

Ask whether the illustration tells the visitor something the surrounding text does not.

• Decorative (most heroes, empty states, feature art): hide it. On an <img>, use alt="". On inline SVG or a container, use aria-hidden="true".
• Meaningful (a diagram that explains a process): give the container role="img" and a short aria-label that says what it shows, not how it moves.

<!-- decorative -->
<div data-liniqo="calendar" aria-hidden="true"></div>

<!-- meaningful, with your own wording -->
<div data-liniqo="ci-pipeline" role="img"
     aria-label="A build moving through test, review and deploy stages"></div>

Do not hide meaning behind the interaction

Keyboard users, screen reader users and most phone users will never hover. So anything the interaction reveals must also be available another way: in the text, in a caption, or in the resting state of the drawing. A good test is to imagine the illustration frozen. If the page still makes complete sense, the interaction is safely decorative.

Contrast for thin lines

Hairline drawings use light greys for secondary lines. That is fine for decoration. If a line carries meaning, such as the path in a diagram, keep it at 3:1 contrast or more against the background. For more on thin-line styles, see Hairline illustrations for UI/UX design.

What Liniqo Live does for you

• Reduced motion: when the visitor has asked for reduced motion, a figure still responds, but every movement lands at once instead of animating. The setting is read live, so changing it takes effect without a reload.
• A label by default: if you do not set a role yourself, the figure gets role="img" and an aria-label describing what it shows, for example the calendar above. Set your own role and aria-label and it keeps yours; add aria-hidden="true" to hide a decorative figure from screen readers.
• Nothing hidden behind hover: each figure's resting state is a complete drawing; the interaction adds movement, not information.
• Off screen, nothing runs: figures only animate while visible.

See them in the library; 23 are free, and the rest come with Pro and Lifetime.

Questions

Do decorative animations need to respect prefers-reduced-motion?

Yes, in practice. WCAG 2.3.3 (Level AAA) asks that motion triggered by interaction can be disabled unless essential, and honouring the reduced-motion setting is the simplest way to do it.

Should an interactive illustration have alt text?

Only if it adds information the text does not. Most are decorative and should be hidden with aria-hidden="true" or alt="". Meaningful ones get role="img" and a short aria-label.

How do I detect reduced motion in JavaScript?

Use matchMedia("(prefers-reduced-motion: reduce)"). Read .matches and listen for its change event so the page reacts if the setting changes.

Do keyboard users need to operate a decorative illustration?

No, as long as it is purely decorative and nothing important is only available through the interaction.