Frontend Academy · บทเรียน

การเคารพ prefers-reduced-motion

ตรวจจับมีเดียคิวรี prefers-reduced-motion และปิดหรือลดแอนิเมชันสำหรับผู้ใช้ที่ขอให้เคลื่อนไหวน้อยลง

การเคารพ prefers-reduced-motion เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

ฟีเจอร์สื่อ prefers-reduced-motion

ผู้ใช้บางรายอาจมีอาการคลื่นไส้ เวียนศีรษะ หรือชักจากการเคลื่อนไหวในส่วนติดต่อผู้ใช้ ผู้ใช้เหล่านี้สามารถตั้งค่า OS ให้ลดการเคลื่อนไหวได้ ฟีเจอร์สื่อ prefers-reduced-motion จะตรวจจับการตั้งค่านี้ เพื่อให้ CSS ตอบสนองได้อย่างเหมาะสม

การตรวจจับการลดการเคลื่อนไหวใน CSS

ครอบแอนิเมชันไว้ในคำค้นหาที่ตรงกันข้าม โดยใช้แอนิเมชันตามปกติก่อน แล้วจึงแทนที่หรือปิดใช้งานสำหรับผู้ใช้ที่ต้องการการเคลื่อนไหวน้อยลง

/* Apply animation by default */
.spinner {
  animation: spin 1s linear infinite;
}

/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

หลักการ “ลด ไม่ใช่หยุดทั้งหมด”

prefers-reduced-motion: reduce ไม่ได้หมายความว่าจะต้องไม่มีการเคลื่อนไหวเลย การเคลื่อนไหวบางอย่างช่วยสื่อถึงการเปลี่ยนแปลง state ที่สำคัญของส่วนติดต่อผู้ใช้ แทนที่จะลบแอนิเมชันทั้งหมด ให้ทำให้ช้าลงหรือลดรูปแบบให้เรียบง่ายเป็นการเปลี่ยนผ่านแบบค่อย ๆ จาง

@media (prefers-reduced-motion: reduce) {
  .modal {
    /* Replace scale + fade with just fade */
    animation: fadeOnly 0.1s linear;
  }
  @keyframes fadeOnly {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

ทางเลือกขั้นเด็ดขาด: ปิดแอนิเมชันทั้งหมด

รูปแบบที่ใช้กันทั่วไปคือปิดการเปลี่ยนผ่านและแอนิเมชันทั้งหมดทั่วทั้งระบบสำหรับผู้ใช้ที่ลดการเคลื่อนไหว วิธีนี้เป็นค่าเริ่มต้นที่ปลอดภัย แม้จะยังไม่ได้ปรับแต่งแอนิเมชันแต่ละรายการเป็นรายกรณีก็ตาม

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

การตรวจจับการลดการเคลื่อนไหวใน JavaScript

ใช้ API matchMedia เพื่อตรวจจับการตั้งค่าใน JavaScript ซึ่งมีประโยชน์สำหรับการควบคุมแอนิเมชันบนผืนผ้าใบ การเคลื่อนไหวที่ขับเคลื่อนด้วย JavaScript หรือการเล่นวิดีโอโดยอัตโนมัติ

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReduced.matches) {
  // skip gsap or canvas animations
} else {
  startAnimation();
}

// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
  if (e.matches) stopAnimations();
  else startAnimations();
});

พฤติกรรมการเลื่อนและการเล่นอัตโนมัติ

ควรปิดการเลื่อนแบบราบรื่นสำหรับผู้ใช้ที่ลดการเคลื่อนไหวด้วย: scroll-behavior: auto หยุดวิดีโอที่เล่นโดยอัตโนมัติ และอย่าทำให้เนื้อหากะพริบหรือกะพริบถี่ ๆ

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

// In JS:
if (!prefersReduced.matches) {
  element.scrollIntoView({ behavior: 'smooth' });
} else {
  element.scrollIntoView(); // instant
}

WCAG 2.3.3 — แอนิเมชันจากการโต้ตอบ

WCAG 2.3.3 (ระดับ AAA) กำหนดให้สามารถปิดการเคลื่อนไหวที่เกิดจากการโต้ตอบของผู้ใช้ได้ การเคารพการตั้งค่า prefers-reduced-motion จะทำให้เป็นไปตามเกณฑ์นี้ และช่วยเพิ่มการเข้าถึงสำหรับผู้ใช้ที่มีความผิดปกติของระบบการทรงตัว

การทดสอบการลดการเคลื่อนไหว

ใน Chrome DevTools ให้เปิดแผงการแสดงผล (เมนูจุดสามจุด → เครื่องมือเพิ่มเติม → การแสดงผล) แล้วสลับตัวเลือก 'จำลองฟีเจอร์สื่อ CSS prefers-reduced-motion' ควรทดสอบส่วนติดต่อผู้ใช้ในโหมดนี้ก่อนนำไปใช้งานจริง

ภาคปฏิบัติ: รูปแบบแอนิเมชันที่ปลอดภัย

แอนิเมชันที่ปลอดภัยต่อการเคลื่อนไหวจะทำงานตามค่าเริ่มต้น และถูกครอบไว้เพื่อให้สามารถปิดใช้งานทั่วทั้งระบบได้ง่าย

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .alert {
    animation: slideIn 0.3s ease;
  }
}

ควรคงแอนิเมชันโฟกัสไว้

ตัวบ่งชี้โฟกัส (วงแหวนที่แสดงว่าองค์ประกอบใดกำลังถูกโฟกัส) ไม่ควรถูกลบออก แม้แต่สำหรับผู้ใช้ที่ลดการเคลื่อนไหว ตัวบ่งชี้เหล่านี้จำเป็นต่อการนำทางด้วยแป้นพิมพ์ และโดยทั่วไปไม่ใช่สิ่งกระตุ้นอาการผิดปกติของระบบการทรงตัว

ไลบรารีกับ prefers-reduced-motion

ไลบรารีแอนิเมชันยอดนิยม เช่น Framer Motion, GSAP และ Anime.js รองรับการลดการเคลื่อนไหวในตัว hook useReducedMotion() ของ Framer Motion ช่วยให้ปิดแอนิเมชันที่ซับซ้อนตามเงื่อนไขใน React ได้ง่าย

ตรวจสอบอย่างรวดเร็ว

ฟีเจอร์สื่อ CSS ใดใช้ตรวจจับการตั้งค่าของผู้ใช้ที่ต้องการเห็นการเคลื่อนไหวน้อยลงในส่วนติดต่อผู้ใช้

ทบทวน: prefers-reduced-motion

ผู้ใช้บางรายจำเป็นต้องลดการเคลื่อนไหวด้วยเหตุผลด้านสุขภาพของระบบการทรงตัวและระบบประสาท ใช้ @media (prefers-reduced-motion: reduce) เพื่อปิดหรือลดความซับซ้อนของแอนิเมชัน ตรวจจับใน JS ด้วย matchMedia ทางเลือกขั้นเด็ดขาดคือกำหนด animation/transition-duration เป็น 0.01ms ทั่วทั้งระบบ WCAG 2.3.3 แนะนำแนวทางนี้ ควรทดสอบด้วยแผงการแสดงผลของ DevTools

คำถามที่พบบ่อย

บทเรียน “การเคารพ prefers-reduced-motion” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเคารพ prefers-reduced-motion” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเคารพ prefers-reduced-motion”

ตรวจจับมีเดียคิวรี prefers-reduced-motion และปิดหรือลดแอนิเมชันสำหรับผู้ใช้ที่ขอให้เคลื่อนไหวน้อยลง คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การเคารพ prefers-reduced-motion” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy