حركة يمكن الوصول إليها: التصميم للحركة المفضلة ذات الحركة المنخفضة دون فقدان المعنى
كيفية تصميم حركة تحترم إعدادات الحركة المنخفضة والاضطرابات الدهليزية: ما يتطلبه WCAG، وما يجب إزالته، وما يجب الاحتفاظ به، وكيفية اختباره.
الوجبات الجاهزة الأساسية
عندما يقوم المستخدم بتشغيل الحركة المنخفضة، احتفظ بمعنى كل رسم متحرك ولكن قم بإزالة الحركة: استبدل الشرائح والتكبير/التصغير واختلاف المنظر بتلاشي قصير أو تغييرات فورية، وأوقف حلقات التشغيل التلقائي، ولا تعتمد أبدًا على الحركة وحدها لتوصيل شيء ما. على الويب، اكتشف الإعداد باستخدام استعلام الوسائط المفضلة لتقليل الحركة.
لماذا يهم
بالنسبة لبعض الأشخاص، الحركة على الشاشة ليست مسألة ذوق. تشير W3C إلى أن الرسوم المتحركة يمكن أن تؤدي إلى اضطرابات دهليزية، مع ردود فعل تشمل الغثيان والصداع النصفي، وفي الحالات الشديدة، الحاجة إلى الراحة في الفراش للتعافي. تسمح أنظمة التشغيل للأشخاص بطلب حركة أقل، ويتم عرض هذا الطلب على الويب باعتباره استعلام الوسائط المفضلة ذات الحركة المنخفضة. يتم تقليل قيمته عندما يقوم المستخدم بتشغيل الإعداد.
ما يطلبه WCAG
يغطي معياران للنجاح WCAG الحركة. 2.2.2 ينطبق الإيقاف المؤقت والإيقاف والإخفاء على الحركة التي تبدأ تلقائيًا، مثل الدوارات والرسوم المتحركة المتكررة، وتتطلب طريقة لإيقافها مؤقتًا أو إيقافها أو إخفائها. 2.3.3 الرسوم المتحركة من التفاعلات (المستوى AAA) تنطبق على الحركة الناتجة عن تفاعل المستخدم، وتقترح تجنب الرسوم المتحركة غير الضرورية، أو تقديم عنصر تحكم لإيقاف تشغيلها، أو استخدام إعداد تقليل الحركة في نظام التشغيل. حتى عندما لا تكون هناك حاجة إلى AAA، فإن اتباعها يعد ممارسة جيدة.
أزل الحركة، واحتفظ بالمعنى
انخفاض الحركة لا يعني عدم وجود ردود فعل. لا يزال المستخدم الذي يضغط على الزر بحاجة إلى معرفة أنه يعمل. الهدف هو الحفاظ على تغيير الحالة وإسقاط السفر.
- إزالة أو تقليل: الشرائح الكبيرة، والتكبير/التصغير، واختلاف المنظر، والحركة المرتبطة بالتمرير، والدوران، وحلقات التشغيل التلقائي، والفيديو في الخلفية.
- احتفظ: بتغييرات اللون والعتامة، ومؤشرات التركيز، وانتقالات الحالة القصيرة، ومعلومات التقدم.
- الاستبدال: انتقالات الصفحة واللوحة بتلاشي قصير أو تغيير فوري.
- أبدًا: استخدم الحركة باعتبارها الطريقة الوحيدة لإظهار خطأ أو تغيير أو عنصر جديد.
تنفيذها
على الويب، قم بلف الحركة غير الضرورية في @media (يفضل الحركة المخفضة: لا تفضيل)، أو قم بتجاوزها داخل @media (يفضل الحركة المخفضة: تقليل). في 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; });مفتاح Principle للتذكر
- يمكن أن تؤدي الحركة إلى إصابة بعض الأشخاص بأمراض جسدية؛ احترام الإعداد
- إزالة السفر والتكبير/التصغير واختلاف المنظر والتشغيل التلقائي؛ الحفاظ على تغييرات الحالة وردود الفعل
- يغطي 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 البشرية