How to Test Reduced Motion on Web (Complete Guide)

Reduced motion testing is crucial for ensuring that Web applications are accessible and usable for users with motion sensitivities or preferences. Failing to test reduced motion can result in a poor u

Introduction to Reduced Motion Testing

Reduced motion testing is crucial for ensuring that Web applications are accessible and usable for users with motion sensitivities or preferences. Failing to test reduced motion can result in a poor user experience, leading to increased bounce rates, negative reviews, and ultimately, lost revenue. Common failures include ignoring user preferences, inadequate animation replacements, and insufficient testing.

What to Test

When testing reduced motion on Web apps, consider the following test cases:

• Happy path scenarios:

+ User enables reduced motion in system settings and verifies that all animations are replaced or removed

+ User navigates through the app with reduced motion enabled and confirms that no animations cause discomfort

• Error scenarios:

+ User enables reduced motion, but some animations still cause issues

+ User experiences inconsistent behavior when switching between reduced motion and regular motion

• Edge cases:

+ User has a custom animation setting that conflicts with reduced motion

+ User uses a browser extension that overrides reduced motion settings

• Accessibility considerations for reduced motion:

+ Verify that reduced motion is respected for users with disabilities, such as those with vestibular disorders

+ Confirm that alternative animations or replacements are provided for users who need them

+ Test that reduced motion is properly handled for users with custom font sizes or display settings

+ Ensure that reduced motion does not break any critical functionality, such as navigation or form submission

+ Validate that reduced motion is applied consistently across all pages and components

+ Check that reduced motion is properly handled for users with assistive technologies, such as screen readers

Manual Testing Approach

To manually test reduced motion on a Web app, follow these steps:

1. Enable reduced motion in system settings: On most operating systems, this can be done by going to Accessibility or Display settings and selecting the Reduce motion or Prefer reduced motion option.
2. Verify system settings are applied: Use the prefers-reduced-motion media query in your browser's developer tools to confirm that the system settings are applied. For example:

@media (prefers-reduced-motion: reduce) {
  /* styles for reduced motion */
}

3. Test animations and transitions: Navigate through the app and verify that all animations and transitions are replaced or removed. Use the browser's developer tools to inspect elements and check for any remaining animations.
4. Test edge cases: Try using custom animation settings, browser extensions, or assistive technologies to ensure that reduced motion is handled correctly.
5. Repeat tests with different user agents and devices: Test reduced motion on various browsers, devices, and operating systems to ensure consistency.

Automated Testing Approach

For automated testing of reduced motion on Web apps, use tools like:

• Playwright: A browser automation framework that supports reduced motion testing. For example:

const { test, expect } = require('@playwright/test');

test('reduced motion test', async ({ page }) => {
  await page.evaluate(() => {
    // enable reduced motion
    document.documentElement.setAttribute('data-reduced-motion', 'true');
  });
  // verify that animations are replaced or removed
  await expect(page.locator('selector')).not.toHaveAnimation();
});

• Cypress: A testing framework that supports reduced motion testing using the cy.get() command and the prefers-reduced-motion media query.
• WCAG 2.1 AA accessibility testing tools: Tools like Lighthouse, WAVE, or axe-core can help identify accessibility issues related to reduced motion.

How SUSA Tests Reduced Motion Autonomously

SUSA, an autonomous QA platform, tests reduced motion on Web apps using its accessibility persona. This persona is designed to catch issues related to reduced motion, such as:

• Inconsistent animation replacements
• Ignored user preferences
• Insufficient testing for edge cases

SUSA's accessibility persona uses a combination of automated testing and AI-powered analysis to identify reduced motion issues, including:

• WCAG 2.1 AA accessibility testing
• Dynamic testing with persona-based scenarios
• Cross-session learning to improve testing accuracy

By using SUSA's autonomous testing platform, developers can ensure that their Web apps are accessible and usable for users with motion sensitivities or preferences, without requiring extensive manual testing or scripting efforts. For example, SUSA's testing process involves:

• Uploading the Web app's URL to the SUSA platform
• Selecting the accessibility persona and reduced motion testing scenario
• Running the automated tests and reviewing the results
• Using the results to identify and fix reduced motion issues

SUSA's automated testing approach can be integrated into CI/CD pipelines using tools like GitHub Actions, JUnit XML, or the SUSA CLI tool (pip install susatest-agent). This ensures that reduced motion testing is performed consistently and efficiently, without disrupting the development workflow.