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

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

เมื่ออายุ 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 วินาทีที่ระบุไว้ในหลักเกณฑ์ WCAG 2.0 AA ก็ควรใช้อย่างระมัดระวัง และวิธีที่น่าเชื่อถือที่สุดคือ การให้สิทธิ์ผู้ใช้ที่ระบุว่าต้องการลดการเคลื่อนไหวโดยการให้ สิทธิ์ควบคุมภาพเคลื่อนไหวแต่เพียงผู้เดียว ซึ่งช่วยให้ผู้ใช้เริ่มและหยุด ภาพเคลื่อนไหวได้โดยใช้ตัวควบคุมเฉพาะ เช่น ปุ่มเล่นและปุ่มหยุดชั่วคราว ตามลำดับ

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

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

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

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

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

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

อนุญาตให้ผู้ใช้เลือก

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

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