Reduced motion support in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use reduced motion support in web design?

Which of the following best explains the purpose of reduced motion support in Bootstrap-based websites?

A To enhance accessibility by respecting users' system preferences to reduce motion

B To improve website loading speed by disabling animations

C To add more animations for a visually rich experience

D To automatically increase font sizes for better readability

💡 Hint

Think about users who might feel dizzy or uncomfortable with too many animations.

Reduced motion support helps users who prefer fewer animations due to motion sensitivity. Bootstrap respects the prefers-reduced-motion media query to disable or simplify animations.

📝 Syntax

intermediate

Which CSS snippet correctly disables animations for users who prefer reduced motion?

Given Bootstrap's use of CSS, which option correctly uses the prefers-reduced-motion media query to disable all animations and transitions?

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

B @media (prefers-reduced-motion: no-preference) { * { animation: none; transition: none; } }

C @media (prefers-reduced-motion: reduce) { * { animation-duration: 0s; transition-duration: 0s; } }

D @media (prefers-reduced-motion: reduce) { * { animation-play-state: paused; transition: paused; } }

💡 Hint

Look for the media query that targets users who want reduced motion and disables animations completely.

Option A correctly targets users who prefer reduced motion and disables all animations and transitions using none !important. Option A only sets durations to zero but may not fully disable animations. Option A uses an invalid value for transition. Option A targets users with no preference, which is the opposite.

❓ rendering

advanced

What is the visual effect of this CSS on a Bootstrap button for users with reduced motion?

Consider this CSS snippet applied to a Bootstrap button:

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

What will users who prefer reduced motion see when they hover over the button?

A The button will flicker repeatedly when hovered.

B The button will not change color at all on hover.

C The button changes color instantly without any smooth transition effect.

D The button will animate color changes slowly over 0.5 seconds.

💡 Hint

Think about what disabling transitions means for hover effects.

Disabling transitions means the button's color changes immediately without any smooth animation. It still changes color but instantly, respecting reduced motion preferences.

❓ selector

advanced

Which CSS selector targets only animations inside Bootstrap components for reduced motion?

You want to disable animations only inside Bootstrap components (which use classes starting with 'btn', 'modal', 'carousel', etc.) when users prefer reduced motion. Which selector is correct?

A @media (prefers-reduced-motion: reduce) { [class^='btn'], [class^='modal'], [class^='carousel'] { animation: none !important; } }

B @media (prefers-reduced-motion: reduce) { [class*='btn'], [class*='modal'], [class*='carousel'] { animation: none !important; } }

C @media (prefers-reduced-motion: reduce) { .btn, .modal, .carousel { animation: none !important; } }

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

💡 Hint

Remember that Bootstrap classes can have multiple classes on one element, so partial matching is needed.

Option B uses the attribute selector [class*='btn'] which matches any element whose class attribute contains 'btn' anywhere, covering classes like 'btn-primary' or 'btn-lg'. Option B only matches classes starting exactly with 'btn', missing many Bootstrap classes. Option B matches exact classes only. Option B disables animations globally, not just Bootstrap components.

❓ accessibility

expert

How does Bootstrap's reduced motion support improve keyboard navigation experience?

Which statement best describes how respecting reduced motion preferences in Bootstrap benefits users who navigate with keyboards?

A It changes the tab order to skip animated elements.

B It removes all focus outlines to reduce visual clutter.

C It automatically increases the size of clickable elements for easier keyboard focus.

D It disables animations that could distract or cause dizziness during keyboard navigation.

💡 Hint

Think about how animations affect users who rely on keyboard navigation and may be sensitive to motion.

Disabling animations for users who prefer reduced motion helps prevent distractions or discomfort during keyboard navigation. Focus outlines remain visible for accessibility. Bootstrap does not change tab order or element sizes automatically based on motion preferences.

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