Reduced motion support in Bootsrap - Mini Project: Build & Apply

Reduced Motion Support with Bootstrap

📖 Scenario: You are building a simple webpage using Bootstrap that includes an animated button. Some users prefer reduced motion to avoid animations that might cause discomfort. Your task is to add support for reduced motion preferences using CSS.

🎯 Goal: Create a Bootstrap-based webpage with a button that animates on hover. Then add CSS to disable the animation when the user prefers reduced motion.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Create a button with a hover animation

Add CSS that respects the user's reduced motion preference

Use the @media (prefers-reduced-motion: reduce) CSS media query

Ensure the animation is disabled when reduced motion is preferred

💡 Why This Matters

🌍 Real World

Many users have motion sensitivity or prefer less animation to avoid discomfort. Supporting reduced motion improves user experience and accessibility.

💼 Career

Web developers must create accessible websites that respect user preferences, including reduced motion settings, to meet accessibility standards and improve usability.

1

Create the basic HTML structure with Bootstrap

Create a basic HTML5 page with lang="en", charset="UTF-8", and viewport meta tags. Include the Bootstrap 5 CSS CDN link inside the <head>. Inside the <body>, add a <main> element with a Bootstrap button having the classes btn and btn-primary and the text Hover me.

Bootsrap

  
  
  Reduced Motion Support
  


  
    
  

Hint

Remember to include the Bootstrap CSS link inside the <head> and create a button with the classes btn and btn-primary.

2

Add CSS for button hover animation

Add a <style> block inside the <head> after the Bootstrap CSS link. Inside it, write CSS to animate the button's background color to a lighter blue on hover using a smooth transition of 0.3 seconds. Use the selector button.btn-primary:hover and set background-color: #5a9bf6; with transition: background-color 0.3s ease; on the button.

Bootsrap

  
  
  Reduced Motion Support
  
  
    /* Add hover animation for button background color here */
  


  
    Hover me
  

Hint

Use transition: background-color 0.3s ease; on the button and change background-color on hover.

3

Add reduced motion media query to disable animation

Inside the existing <style> block, add a CSS media query @media (prefers-reduced-motion: reduce). Inside it, select button.btn-primary and set transition: none; to disable the animation for users who prefer reduced motion.

Bootsrap

  
  
  Reduced Motion Support
  
  
    button.btn-primary {
      transition: background-color 0.3s ease;
    }
    button.btn-primary:hover {
      background-color: #5a9bf6;
    }

    /* Add reduced motion media query below */
  


  
    Hover me
  

Hint

Use @media (prefers-reduced-motion: reduce) and inside it set transition: none; on the button.

4

Add accessible aria-label and finalize structure

Add an aria-label="Animated primary button" attribute to the <button> element for accessibility. Also, ensure the <main> element has a role="main" attribute to define the main content landmark.

Bootsrap

  
  
  Reduced Motion Support
  
  
    button.btn-primary {
      transition: background-color 0.3s ease;
    }
    button.btn-primary:hover {
      background-color: #5a9bf6;
    }

    @media (prefers-reduced-motion: reduce) {
      button.btn-primary {
        transition: none;
      }
    }
  


  
    
  

Hint

Add aria-label="Animated primary button" to the button and role="main" to the main element.

Practice

1. What is the main purpose of using @media (prefers-reduced-motion: reduce) in Bootstrap?

easy

A. To increase the speed of all animations on the page

B. To detect if the user prefers fewer animations for accessibility

C. To add more animations for visual appeal

D. To change the color scheme based on user preference

Solution

1. Step 1: Understand the media query purpose

   The media query @media (prefers-reduced-motion: reduce) checks if the user has requested reduced motion in their system settings.

2. Step 2: Connect to accessibility goals

   This helps improve accessibility by reducing or disabling animations that might cause discomfort or distraction.

3. Final Answer:

   To detect if the user prefers fewer animations for accessibility -> Option B

4. Quick Check:

   Reduced motion media query = detect user preference [OK]

Hint: Look for user preference detection in media queries [OK]

Common Mistakes:

• Thinking it speeds up animations
• Assuming it adds more animations
• Confusing it with color scheme changes

2. Which of the following is the correct syntax to start a CSS block that applies styles only when the user prefers reduced motion?

easy

A. @media (prefers-reduced-motion: no-preference) { }

B. @media (motion-preference: reduce) { }

C. @media (prefers-reduced-motion: reduce) { }

D. @media (prefers-motion: reduce) { }

Solution

1. Step 1: Recall the exact media query syntax

   The correct media query to detect reduced motion preference is @media (prefers-reduced-motion: reduce).

2. Step 2: Compare options

   @media (prefers-reduced-motion: reduce) { } matches the exact syntax. Other options have incorrect property names or values.

3. Final Answer:

   @media (prefers-reduced-motion: reduce) { } -> Option C

4. Quick Check:

   Correct media query syntax = @media (prefers-reduced-motion: reduce) { } [OK]

Hint: Remember exact media feature name: prefers-reduced-motion [OK]

Common Mistakes:

• Using wrong media feature names
• Swapping 'reduce' with 'no-preference'
• Missing parentheses or braces

3. Given the CSS below, what will happen when a user has 'prefers-reduced-motion: reduce' enabled?

div {
  animation: slide 2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  div {
    animation: none;
  }
}

medium

A. The div will have no animation and stay still

B. The div will keep sliding with animation

C. The div will slide faster than normal

D. The div will disappear from the page

Solution

1. Step 1: Understand the base animation

   The div normally has a sliding animation that repeats infinitely.

2. Step 2: Analyze the media query effect

   When the user prefers reduced motion, the media query sets animation: none; on the div, stopping the animation.

3. Final Answer:

   The div will have no animation and stay still -> Option A

4. Quick Check:

   Reduced motion disables animations = The div will have no animation and stay still [OK]

Hint: Check if animation is set to none inside reduced motion query [OK]

Common Mistakes:

• Assuming animation speeds up
• Thinking animation continues unchanged
• Believing element disappears

4. You wrote this CSS but animations still run for users who prefer reduced motion:

@media prefers-reduced-motion: reduce {
  .btn {
    animation: none;
  }
}

What is the error?

medium

A. Missing parentheses around the media feature

B. Wrong selector used for buttons

C. Animation property cannot be set to none

D. Media query should be inside a CSS class

Solution

1. Step 1: Check media query syntax

   The media query must have parentheses around the feature: @media (prefers-reduced-motion: reduce).

2. Step 2: Identify the missing parentheses

   The given code misses parentheses, so the media query is invalid and ignored by browsers.

3. Final Answer:

   Missing parentheses around the media feature -> Option A

4. Quick Check:

   Media queries require parentheses [OK]

Hint: Always wrap media features in parentheses [OK]

Common Mistakes:

• Forgetting parentheses in media queries
• Using wrong CSS selectors
• Thinking animation:none is invalid

5. You want to improve accessibility by disabling Bootstrap's fade animations for users who prefer reduced motion. Which CSS snippet correctly achieves this?

hard

A. .fade { animation: none; }

B. .fade { animation-duration: 0s; }

C. @media (prefers-reduced-motion: no-preference) { .fade { animation: none; } }

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

Solution

1. Step 1: Use the correct media query for reduced motion

   Only styles inside @media (prefers-reduced-motion: reduce) apply when user requests reduced motion.

2. Step 2: Disable animations and transitions on .fade

   Setting animation: none !important; and transition: none !important; ensures Bootstrap's fade animations are turned off.

3. Step 3: Check other options

   .fade { animation-duration: 0s; } disables animation always, ignoring user preference. @media (prefers-reduced-motion: no-preference) { .fade { animation: none; } } uses wrong media query value. .fade { animation: none; } disables animation always, not respecting user choice.

4. Final Answer:

   @media (prefers-reduced-motion: reduce) { .fade { transition: none !important; animation: none !important; } } -> Option D

5. Quick Check:

   Disable animations inside reduced motion media query [OK]

Hint: Disable animations only inside reduced motion media query [OK]

Common Mistakes:

• Disabling animations globally ignoring user preference
• Using wrong media query values
• Not disabling both animation and transition