0Pricing
Web Accessibility Academy · บทเรียน

หยุดชั่วคราว หยุด และซ่อนเนื้อหาที่เคลื่อนที่อัตโนมัติ

ให้ผู้ใช้ควบคุมภาพหมุนและวิดีโอ

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

ให้ผู้ใช้ควบคุม

หากเนื้อหาเคลื่อนไหวเอง ผู้ใช้ต้องมีทางหยุด WCAG เรียกสิ่งนี้ว่าหยุดชั่วคราว หยุด หรือซ่อนสำหรับเนื้อหาที่เคลื่อนไหวอัตโนมัติ ⏸️

อะไรจัดเป็นการเคลื่อนไหวอัตโนมัติ

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

กฎห้าวินาที

เกณฑ์นี้ครอบคลุมการเคลื่อนไหวที่นานเกินห้าวินาทีและทำงานควบคู่ไปกับเนื้อหาอื่น ภาพเคลื่อนไหวเปิดเรื่องสั้น ๆ ได้รับการยกเว้น

เหตุใดจึงสำคัญ

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

เสนอการควบคุมหยุดชั่วคราว

วิธีแก้ที่ง่ายที่สุดคือปุ่มหยุดชั่วคราวจริง ๆ ให้ผู้ใช้หยุดภาพหมุน เพื่ออ่านสไลด์ให้จบอย่างสบายใจ

<button aria-label="Pause slideshow">Pause</button>

หยุดมีผลมากกว่าหยุดชั่วคราว

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

การซ่อนก็เป็นอีกทางเลือก

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

หยุดชั่วคราวเมื่อวางเมาส์และเมื่อได้รับโฟกัส

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

ทำให้เข้าถึงการควบคุมได้

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

ใช้ร่วมกับการลดการเคลื่อนไหว

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

@media (prefers-reduced-motion: reduce) {
  .carousel { animation-play-state: paused; }
}

ข้ามการเลื่อนไปอัตโนมัติ

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

ตรวจสอบความเข้าใจ

กฎเรื่องหยุดชั่วคราว หยุด หรือซ่อนกำหนดให้ทำอะไร

ทบทวน

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

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

บทเรียน “หยุดชั่วคราว หยุด และซ่อนเนื้อหาที่เคลื่อนที่อัตโนมัติ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “หยุดชั่วคราว หยุด และซ่อนเนื้อหาที่เคลื่อนที่อัตโนมัติ”

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

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

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

บทเรียน “หยุดชั่วคราว หยุด และซ่อนเนื้อหาที่เคลื่อนที่อัตโนมัติ” ใช้เวลานานแค่ไหน

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

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

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

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

  1. prefers-reduced-motion ใน CSS และ JS
  2. ความผิดปกติของระบบทรงตัวและความเสี่ยงจากพารัลแลกซ์
  3. เกณฑ์การกะพริบสามครั้งสำหรับอาการชัก
  4. หยุดชั่วคราว หยุด และซ่อนเนื้อหาที่เคลื่อนที่อัตโนมัติ
← กลับไปที่ Web Accessibility Academy