ภาพเคลื่อนไหวและการเคลื่อนไหว

คุณเคยนั่งรถ เรือ หรือเครื่องบินแล้วรู้สึกเหมือนโลกหมุนไปรอบๆ ตัวเองอย่างฉับพลันไหม หรือเมื่อเป็นไมเกรน จนทำให้ภาพเคลื่อนไหวในโทรศัพท์หรือแท็บเล็ต "สร้างความสุข" แล้วทำให้คุณป่วยอย่างกะทันหัน หรือบางทีคุณอาจไวต่อ การเคลื่อนไหวทุกประเภทมาโดยตลอด นี่เป็นตัวอย่างของความผิดปกติ เกี่ยวกับขนย้ายที่แตกต่างกันไป

เมื่ออายุ 40 ปี ผู้ใหญ่กว่า 35% จะเคยประสบปัญหาความผิดปกติของหูชั้นในรูปแบบใดรูปแบบหนึ่ง ซึ่งอาจทำให้เวียนศีรษะเป็นพักๆ ชั่วคราว เวียนศีรษะจากไมเกรน หรือความบกพร่องของหูชั้นในแบบถาวร

นอกจากจะทำให้เวียนศีรษะแล้ว ผู้คนจำนวนมากยังพบว่าเนื้อหาที่เคลื่อนไหว กะพริบ หรือเลื่อนไปมาทำให้เสียสมาธิ ผู้ที่เป็น ADHD และโรคสมาธิสั้นอื่นๆ อาจเสียสมาธิจากองค์ประกอบแบบภาพเคลื่อนไหวมากจนลืมไปเลยว่าทำไมจึงเข้าเว็บไซต์หรือแอปตั้งแต่แรก

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

เนื้อหาที่กะพริบและเคลื่อนไหว

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

หลักเกณฑ์เกี่ยวกับแสงกะพริบของ WCAG ไม่แนะนำให้ใช้สิ่งต่อไปนี้

• กะพริบมากกว่า 3 ครั้งใน 1 วินาที
• แสงแฟลชต่ำกว่าเกณฑ์แสงแฟลชทั่วไปและแสงแฟลชสีแดง

ในกรณีที่ดีที่สุด แสงแฟลชเหล่านี้อาจทำให้ไม่สามารถใช้หน้าเว็บได้ หรือในกรณีที่เลวร้ายที่สุด อาจทําให้ป่วย

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

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

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

หยุดชั่วคราว หยุด หรือซ่อนการเคลื่อนไหว

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

ตัวอย่างเช่น สมมติว่าผลิตภัณฑ์ดิจิทัลของคุณมีภาพเคลื่อนไหวจำนวนมาก ลองเพิ่มปุ่มเปิด/ปิด JavaScript ที่เข้าถึงได้เพื่อให้ผู้ใช้ควบคุมประสบการณ์การใช้งานของตนเองได้ เมื่อสลับปุ่มเป็น "ปิดการเคลื่อนไหว" ภาพเคลื่อนไหวทั้งหมดจะหยุดอยู่ที่หน้าจอนั้นและหน้าจออื่นๆ ทั้งหมด

ใช้การค้นหาสื่อ

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

@prefers-reduced-motion

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

ผู้ใช้อาจตั้งค่ากำหนดการแสดงผลเพื่อลดการเคลื่อนไหว การตั้งค่าเหล่านี้จะแตกต่างกันไปตามระบบปฏิบัติการ และอาจแสดงผลในเชิงบวกหรือเชิงลบ @prefers-reduced-motion ช่วยให้คุณออกแบบเว็บไซต์ที่เป็นไปตามค่ากําหนดเหล่านี้ได้

ส่วนใน macOS และ Android ผู้ใช้จะเปิดการตั้งค่าเพื่อลดการเคลื่อนไหว ใน macOS ผู้ใช้สามารถตั้งค่าลดการเคลื่อนไหวได้ในการตั้งค่า > การช่วยเหลือพิเศษ > จอแสดงผล การตั้งค่าของ Android คือนำภาพเคลื่อนไหวออก ใน Windows การตั้งค่าจะจัดกรอบทางบวกเป็นแสดงภาพเคลื่อนไหว ซึ่งจะเปิดอยู่โดยค่าเริ่มต้น ผู้ใช้ต้องปิดการตั้งค่านี้เพื่อลดการเคลื่อนไหว

หรือดังที่แสดงในตัวอย่างชุดถัดไป คุณสามารถเขียนโค้ดให้ภาพเคลื่อนไหวทั้งหมดหยุดเคลื่อนที่ภายในไม่เกิน 5 วินาทีแทนที่จะเล่นวนซ้ำไปเรื่อยๆ

การเพิ่มประสิทธิภาพแบบต่อเนื่องสําหรับการเคลื่อนไหว

ในฐานะนักออกแบบและนักพัฒนาซอฟต์แวร์ เรามีหลายทางเลือกให้เลือก ซึ่งรวมถึงสถานะการเคลื่อนไหวเริ่มต้นและปริมาณการเคลื่อนไหวที่จะแสดง ลองมาดูตัวอย่างล่าสุด เกี่ยวกับภาพเคลื่อนไหวอีกครั้ง

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

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

การค้นหาสื่อแบบเลเยอร์

คุณสามารถใช้คิวรี่สื่อหลายรายการเพื่อให้ผู้ใช้มีตัวเลือกมากขึ้น มาลองใช้ @prefers-color-scheme, @prefers-contrast และ @prefers-reduced-motion ร่วมกัน

ให้ผู้ใช้เลือก

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

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

ทดสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับการช่วยเหลือพิเศษเกี่ยวกับการเคลื่อนไหวและภาพเคลื่อนไหว