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

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

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

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

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

การกะพริบและย้ายเนื้อหา

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

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

• กะพริบมากกว่า 3 ครั้งใน 1 วินาที
• ไฟกะพริบด้านล่าง เกณฑ์ทั่วไปของ Flash และ Red Flash

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

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

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

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

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

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

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

ใช้คิวรี่สื่อ

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

@prefers-reduced-motion

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

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

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

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

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

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

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

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

คิวรี่สื่อแบบเลเยอร์

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

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

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

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

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

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