การเคลื่อนไหวที่เข้าถึงได้: การออกแบบให้ชอบ-ลดการเคลื่อนไหวโดยไม่สูญเสียความหมาย
วิธีการออกแบบการเคลื่อนไหวที่คำนึงถึงการตั้งค่าการเคลื่อนไหวลดลงและความผิดปกติของการทรงตัว: สิ่งที่ WCAG ต้องการ สิ่งที่ต้องถอด สิ่งที่ควรเก็บไว้ และวิธีการทดสอบ
หลัก Takeaway
เมื่อผู้ใช้เปิดการเคลื่อนไหวแบบลดขนาด ให้คงความหมายของทุกภาพเคลื่อนไหวไว้แต่ลบการเคลื่อนไหวนั้นออก: แทนที่สไลด์ การซูม และพารัลแลกซ์ด้วยการค่อยๆ จางลงหรือการเปลี่ยนแปลงในทันที หยุดการเล่นวนซ้ำอัตโนมัติ และอย่าพึ่งพาการเคลื่อนไหวเพียงอย่างเดียวเพื่อสื่อสารบางสิ่ง บนเว็บ ให้ตรวจจับการตั้งค่าด้วยการสืบค้นสื่อตามความชอบ-ลดการเคลื่อนไหว
ทำไมมันถึงสำคัญ
สำหรับบางคน การเคลื่อนไหวบนหน้าจอไม่ใช่เรื่องของรสนิยม W3C ตั้งข้อสังเกตว่าแอนิเมชั่นสามารถกระตุ้นให้เกิดความผิดปกติของการทรงตัว โดยมีปฏิกิริยาต่างๆ เช่น อาการคลื่นไส้ ไมเกรน และในกรณีที่รุนแรง จำเป็นต้องนอนพักเพื่อฟื้นตัว ระบบปฏิบัติการอนุญาตให้ผู้คนร้องขอการเคลื่อนไหวน้อยลง และบนเว็บนั้นคำขอนั้นถูกเปิดเผยเป็นการสืบค้นสื่อตามความชอบ-ลดการเคลื่อนไหว ค่าของมันจะลดลงเมื่อผู้ใช้เปิดการตั้งค่า
WCAG ถามอะไร
เกณฑ์ความสำเร็จ WCAG สองเกณฑ์ครอบคลุมการเคลื่อนไหว 2.2.2 หยุด หยุด ซ่อน ใช้กับการเคลื่อนไหวที่เริ่มโดยอัตโนมัติ เช่น ภาพหมุนและภาพเคลื่อนไหววนซ้ำ และต้องใช้วิธีหยุดชั่วคราว หยุด หรือซ่อน 2.3.3 แอนิเมชันจากการโต้ตอบ (ระดับ AAA) ใช้กับการเคลื่อนไหวที่ทริกเกอร์โดยการโต้ตอบของผู้ใช้ และแนะนำให้หลีกเลี่ยงแอนิเมชันที่ไม่จำเป็น เสนอการควบคุมเพื่อปิด หรือใช้การตั้งค่าลดการเคลื่อนไหวของระบบปฏิบัติการ แม้ว่าไม่จำเป็นต้องใช้ AAA แต่การปฏิบัติตามแนวทางปฏิบัติที่ดี
ลบการเคลื่อนไหว เก็บความหมาย
การเคลื่อนไหวที่ลดลงไม่ได้หมายความว่าไม่มีการตอบรับ ผู้ใช้ที่กดปุ่มยังคงต้องรู้ว่ามันใช้งานได้ เป้าหมายคือเพื่อให้รัฐเปลี่ยนแปลงและลดการเดินทาง
- ลบหรือย่อ: สไลด์ขนาดใหญ่ การซูม พารัลแลกซ์ การเคลื่อนไหวที่ลิงก์กับการเลื่อน การหมุน การเล่นวนซ้ำอัตโนมัติ และวิดีโอพื้นหลัง
- Keep: การเปลี่ยนสีและความทึบ ตัวระบุโฟกัส การเปลี่ยนสถานะแบบสั้น ข้อมูลความคืบหน้า
- แทนที่: การเปลี่ยนหน้าและพาเนลด้วย cross-fade สั้น ๆ หรือการเปลี่ยนแปลงทันที
- ไม่เคย: ใช้การเคลื่อนไหวเป็นวิธีเดียวที่จะแสดงข้อผิดพลาด การเปลี่ยนแปลง หรือรายการใหม่
การนำไปปฏิบัติ
บนเว็บ ให้รวมการเคลื่อนไหวที่ไม่จำเป็นไว้ใน @media (prefers-reduced-motion: no-preference) หรือแทนที่การเคลื่อนไหวที่ไม่จำเป็นใน @media (prefers-reduced-motion: ลด) ใน JavaScript ให้อ่าน window.matchMedia('(prefers-reduced-motion:ย่อ)') และฟังการเปลี่ยนแปลง แพลตฟอร์มดั้งเดิมเปิดเผยการตั้งค่าเดียวกัน: SwiftUI, UIKit และ Android ทั้งหมดนี้ให้คุณตรวจสอบได้ หากระบบการออกแบบของคุณมีโทเค็นการเคลื่อนไหว ให้กำหนดตัวแปรที่ลดลงสำหรับแต่ละโทเค็น เพื่อให้ทุกส่วนประกอบทำงานในลักษณะเดียวกัน
การทดสอบ
เปิดการเคลื่อนไหวที่ลดลงในระบบปฏิบัติการของคุณและดำเนินการตามทุกโฟลว์คีย์ ตรวจสอบว่าไม่มีอะไรสำคัญสูญหาย ไม่มีการวนซ้ำเริ่มต้นโดยอัตโนมัติ และการเลื่อนจะไม่ย้ายเนื้อหาไปเกินกว่าที่การเลื่อนทำ เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์สามารถจำลองการตั้งค่าได้เช่นกัน
ตัวอย่างการใช้งานการผลิต
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });คีย์ Principles ที่ต้องจำ
- การเคลื่อนไหวอาจทำให้บางคนป่วยทางร่างกายได้ เคารพการตั้งค่า
- ลบการเดินทาง การซูม พารัลแลกซ์ และการเล่นอัตโนมัติ รักษาการเปลี่ยนแปลงสถานะและข้อเสนอแนะ
- WCAG 2.2.2 ครอบคลุมการเคลื่อนไหวอัตโนมัติ 2.3.3 ครอบคลุมถึงการเคลื่อนไหวจากการมีปฏิสัมพันธ์
- ตรวจจับการตั้งค่าด้วยการตั้งค่า-ลดการเคลื่อนไหวและบนแต่ละแพลตฟอร์มดั้งเดิม
- ออกแบบตัวแปรที่ลดลงสำหรับโทเค็นการเคลื่อนไหวแต่ละรายการ
คำถามที่พบบ่อย
แหล่งที่มา
- Understanding SC 2.3.3: Animation from Interactions — W3C ไหว
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C ไหว
- prefers-reduced-motion — MDN เว็บเอกสาร
- Motion — แนวทางอินเทอร์เฟซของมนุษย์ของ Apple