ندرك أنّ التصميم المتجاوب هو فكرة جيدة لتوفير أفضل تجربة على الأجهزة المتعددة، ولكنّه يحقّق أيضًا فائدة في ما يتعلّق بإمكانية الوصول.
إليك مثالاً على موقع إلكتروني مثل Udacity:
قد يكبّر المستخدم الذي يعاني من ضعف في النظر ويواجه صعوبة في قراءة النصوص الصغيرة الصفحة، وربما بنسبة تصل إلى %400. بما أنّ الموقع الإلكتروني يستخدم تصميمًا سريع الاستجابة، تتم إعادة ترتيب الواجهة لتناسب "نافذة العرض الأصغر" (في الواقع، الصفحة الأكبر)، ما يجعله خيارًا رائعًا لمستخدمي أجهزة الكمبيوتر الذين يحتاجون إلى تكبير الشاشة ولمستخدمي برامج قراءة الشاشة على الأجهزة الجوّالة أيضًا. أي أنه موقف مربح لكلا الطرفين. في ما يلي الصفحة نفسها بعد تكبيرها إلى %400:
في الواقع، من خلال التصميم المتجاوب، نستوفي القاعدة 1.4.4 من قائمة التحقّق الخاصة بمؤسسة WebAIM، والتي تنص على أنّ الصفحة تكون: "قابلة للقراءة وتعمل بشكل جيد عندما يتضاعف حجم النص".
لا يهدف هذا الدليل إلى تغطية كل جوانب التصميم المتجاوب، ولكن إليك بعض النقاط المهمة التي تساعد في تحسين تجربة التصميم المتجاوب وتتيح للمستخدمين الوصول بشكل أفضل إلى المحتوى.
استخدام العلامة الوصفية لإطار العرض
<meta name="viewport" content="width=device-width, initial-scale=1.0">
يساوي الإعداد width=device-width عرض الشاشة بوحدات البكسل المستقلة عن الجهاز، ويُنشئ الإعداد initial-scale=1 علاقة بنسبة 1:1 بين وحدات البكسل في CSS ووحدات البكسل المستقلة عن الجهاز. يؤدي ذلك إلى توجيه المتصفّح لملاءمة المحتوى مع حجم الشاشة، وبالتالي لن يرى المستخدمون مجموعة من النصوص المضغوطة.
اطّلِع على ضبط حجم المحتوى وفقًا لإطار العرض لمزيد من المعلومات.
السماح للمستخدمين بالتكبير
يمكنك استخدام العلامة الوصفية لإطار العرض لمنع التكبير/التصغير من خلال ضبط maximum-scale=1 أو user-scaleable=no. تجنَّب ذلك، واسمح للمستخدمين بتكبير المحتوى إذا احتاجوا إلى ذلك.
التصميم مع مراعاة المرونة
تجنَّب استهداف أحجام شاشات معيّنة واستخدِم شبكة مرنة بدلاً من ذلك، مع إجراء تغييرات على التصميم عندما يقتضي المحتوى ذلك. كما رأينا في مثال Udacity، يضمن هذا النهج استجابة التصميم سواء كان تقليل المساحة ناتجًا عن شاشة أصغر أو مستوى تكبير أعلى.
يمكنك الاطّلاع على مزيد من المعلومات حول هذه التقنيات في أساسيات تصميم الويب السريع الاستجابة.
استخدام وحدات نسبية للنص
لتحقيق أفضل استفادة من الشبكة المرنة، استخدِم وحدات نسبية مثل em أو rem لأشياء مثل حجم النص بدلاً من قيم البكسل. تتيح بعض المتصفّحات تغيير حجم النص فقط في إعدادات المستخدم المفضّلة، وإذا كنت تستخدم قيمة بالبكسل للنص، لن يؤثّر هذا الإعداد في نسختك. في المقابل، إذا كنت قد استخدمت وحدات نسبية في كل مكان، سيتم تعديل نسخة الموقع الإلكتروني لتعكس إعدادات المستخدم المفضّلة.
ويتيح ذلك إعادة ترتيب المحتوى على الموقع الإلكتروني بالكامل عندما يكبّر المستخدم الشاشة، ما يوفّر له تجربة القراءة التي يحتاجها لاستخدام موقعك الإلكتروني.
تجنُّب فصل العرض المرئي عن ترتيب المصدر
يتبع مستخدمو لوحة المفاتيح الذين يتنقلون بين عناصر موقعك الإلكتروني ترتيب المحتوى في مستندات HTML. عند استخدام طرق التنسيق، مثل Flexbox و Grid، يمكنك تغيير الترتيب المرئي للعناصر، ما قد يؤدي إلى عدم تطابق مع ترتيب المصدر. ويمكن أن يؤدي ذلك إلى تنقّل المستخدم بشكل عشوائي في الصفحة مع كل علامة تبويب.
اختبِر تصميمك عند كل نقطة توقّف من خلال التنقّل بين المحتوى باستخدام مفتاح Tab. اسأل نفسك: "هل لا يزال التنقّل في الصفحة منطقيًا؟"
مزيد من المعلومات عن حالات عدم التطابق بين المصدر والعرض المرئي
التعامل بحذر مع المؤشرات المكانية
عند كتابة النصوص الصغيرة، تجنَّب استخدام لغة تشير إلى موقع عنصر معيّن على الصفحة. بالنسبة إلى المستخدمين الذين يعانون ضعفًا في البصر، قد لا يكون لديهم هذا السياق المشترك، وسيكون من الأفضل تحديد نسخة العنصر بالضبط، ما يتيح البحث عنها.
يفيد ذلك أيضًا جميع المستخدمين، لأنّ الإشارة إلى التنقّل على أنّه "على يمينك" قد لا يكون منطقيًا في نسخة متوافقة مع الأجهزة الجوّالة، حيث يمكن نقل التنقّل إلى موضع مختلف.
التأكّد من أنّ أهداف النقر كبيرة بما يكفي على أجهزة شاشة اللمس
على الأجهزة ذات شاشة اللمس، تأكَّد من أنّ أهداف النقر كبيرة بما يكفي لتسهيل تنشيطها بدون النقر على روابط أخرى. يبلغ الحجم المناسب لأي عنصر قابل للنقر 48 بكسل، ويمكنك الاطّلاع على المزيد من الإرشادات حول العناصر القابلة للنقر.