เคารพการตั้งค่าการเคลื่อนไหวของผู้ใช้

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

ระบบปฏิบัติการใหม่ส่วนใหญ่ทำให้ผู้ใช้สามารถตั้งค่ากำหนดการเคลื่อนไหวในการตั้งค่าระดับระบบได้ ข้อความค้นหาสื่อ prefers-reduced-motion (ส่วนหนึ่งของข้อกำหนดการสืบค้นสื่อระดับ 5) ช่วยให้เราตรวจหาการตั้งค่าการเคลื่อนไหวระดับระบบของผู้ใช้ และใช้รูปแบบ CSS ที่สอดคล้องกับสิ่งนั้น

สองตัวเลือกสำหรับ prefers-reduced-motion ที่ต้องการคือ reduce หรือ no-preference เราสามารถใช้วิธีต่อไปนี้ใน CSS ของเราเพื่อปิดแอนิเมชั่นขององค์ประกอบ หากผู้ใช้ตั้ง ค่ากำหนดสำหรับการเคลื่อนไหวที่ลดลง อย่างชัดเจน :

 .some-element { animation: bounce 1200ms; } @media (prefers-reduced-motion: reduce) { .some-element { animation: none; } }

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

 @media (prefers-reduced-motion: no-preference) { .some-element { animation: bounce 1200ms; } }

ข้อดีเพิ่มเติมคือเบราว์เซอร์รุ่นเก่าที่ไม่รองรับการ prefers-reduced-motion จะไม่สนใจกฎและแสดงเฉพาะองค์ประกอบดั้งเดิมที่ไม่มีการเคลื่อนไหวของเรา

กฎข้อไหน?

ต่างจากข้อความค้นหาสื่อความกว้าง min-width และความกว้าง max-width ที่ความเห็นพ้องต้องกันที่กำหนดไว้มากหรือน้อยนั้นต้องมาก่อนอุปกรณ์เคลื่อนที่ (ดังนั้นจึง min-width เป็นหลัก) ไม่มีทาง "ถูกต้อง" วิธีเดียว ในการเขียนสไตล์การลดการเคลื่อนไหวของคุณ ฉันมักจะชอบตัวอย่างที่สอง (การใช้แอนิเมชั่นก็ต่อเมื่อ prefers-reduced-motion: no-preference ประเมินว่าจริง) ด้วยเหตุผลที่ระบุไว้ข้างต้น Tatiana Mac เขียนบทความที่ยอดเยี่ยมนี้ ซึ่งครอบคลุมแนวทางบางอย่างที่นักพัฒนาอาจพิจารณา รวมถึงประเด็นดีๆ อื่นๆ อีกมากมาย รวมถึงคำถามสำคัญที่ต้องถามเมื่อออกแบบด้วยการเคลื่อนไหวบนเว็บ

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

การใช้งานจริง: ใช้พฤติกรรม prefers-reduced-motion เพื่อเลื่อนดู

prefers-reduced-motion มีแอปพลิเคชันมากมายนอกเหนือจากการใช้ (หรือไม่ใช้) ภาพเคลื่อนไหวหรือการเปลี่ยนคีย์เฟรม ตัวอย่างหนึ่งคือการเลื่อนอย่างราบรื่น หากเราตั้งค่า scroll-behaviour: smooth บนองค์ประกอบ html ของเรา เมื่อผู้ใช้คลิกลิงก์ anchor ในหน้าเว็บ พวกเขาจะเลื่อนไปยังตำแหน่งที่เหมาะสมบนหน้าได้อย่างราบรื่น ( ไม่รองรับใน Safari ในปัจจุบัน ):

 html { scroll-behavior: smooth; }

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

 @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

การจัดเลี้ยงสำหรับการตั้งค่าการเคลื่อนไหวใน Javascript

บางครั้งเราจำเป็นต้องใช้การเคลื่อนไหวใน JavaScript มากกว่า CSS ในทำนองเดียวกัน เราสามารถตรวจหาการตั้งค่าการเคลื่อนไหวของผู้ใช้ด้วย JS โดยใช้ matchMedia มาดูกันว่าเราจะใช้การเลื่อนแบบมีเงื่อนไขในโค้ด JS ของเราได้อย่างไร:

 /* Set the media query */ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)') button.addEventListener('click', () => { /* If the media query matches, set scroll behavior variable to 'auto', otherwise set it to 'smooth' */ const behavior = prefersReducedMotion.matches ? 'auto' : 'smooth' /* When the button is clicked, the user will be scrolled to the top */ window.scrollTo({ x: 0, y: 0, behavior }) })

สามารถใช้หลักการเดียวกันนี้เพื่อตรวจสอบว่าจะใช้ UI ที่มีการเคลื่อนไหวสูงกับไลบรารี JS หรือไม่ หรือแม้แต่โหลดไลบรารีเอง

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

 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)') const loadGSAPAndInitAnimations = () => { /* If user prefers reduced motion, do nothing */ if (prefersReducedMotion.matches) return /* Otherwise, import the GSAP module and initialize animations */ import('gsap').then((object) => { const gsap = object.default /* Initialize animations with GSAP here */ }) } loadGSAPAndInitAnimations()

reduced-motion ไม่ได้หมายความว่าไม่มีการเคลื่อนไหว

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

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

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

บางครั้งฉันเห็นนักพัฒนาใช้รูปแบบการเคลื่อนไหวที่ลดลงในลักษณะต่อไปนี้ ซึ่งกำจัดการเปลี่ยนภาพและภาพเคลื่อนไหวทั้งหมดในทุกองค์ประกอบ:

 @media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

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

ในข้อมูลโค้ดต่อไปนี้ เรามีปุ่มที่ ขยายใหญ่ขึ้นเมื่อวางเมาส์เหนือ เรากำลังเปลี่ยนสีและสเกล แต่ผู้ใช้ที่ต้องการลดการเคลื่อนไหวจะไม่มีการเปลี่ยนสีเลย:

 button { background-color: hotpink; transition: color 300ms, background-color 300ms, transform 500ms cubic-bezier(.44, .23, .47, 1.27); } button:hover, button:focus { background-color: darkviolet; color: white; transform: scale(1.2); } @media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } button { /* Even though we would still like to transition the colors of our button, the following rule will have no effect */ transition: color 200ms, background-color 200ms; } button:hover, button:focus { /* Preventing the button scaling on hover */ transform: scale(1); } }

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

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

เมื่อการลบแอนิเมชั่นจะดีกว่า

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

 @media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }

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

ผลรวมของทุกส่วน

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

ในบทความของ Tatiana เธอแนะนำให้จัดระเบียบแอนิเมชั่น (ด้วย prefers-reduced-motion ) ในไฟล์ CSS ไฟล์เดียว ซึ่งสามารถโหลดได้ก็ต่อเมื่อ (prefers-reduced-motion: no-preference) ประเมินว่าเป็นจริง การดูผลรวมของแอนิเมชั่นทั้งหมดของเราอาจมีประโยชน์เพิ่มเติมในการช่วยให้เรา เห็นภาพประสบการณ์ การเยี่ยมชมไซต์โดยรวม และปรับแต่งสไตล์การลดการเคลื่อนไหวของเราให้เหมาะสม

Explicit Motion Toggle

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

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

การสาธิตต่อไปนี้มีวงกลมหลายวงที่ลอยอยู่รอบๆ พื้นหลัง สไตล์แอนิเมชั่นเริ่มต้นถูกกำหนดโดยการตั้งค่าระบบของผู้ใช้ (โดย prefers-reduced-motion ) อย่างไรก็ตาม ผู้ใช้มีความสามารถในการสลับเปิดหรือปิดการเคลื่อนไหวผ่านปุ่ม สิ่งนี้จะเพิ่มคลาสให้กับ body ซึ่งเราสามารถใช้เพื่อกำหนดสไตล์ขึ้นอยู่กับความชอบที่เลือก เป็นโบนัส ตัวเลือกของการตั้งค่าการเคลื่อนไหว จะถูกเก็บไว้ในที่จัดเก็บในตัวเครื่องด้วย — ดังนั้นจึง “จำได้” เมื่อผู้ใช้เข้าชมครั้งต่อไป

คุณสมบัติที่กำหนดเอง

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

 .circle { animation-play-state: var(--playState, paused); }

หากผู้ใช้ตั้งค่ากำหนดสำหรับการเคลื่อนไหวที่ลดลงในการตั้งค่าระบบ เราสามารถตั้งค่าสถานะการเล่นเป็น running :

 @media (prefers-reduced-motion: no-preference) { body { --playState: running; } }

หมายเหตุ: การตั้งค่านี้ใน body ตรงข้ามกับองค์ประกอบแต่ละรายการ หมายความว่าสามารถสืบทอดคุณสมบัติที่กำหนดเองได้

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

 // This will pause all animations that use the `--playState` custom property document.body.style.setProperty('--playState', 'paused')

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

ขอขอบคุณเป็นพิเศษกับ Scott O'Hara สำหรับคำแนะนำในการปรับปรุงการเข้าถึงของปุ่มสลับ เขาทำให้ฉันรู้ว่าโปรแกรมอ่านหน้าจอบางคนไม่ประกาศข้อความปุ่มที่อัปเดต ซึ่งจะเปลี่ยนไปเมื่อผู้ใช้คลิกปุ่ม และแนะนำ role="switch" ที่ปุ่มนั้นแทน โดยจะเลือกเปิดหรือ off aria-checked on คลิก

ส่วนประกอบวิดีโอ

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

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

(ต่อมาฉันมาที่โพสต์นี้โดย Scott O'Hara โดยให้รายละเอียดกรณีการใช้งานที่แน่นอนนี้)

การใช้ <picture> องค์ประกอบ

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

ฉันสร้างการสาธิตเวอร์ชันดัดแปลงซึ่งเพิ่มตัวเลือกนี้ (เปิด reduced-motion ในการตั้งค่าระบบของคุณเพื่อดูการทำงาน) น่าเสียดายที่เมื่อสลับไปมาระหว่างตัวเลือกแบบเคลื่อนไหวและแบบไม่มีการเคลื่อนไหวใน Chrome ไฟล์ GIF จะดาวน์โหลดไฟล์ GIF อีกครั้งในแต่ละครั้ง ซึ่งไม่ได้เป็นเช่นนั้น เบราว์เซอร์อื่นๆ:

ถึงกระนั้น เทคนิคนี้ดูเหมือนจะเป็นวิธีการแสดง GIF ที่มีเกียรติมากขึ้น ซึ่งอาจสร้างปัญหาให้กับผู้ใช้ได้

การสนับสนุนเบราว์เซอร์และความคิดสุดท้าย

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

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

รู้สึกเหมือนชั้นที่ขาดหายไปที่นี่คือ เบราว์เซอร์ ฉันชอบที่จะเห็นเบราว์เซอร์ใช้การสลับ reduced-motion ซึ่งอยู่ในที่ที่ผู้ใช้สามารถเข้าถึงได้ง่าย เพื่อให้ผู้คนรู้ว่าจะหาได้จากที่ใดโดยไม่คำนึงถึงไซต์ที่พวกเขากำลังเรียกดู อาจสนับสนุนให้นักพัฒนาใช้เวลามากขึ้นในการรับรองความสามารถในการเข้าถึงการเคลื่อนไหวด้วย

แหล่งข้อมูลที่เกี่ยวข้อง

• ข้อกำหนดการสืบค้นข้อมูลสื่อระดับ 5, World Wide Web Consortium (W3C)
• prefers-reduced-motion , MDN Web Docs, Mozilla
• ออกแบบด้วยการลดการเคลื่อนไหวสำหรับความไวในการเคลื่อนไหว Val Head, Smashing Magazine
• แนวทางที่ไม่มีการเคลื่อนไหวในแอนิเมชั่นเป็นอันดับแรก Tatiana Mac
• เทคนิคภาพเคลื่อนไหวที่ลดลง เทค 2, Chris Coyier, CSS-Tricks
• การกลับมาเยี่ยมชม prefers-reduced-motion , The Reduced Motion Media Query, Eric Bailey, CSS-Tricks
• การลดการเคลื่อนไหวเพื่อปรับปรุงการช่วยสำหรับการเข้าถึง, Lindsey Kopacz