التصميم لتقليل الحركة
لماذا قد تكون الحركة مشكلة
لمن لديهم اضطرابات في جهاز الاتزان أو حساسية للحركة، قد تثير الحركة الكبيرة على الشاشة دوخة أو غثيانًا أو صداعًا. ومن المحفزات الشائعة تأثير اختلاف المنظر (parallax) والتكبير الكبير والدوران والانتقالات المنزلقة بملء الشاشة.
وقد يشتّت المحتوى المتحرك من يعانون صعوبات الانتباه. التصميم الحركي الجيد يجعل الحركة هادفة واختيارية.
ما تقوله WCAG
- 2.2.2 إيقاف مؤقت، إيقاف، إخفاء (A): المحتوى المتحرك أو الوامض أو المتمرر الذي يبدأ تلقائيًا ويستمر أكثر من 5 ثوانٍ يحتاج إلى وسيلة لإيقافه مؤقتًا أو إيقافه أو إخفائه.
- 2.3.3 الحركة الناتجة عن التفاعل (AAA): يمكن تعطيل الحركة الناتجة عن التفاعل ما لم تكن أساسية.
الشرائح المتحركة وفيديو الخلفية التلقائي والرسوم المتكررة هي الحالات المعتادة التي تحتاج زر إيقاف مؤقت ظاهرًا.
احترام إعداد المستخدم
تتيح أنظمة التشغيل للمستخدم طلب حركة أقل، وتكشف المتصفحات ذلك عبر استعلام الوسائط <code>;prefers-reduced-motion<;/code>;.
مثال على الكود لإيقاف حركة العنصر الرئيسي عندما يطلب المستخدم تقليل الحركة: <code>;@media (prefers-reduced-motion: reduce) { .hero { animation: none; transition: none; } }</code>;
تقليل الحركة لا يعني انعدامها. التلاشي القصير وتغيّر اللون مقبولان عادةً.
بدائل التصميم
- أحصِ كل حركة في التصميم وحدّد هل تحمل معنى أم هي زخرفة.
- استبدل الـ parallax والتكبير والدوران بتلاشٍ بسيط أو بلا حركة.
- احتفظ بحالة ثابتة تنقل المعلومة نفسها التي تنقلها الحركة.
- لا تشغّل شيئًا تلقائيًا إلى ما لا نهاية دون زر ظاهر لإيقافه.
اختبر بتفعيل إعداد تقليل الحركة في نظام التشغيل ثم جرّب المسارات الرئيسية.
الهدف ليس منع الحركة. فالحركة الصغيرة الهادفة قد تشرح التغييرات وتبيّن وجهة العنصر وتؤكد الإجراء.
- اجعل المدد قصيرة، غالبًا جزءًا من الثانية، عند تقديم تغذية راجعة للواجهة.
- حرّك العناصر مسافة قصيرة فقط. الحركة الواسعة عبر الشاشة أكثر إزعاجًا.
- تجنّب المحتوى الوامض. تحدّ WCAG 2.3.1 من المحتوى الذي يومض أكثر من ثلاث مرات في الثانية.
صمّم نسخة الحركة المخففة مع النسخة الكاملة، لا كفكرة لاحقة.
المصادر
- MDN Web Docs. prefers-reduced-motion. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- W3C. Understanding SC 2.2.2 Pause, Stop, Hide. https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.