Overview
Motion can improve visual hierarchy, guide attention, and make a website feel more interactive.
However, strong movement, flashing effects, parallax, zooming, or continuously animated elements can be uncomfortable for some visitors.
KineticHub is designed to respect the visitor’s system-level reduced-motion preference and reduce or disable supported animations when necessary.
Accessibility also depends on how each block is configured. Important content should remain understandable and usable even when animation is unavailable.
What is reduced motion?
Most operating systems include a setting that allows users to request less animation.
Web browsers expose this preference through:
prefers-reduced-motion
When reduced motion is enabled, supported KineticHub blocks can reduce or disable motion-heavy behavior.
Depending on the block, this may affect:
- Reveal animations
- Pointer-following effects
- Parallax movement
- Continuous animations
- Scroll-driven motion
- Magnetic interactions
- 3D tilt effects
- Animated backgrounds
- Media transitions
The block content should remain visible and usable even when the motion effect is reduced.
How visitors enable reduced motion
The setting is controlled by the visitor’s operating system or browser environment.
It may appear under options such as:
- Reduce Motion
- Animation Effects
- Show Animations
- Accessibility
- Visual Effects
Website administrators do not need to detect the visitor manually.
When the browser reports a reduced-motion preference, KineticHub applies the supported fallback behavior automatically.
Reduced motion is different from mobile motion
KineticHub includes a global setting for mobile motion.
This setting is separate from the visitor’s reduced-motion preference.
- Mobile Motion controls supported effects on smaller or touch-based devices.
- Reduced Motion responds to an accessibility preference selected by the visitor.
A desktop visitor can request reduced motion, and a mobile visitor can allow normal motion.
Both conditions should be considered when testing a page.
Keep important content visible
Animation should enhance content, not control whether the content exists.
Avoid configurations where important information is readable only after:
- Hovering an element
- Moving the pointer
- Completing an animation
- Scrolling to a precise position
- Opening a decorative interaction
- Waiting for a continuous effect
Essential content should remain available when motion is reduced, blocked, delayed, or unsupported.
This includes:
- Headings
- Navigation
- Calls to action
- Product information
- Contact information
- Form instructions
- Important images
- Video controls
- Audio controls
Use appropriate heading structure
Animated typography should still follow the normal page heading hierarchy.
Use:
- One primary H1 for the page
- H2 headings for major sections
- H3 headings for subsections
Do not choose a heading level only because of its default visual size.
Use the correct semantic heading level, then adjust its appearance through typography settings.
Screen readers and search engines use the heading structure to understand the page.
Make text readable without animation
For animated text:
- Use sufficient color contrast
- Avoid very thin text over complex backgrounds
- Keep font sizes readable on mobile
- Avoid excessive letter spacing
- Check text wrapping at smaller widths
- Keep the final text state visible
- Avoid very long animation delays
- Do not animate every paragraph on the page
A user should be able to understand the content even when the reveal effect does not run.
Avoid excessive continuous animation
Continuous movement can become distracting, especially when several effects run simultaneously.
Use continuous animation carefully for:
- Background glows
- Marquees
- Floating elements
- Pulsing text
- Animated gradients
- 3D mesh backgrounds
- Decorative dividers
Recommended practice:
- Use one dominant motion effect per section
- Avoid multiple continuously moving backgrounds
- Keep decorative movement subtle
- Do not animate large areas without a clear purpose
- Avoid placing continuous movement behind long-form text
- Test whether the page remains comfortable to read
Avoid flashing and rapid changes
Do not configure effects that flash, blink, or rapidly alternate colors.
Fast visual changes can be distracting and may create accessibility risks.
Use:
- Smooth transitions
- Moderate speeds
- Limited brightness changes
- Subtle glow effects
- Predictable movement
Avoid combining strong contrast, rapid repetition, and large animated areas.
Color contrast
Text and interactive controls should remain visible against their background.
Check contrast for:
- Normal text
- Headings
- Buttons
- Links
- Labels
- Video controls
- Slider handles
- Progress indicators
- Hover and focus states
Glow, transparency, glass effects, and background images can reduce practical contrast even when the selected text color appears suitable.
Always inspect the final rendered page.
Keyboard accessibility
Interactive elements should remain usable without a mouse.
Test keyboard navigation for supported controls such as:
- Buttons
- Links
- Audio controls
- Video modal triggers
- Before-and-after controls
- Other focusable interactive elements
Use the Tab key to move through the page.
Confirm that:
- Interactive elements receive focus
- The focus position is visible
- Enter or Space activates the control where appropriate
- A modal can be closed
- Focus does not become trapped unexpectedly
- Decorative elements are not added to the tab order unnecessarily
Do not remove browser focus outlines unless they are replaced with an equally visible focus style.
Hover and pointer effects
Some KineticHub effects respond to cursor movement or hover.
These interactions should not contain essential information that is unavailable to:
- Keyboard users
- Touchscreen users
- Visitors using assistive technology
- Visitors with reduced motion enabled
Use hover as an enhancement.
Provide a visible default state and make sure the primary action remains a normal button, link, or control.
Images and alternative text
When a KineticHub block includes meaningful imagery, add suitable alternative text in the WordPress Media Library or block settings.
Alternative text should describe the purpose or information provided by the image.
Decorative images should not receive unnecessary descriptions.
For before-and-after comparisons, describe the subject and the difference between the two states where appropriate.
Do not place essential text only inside an image.
Audio accessibility
For pages using Kinetic Audio Player:
- Use a clear track title
- Provide accessible play and pause controls
- Avoid automatic playback
- Provide a transcript when the audio contains important spoken content
- Do not rely only on waveform graphics to communicate playback status
- Confirm that volume and progress controls remain usable
Visitors should control when audio begins.
Video accessibility
For video content:
- Avoid autoplay with sound
- Add captions for spoken content
- Provide a transcript for important instructional material
- Use a clear poster image
- Include an understandable play button label
- Make the modal easy to close
- Confirm that keyboard focus is handled correctly
YouTube captions can be useful, but review automatically generated captions for mistakes.
Modal accessibility
When using Kinetic Video Modal or another overlay interaction:
- Use a clear trigger label
- Make the close control visible
- Allow the Escape key to close the modal where supported
- Avoid opening the modal automatically
- Return focus to a logical location after closing
- Keep the content usable at mobile widths
Do not use a modal for information that must be visible immediately to every visitor.
Marquee accessibility
Moving text can be difficult to read.
When using Kinetic Marquee:
- Keep the content short
- Avoid important instructions inside the marquee
- Use a readable movement speed
- Provide sufficient spacing between items
- Enable pause behavior where available
- Avoid several marquees on the same page
- Make sure links can still be selected
Do not use a continuously moving marquee as the only location for essential information.
Accessibility and background effects
Decorative effects such as Ambient Aura or Hero Mesh should not interfere with foreground content.
Confirm that:
- Text contrast remains sufficient
- The effect does not cover buttons or links
- Pointer interaction does not block normal controls
- The section remains readable when animation is disabled
- The background does not create excessive visual noise
Decorative backgrounds should support the design without becoming the main interaction requirement.
Test reduced-motion behavior
Enable reduced motion in your operating system before testing.
Then:
- Open the page in a new browser window
- Reload the page
- Scroll through all KineticHub sections
- Confirm that important content remains visible
- Check that interactive controls still work
- Test keyboard navigation
- Check desktop and mobile layouts
- Confirm that continuous effects are reduced where supported
Some browsers may require a full reload before detecting the changed preference.
Test without animation
A useful accessibility test is to review the page as though no animation were available.
Ask:
- Is every heading readable?
- Are buttons and links still visible?
- Can users understand the page order?
- Is any information available only on hover?
- Can audio and video be controlled?
- Does the layout remain stable?
- Are images described appropriately?
- Can the page be navigated using a keyboard?
When the page still works without motion, animation is being used as progressive enhancement.
Recommended accessibility workflow
For each animated page:
- Build the content structure first
- Add correct headings and labels
- Confirm keyboard navigation
- Add alternative text
- Check color contrast
- Add animation as an enhancement
- Test reduced motion
- Test a real mobile device
- Review focus states
- Verify that important content remains visible
Accessibility should be reviewed during page creation, not added only after the design is complete.
Troubleshooting
Animations still run with reduced motion enabled
Reload the browser after enabling the operating-system setting.
Also check whether:
- The effect is created by the active theme
- Another plugin provides the animation
- Custom CSS includes its own animation
- Cached CSS or JavaScript is still being served
- The selected effect has a static or reduced fallback rather than being completely disabled
Clear all caches and test again in a private browser window.
Content disappears when animation is disabled
The initial or fallback state may be hidden incorrectly.
Review the selected block settings and remove long delays or visibility settings that depend on animation.
Also test for conflicts caused by optimization plugins that delay JavaScript.
Text is difficult to read over an animated background
Reduce the background intensity and increase foreground contrast.
You can also add:
- A darker or lighter overlay
- A solid content background
- More spacing around the text
- A less complex background effect
- A static mobile fallback
Keyboard focus is difficult to see
Check whether the active theme or custom CSS removes focus outlines.
Restore a visible focus style for buttons, links, and interactive controls.
Hover content is unavailable on mobile
Touchscreens do not provide reliable desktop-style hover behavior.
Move essential information into the normal visible content and use hover only for enhancement.
A moving element is distracting
Reduce the effect speed or intensity.
Use a shorter animation, disable continuous movement, or replace the effect with a static presentation.
Next step
Continue with Using Multiple KineticHub Blocks on One Page to learn how to combine animated blocks without creating excessive motion, performance problems, or interaction conflicts.