هل سبق لك أن ركبت سيارة أو قارب أو طائرة وشعرت فجأة بأن العالم يدور؟ أو هل شعرت بالصداع النصفي فجأة بحيث تؤدي الصور المتحركة على هاتفك أو جهازك اللوحي إلى إرضاءك فجأة؟ أو ربما كنت دائمًا حساسًا لجميع أنواع الحركة؟ هذه أمثلة لأنواع مختلفة من الاضطرابات الدهنية.
عند بلوغ سن 40 عامًا، سيواجه أكثر من 35% من البالغين شكلاً من أشكال قصور القناة الدهليزية. قد يؤدي هذا إلى تعويذة دوار مؤقتة، أو دوار ناجم عن الصداع النصفي، أو إعاقة دهنية دائمة.
بالإضافة إلى إثارة الدوار، يجد الكثير من الأشخاص أنّ المحتوى يشتت انتباههم بسبب الحركة أو الوميض أو التمرير التي تشتت انتباههم. قد يكون الأشخاص الذين يعانون من اضطراب نقص الانتباه مع فرط النشاط (ADHD) وغير ذلك من اضطرابات نقص الانتباه تشتيتًا جدًا بسبب العناصر المتحركة لدرجة أنهم ينسون سبب زيارتهم لموقعك الإلكتروني أو تطبيقك في المقام الأول.
في هذه الوحدة، سنلقي نظرة على بعض الطرق التي يمكن من خلالها تقديم دعم أفضل للأشخاص الذين يعانون من جميع أنواع الاضطرابات الناتجة عن الحركة.
المحتوى الوامض والمنقول
عند إنشاء الرسوم المتحركة والحركة، يجب أن تسأل نفسك ما إذا كانت حركة العنصر زائدة. على سبيل المثال، يمكن أن تسبب الألوان الوامضة من الظلام إلى الفاتح أو الحركات السريعة على الشاشة، نوبات في الأشخاص الذين يعانون من صرع الحساسية للضوء. تشير التقديرات إلى أنّ 3% من الأشخاص الذين يعانون من الصرع يعانون من حساسية للضوء، وهذا شائع أكثر لدى النساء والشباب.
تنصح إرشادات WCAG بشأن الفلاش بعدم الاكتفاء بما يلي:
- يومض لأكثر من ثلاث مرات في أي ثانية واحدة
- وميض أقل من الفلاش العام والفلاش الأحمر.
وقد تؤدي هذه الوميض في أحسن الأحوال إلى عدم القدرة على استخدام صفحة الويب، أو في أسوأ الأحوال، قد تؤدي إلى الإصابة بالمرض.
في حال ممارسة أي حركة شديدة، يجب اختبارها باستخدام أداة تحليل الصرع الحساسية للضوء (PEAT). PEAT هي أداة مجانية لتحديد ما إذا كان محتوى الشاشة أو الفيديو أو الصور المتحركة يُحتمل أن يتسبّب في حدوث نوبات مرضية. لا يحتاج تطبيق PEAT إلى تقييم كل المحتوى، ولكن يجب تقييم المحتوى الذي يتضمّن وامضًا أو انتقالاً سريعًا بين ألوان الخلفية الفاتحة والداكنة، وذلك للحفاظ على أمانه.
سؤال آخر يجب أن تطرحه على نفسك حول الرسوم المتحركة والحركة هو ما إذا كانت حركة العنصر ضرورية لفهم المحتوى أو الإجراءات على الشاشة. إذا لم يكن ذلك ضروريًا، ففكر في إزالة كل الحركات - حتى الحركات الدقيقة - من العنصر الذي تقوم ببنائه أو تصميمه.
لنفترض أنك تعتقد أن حركة العنصر ليست ضرورية ولكن يمكن أن تعزز تجربة المستخدم بشكل عام، أو لا يمكنك إزالة الحركة لسبب آخر. في هذه الحالة، يجب عليك اتّباع إرشادات WCAG بشأن الحركة. تنص الإرشادات على ضرورة توفير خيار للمستخدمين لإيقاف الحركة مؤقتًا أو إيقافها أو إخفائها: بالنسبة إلى عناصر الحركة أو الوميض أو التمرير غير الضرورية التي تبدأ تلقائيًا وتستمر لأكثر من خمس ثوانٍ وتكون جزءًا من عناصر الصفحة الأخرى.
إيقاف الحركة مؤقتًا أو إيقافها أو إخفاؤها
أضِف آلية إيقاف مؤقت أو إيقاف أو إخفاء إلى صفحتك للسماح للمستخدمين بإيقاف صور الحركة المتحركة التي يُحتمل أن تكون تسبب مشاكل. يمكنك إجراء ذلك على مستوى الشاشة أو على مستوى العنصر.
على سبيل المثال، لنفترض أن منتجك الرقمي يتضمن الكثير من الرسوم المتحركة. يمكنك إضافة خيار تبديل JavaScript يمكن الوصول إليه للسماح للمستخدمين بالتحكّم في تجربتهم. عندما يتم تبديل الزر إلى "إيقاف الحركة"، يتم تجميد جميع الرسوم المتحركة على تلك الشاشة وجميع العناصر الأخرى.
استخدام الاستعلامات عن الوسائط
بالإضافة إلى انتقائي بشأن الصور المتحركة وتوفير خيارات للمستخدمين للإيقاف المؤقت والإيقاف وإخفاء الحركة وتجنب حلقات الصور المتحركة اللانهائية، يمكنك أيضًا إضافة استعلام عن الوسائط يركز على الحركة. يمنح هذا المستخدمين مزيدًا من الاختيار عندما يتعلق الأمر بما يتم عرضه على الشاشة.
@prefers-reduced-motion
على غرار طلبات البحث عن الوسائط التي تركّز على اللون في وحدة الألوان، يتحقّق الاستعلام عن الوسائط @prefers-reduced-motion من إعدادات نظام التشغيل للمستخدم المتعلّقة بالحركة.
يمكن للمستخدم تعيين تفضيلات العرض لتقليل الحركة. وتختلف هذه الإعدادات عبر أنظمة التشغيل، وقد تكون لها إطارات إيجابية أو سلبية. باستخدام @prefers-reduced-motion، يمكنك تصميم موقع إلكتروني يحترم هذه الإعدادات المفضّلة.
على نظامي التشغيل MacOS وAndroid، يفعِّل المستخدم الإعداد لتقليل الحركة. على نظام التشغيل MacOS، يمكن للمستخدم ضبط تقليل الحركة من الإعدادات > تسهيل الاستخدام > العرض. إعداد Android هو إزالة الصور المتحركة. على نظام التشغيل Windows، يكون الإعداد في الإطار بشكل إيجابي على النحو التالي: عرض الصور المتحركة، والذي يكون قيد التشغيل افتراضيًا. يجب على المستخدم إيقاف هذا الإعداد لتقليل الحركة.
وبدلاً من ذلك، كما هو موضح في المجموعة التالية من الأمثلة، يمكنك ترميز جميع الرسوم المتحركة لتتوقف عن الحركة خلال خمس ثوانٍ أو أقل بدلاً من التشغيل في حلقة لانهائية.
التحسين التدريجي للحركة
بصفتنا مصممين ومطورين، لدينا الكثير من الخيارات لاتخاذها، بما في ذلك حالات الحركة الافتراضية ومقدار الحركة التي يجب عرضها. لنلقِ نظرة أخرى على المثال الأخير عن الحركة.
لنفترض أننا قررنا أن الرسوم المتحركة غير ضرورية لفهم المحتوى على الشاشة. في هذه الحالة، يمكننا اختيار تعيين الحالة الافتراضية على الرسوم المتحركة ذات الحركة المخفّضة بدلاً من نسخة الحركة الكاملة. ما لم يطلب المستخدمون الصور المتحركة على وجه التحديد، يتم إيقاف الرسوم المتحركة.
لا يمكننا التنبؤ بمستوى الحركة الذي سيتسبب في حدوث مشاكل للأشخاص الذين يعانون من النوبة، والدهليزية، وغيرها من الاضطرابات البصرية. حتى القدر الصغير من الحركة على الشاشة يمكن أن يؤدي إلى الدوخة أو عدم وضوح الرؤية أو ما هو أسوأ. لذلك، في المثال التالي، نفترض بشكل افتراضي عدم وجود رسوم متحركة.
استعلامات عن الوسائط ذات الطبقات
يمكنك استخدام عدة استعلامات عن الوسائط لمنح المستخدمين المزيد من الخيارات. لنستخدم @prefers-color-scheme و@prefers-contrast و@prefers-reduced-motion معًا.
السماح للمستخدمين بالاختيار
على الرغم من أنه قد يكون من الممتع إنشاء رسوم متحركة في منتجاتنا الرقمية لإسعاد المستخدمين، فمن الأهمية بمكان أن نتذكر أن بعض الأشخاص سيتأثرون بهذه التصميمات. يمكن أن تؤثر حساسية الحركة على أي شخص، بدءًا من الشعور بإزعاج بسيط إلى التسبب في مرض مرهق أو نوبة مرضية.
يمكنك استخدام عدد من الأدوات المختلفة للسماح للمستخدم بتحديد ما هو أفضل له، بدلاً من تخمين مقدار الحركة الكبيرة جدًا. على سبيل المثال، يمكنك إضافة مفتاح تبديل لتفعيل الصور المتحركة أو إيقافها ضمن موقعك الإلكتروني أو تطبيق الويب. وننصحك بضبط خيار التبديل تلقائيًا على إيقاف.
التحقّق من استيعابك
اختبر معلوماتك عن الحركة وسهولة الوصول إلى الرسوم المتحركة.
ما الذي يمكننا بناؤه الذي يعكس إعدادات نظام التشغيل للحركة؟
@prefers-reduced-motion