AYBILGE / INSIGHTS
Accessible interaction: motion should be a choice
Give motion a purpose
Three-dimensional scenes and animation can communicate a product’s character. If they make it harder to read or complete a task, they stop helping. Build the visual experience around the content rather than asking visitors to work around an effect. Essential information should remain available without animation.
Respect reduced-motion preferences
Some users ask their operating system to reduce movement. A website can detect that preference and stop continuous animation. A visible pause control also helps people who want to change their choice during the visit. The setting should be reflected in the control’s accessible state.
Make keyboard focus visible
Navigation links and controls should work with a keyboard and clearly show which element is focused. Important information revealed on hover needs an equivalent route for touch and keyboard users. A menu should expose its open state and offer a predictable way to close it.
Keep meaning outside the canvas
WebGL may be unavailable, or the graphics context may be lost. Headings, product descriptions and links should continue to work. A fallback visual can retain the atmosphere while ordinary HTML carries the information. The best interactive layer adds to a complete page rather than becoming its only way to communicate.
Make movement optional and meaning persistent
An animated scene can introduce a product, but it should not be the only way to understand it. Keep the essential message in readable text and make important destinations ordinary links. A pause control should stop the motion without removing access to the rest of the page. Respect the reduced-motion preference from the outset.
Try the page without a mouse
- Use Tab to visit the primary links, controls and any interactive cards in a sensible order.
- Open a dialog and close it with Escape, checking that focus returns to the place you started.
- Enable reduced motion and check that the page still communicates the same information.
Also consider what happens when a graphics feature fails or a connection is slow. A useful fallback is part of the interface, not an error message hidden below it. Hover effects should supplement labels rather than contain information that keyboard or touch users cannot reach.