نعلم أنه من الجيد التصميم سريع الاستجابة لتوفير أفضل تجربة على أجهزة متعددة، ولكن التصميم سريع الاستجابة يحقق نجاحًا في إمكانية الوصول.
ضع في اعتبارك موقعًا إلكترونيًا مثل 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، تسهيل عدم تطابق العرض المرئي مع ترتيب المصدر وقد يؤدي ذلك إلى قفزات مزعجة في جميع أنحاء الصفحة لشخص يستخدم لوحة المفاتيح للتنقّل فيه.
تأكد من اختبار تصميمك عند كل نقطة فاصلة من خلال التنقل عبر المحتوى، هل لا يزال التدفق عبر الصفحة منطقيًا؟
يمكنك الاطّلاع على مزيد من المعلومات حول إلغاء ربط الشاشة المصدر والشاشة المرئية.
اعتنِ بنفسك من خلال الأدلة المكانية
عند كتابة نسخة مصغرة، تجنب استخدام اللغة التي تشير إلى موقع عنصر على الصفحة. على سبيل المثال، يشير هذا المصطلح إلى عملية التنقّل "على اليسار" لا معنى له في إصدار الهاتف المحمول عندما يكون التنقل أعلى الشاشة.
التأكّد من أنّ أهداف النقر كبيرة بما يكفي على الأجهزة ذات الشاشات التي تعمل باللمس
على الأجهزة ذات الشاشات التي تعمل باللمس، تأكَّد من أنّ أهداف النقر كبيرة بما يكفي. لتسهيل تفعيلها بدون النقر على روابط أخرى والحجم الجيد لأي عنصر قابل للنقر هو 48 بكسل، قراءة المزيد من الإرشادات عن أهداف النقر.