0Pricing
CSS Academy · บทเรียน

แอนิเมชันที่เข้าถึงได้ด้วย prefers-reduced-motion

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

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

เหตุใดจึงควรลดการเคลื่อนไหว

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

คิวรีตรวจจับการตั้งค่าลดการเคลื่อนไหว

ค่าของคิวรี:

  • no-preference — ผู้ใช้ไม่ได้ระบุการตั้งค่า
  • reduce — ผู้ใช้เปิดใช้การลดการเคลื่อนไหวในการตั้งค่าของ OS
<div class="box"></div>

ทางเลือกแบบตัดแอนิเมชันทั้งหมด (ไม่แนะนำ)

แนวทางทั่วไปแต่หยาบกระด้างที่หยุดแอนิเมชันทั้งหมด วิธีนี้ยังลบสัญญาณการเคลื่อนไหวที่มีประโยชน์และไม่ทำให้สับสนด้วย:

<div class="box"></div>

ทางเลือกที่ดีกว่า: เปิดใช้การเคลื่อนไหวโดยสมัครใจ

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

<button class="btn">Button</button>
<div class="card">Card</div>

สลับประเภทแอนิเมชัน

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

<div class="card demo-hover">Hover me</div>

แอนิเมชันที่วนไม่สิ้นสุด

แอนิเมชันที่วนไม่สิ้นสุด เช่น ตัวหมุนและการเต้นเป็นจังหวะ เป็นปัญหาโดยเฉพาะ ควรจัดเตรียมทางเลือกสำรองแบบไม่เคลื่อนไหว:

<div class="spinner"></div>

เอฟเฟกต์พารัลแลกซ์

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

<div class="parallax">Parallax section</div>

การเข้าถึงผ่าน JavaScript

ตรวจสอบการตั้งค่าใน JavaScript เมื่อใช้ส่วนติดต่อโปรแกรมแอนิเมชันบนเว็บหรือไลบรารีการเลื่อน:

<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
  const el = document.getElementById('rm-spinner');
  const status = document.getElementById('rm-status');
  if (!reducedMotion.matches) {
    el.classList.add('spin');
    status.textContent = 'Motion allowed — spinning';
  } else {
    status.textContent = 'Reduced motion — animation skipped';
  }
</script>

WCAG กับการเคลื่อนไหว

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

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

ในแท็บการแสดงผลของ Chrome DevTools ให้เปิดใช้ตัวเลือก "จำลอง CSS สำหรับการลดการเคลื่อนไหว" เพื่อทดสอบโดยไม่ต้องเปลี่ยนการตั้งค่า OS ใน macOS ให้ไปที่ การตั้งค่าระบบ → การช่วยการเข้าถึง → ลดการเคลื่อนไหว

บันทึกเจตนา

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

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

แนวทางใดจัดการการตั้งค่าลดการเคลื่อนไหวได้ดีที่สุดสำหรับเอฟเฟกต์ยกการ์ดเมื่อวางเมาส์เหนือ

ทบทวน

ใช้ prefers-reduced-motion: reduce เพื่อตรวจจับความไวต่อการเคลื่อนไหว แทนที่จะหยุดแอนิเมชันทั้งหมด ให้ค่าเริ่มต้นไม่มีการเคลื่อนไหวและเปิดใช้การเคลื่อนไหวโดยสมัครใจภายในคิวรี no-preference แทนที่แอนิเมชันการแปลงที่ทำให้สับสนด้วยการเปลี่ยนผ่านความทึบแสงหรือสีสำหรับผู้ใช้ที่ลดการเคลื่อนไหว ทดสอบด้วยการจำลองใน DevTools

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

บทเรียน “แอนิเมชันที่เข้าถึงได้ด้วย prefers-reduced-motion” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “แอนิเมชันที่เข้าถึงได้ด้วย prefers-reduced-motion”

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

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

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

บทเรียน “แอนิเมชันที่เข้าถึงได้ด้วย prefers-reduced-motion” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ไวยากรณ์ @keyframes และคุณสมบัติแอนิเมชัน
  2. ทิศทาง โหมดเติม และจำนวนรอบของแอนิเมชัน
  3. การเชื่อมต่อและจัดลำดับแอนิเมชัน
  4. แอนิเมชันที่เข้าถึงได้ด้วย prefers-reduced-motion
← กลับไปที่ CSS Academy