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

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

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

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

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

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

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

การค้นหาสื่อแบบซ้อนกัน

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

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

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

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