คุณเคยนั่งรถยนต์ เรือ หรือเครื่องบินแล้วรู้สึกว่า โลกหมุนอยู่ตลอดเวลาไหม หรือมีอาการไมเกรนจนเกิดเป็นภาพเคลื่อนไหว ในโทรศัพท์หรือแท็บเล็ตที่ "สร้างความประทับใจ" แล้วทำให้รู้สึกป่วยกะทันหัน หรือบางทีคุณอาจเคยตื่น กับการเคลื่อนไหวทุกประเภท นี่เป็นตัวอย่างของความผิดปกติ เกี่ยวกับขนตาประเภทต่างๆ
เมื่ออายุ 40 ปี ผู้ใหญ่มากกว่า 35% จะมีการทำงานผิดปกติของอวัยวะสืบพันธุ์ ซึ่งอาจนำไปสู่อาการวิงเวียนศีรษะชั่วคราว อาการเวียนศีรษะบ้านหมุนที่เกิดจากไมเกรน หรือมีความพิการของอวัยวะสืบพันธุ์ถาวรมากขึ้น
นอกจากทำให้เกิดอาการเวียนศีรษะบ้านหมุนแล้ว หลายๆ คนยังพบว่าเนื้อหาการเคลื่อนไหว การกะพริบ หรือการเลื่อน เนื้อหาที่ทำให้เสียสมาธิ ผู้ที่เป็นโรค ADHD และโรคสมาธิสั้นอื่นๆ อาจเสียสมาธิเนื่องจากองค์ประกอบที่เคลื่อนไหวได้มากเกินไปจนลืมว่าทำไมถึงได้เข้าเว็บไซต์หรือแอปตั้งแต่แรก
ในโมดูลนี้ เราจะมาดูวิธีที่จะช่วยสนับสนุนผู้ที่มีความผิดปกติ ที่เกิดจากการเคลื่อนไหวทุกประเภทได้ดียิ่งขึ้น
เนื้อหาที่กะพริบและเคลื่อนที่
เมื่อสร้างภาพเคลื่อนไหวและการเคลื่อนไหว คุณควรถามตัวเองว่าการเคลื่อนไหวขององค์ประกอบนั้นมากเกินไปหรือไม่ เช่น สีที่กะพริบจากมืดไปเป็นสีอ่อนหรือการเคลื่อนไหวบนหน้าจออย่างรวดเร็วสามารถทำให้เกิดอาการชักในผู้ที่เป็นโรคลมชักที่ไวต่อแสงกระตุ้น มีการประมาณการว่า 3% ของผู้ป่วยโรคลมชักทุกข์ทรมานจากโรคแพ้แสง และมักพบในผู้หญิงและคนอายุน้อย
หลักเกณฑ์เกี่ยวกับการกะพริบของ WCAG แนะนำให้ใช้กับหลักเกณฑ์ต่อไปนี้
- กะพริบมากกว่า 3 ครั้งใน 1 วินาที
- แสดงแฟลชต่ำกว่าเกณฑ์ของ Flash ทั่วไปและสีแดง
ท้ายที่สุดแล้ว แฟลชเหล่านี้อาจทำให้ไม่สามารถใช้หน้าเว็บหรืออาจนำไปสู่การเจ็บป่วยได้
สำหรับการเคลื่อนไหวที่รุนแรง คุณต้องทดสอบโดยใช้เครื่องมือวิเคราะห์โรคลมบ้าหมู (Photosensitive Epilepsy Analysis Tool หรือ 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 พร้อมกัน
อนุญาตให้ผู้ใช้เลือก
แม้ว่าการสร้างภาพเคลื่อนไหวลงในผลิตภัณฑ์ดิจิทัลของเราเพื่อสร้างความพึงพอใจ ให้กับผู้ใช้จะเป็นเรื่องสนุก แต่สิ่งสำคัญคือเราต้องตระหนักว่าบางคนจะได้รับผลกระทบจากการออกแบบเหล่านี้ ความไวต่อการเคลื่อนไหวอาจส่งผลกระทบต่อทุกคนได้ ตั้งแต่ความรู้สึกไม่สบายเล็กน้อยไปจนถึง การเจ็บป่วยหรือการชัก
คุณสามารถใช้เครื่องมือต่างๆ มากมายเพื่อให้ผู้ใช้ตัดสินใจได้ว่าอะไร เหมาะสำหรับพวกเขามากที่สุด แทนที่จะต้องเดาว่าการเคลื่อนไหวมากไปแค่ไหน เช่น เพิ่มปุ่มสลับเพื่อเปิดหรือปิดภาพเคลื่อนไหวภายในเว็บไซต์หรือแอป ลองตั้งค่าเริ่มต้นให้ปุ่มสลับเป็นปิด
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการช่วยเหลือพิเศษของการเคลื่อนไหวและภาพเคลื่อนไหว
เราสร้างอะไรได้บ้างที่แสดงถึงการตั้งค่าระบบปฏิบัติการของการเคลื่อนไหว
@prefers-reduced-motion