10 توصيات لجعل موقعك الإلكتروني أكثر قابلية للوصول

مساء قابلية الوصول،


هل فكّرت من قبل بقابلية وصول موقعك الإلكتروني؟

إن لم تفكّر بعد في ذلك ففكر فيه، لأن ما يتراوح من 15% إلى 20% من سكان الولايات المتحدة يعانون صعوبات في القراءة.

وهذا عدد كبير من الناس. مع ذلك لا تحظى قابلية الوصول بما تستحقه من انتباه واهتمام. وفيما يلي لائحة من عشر توصيات، كتبها فيكتور، تجعل موقعك الإلكتروني أكثر قابلية للوصول.

1) ينبغي أن يستطيع المستخدم تصفح موقعك بلوحة المفاتيح دون الحاجة لاستخدام الفأرة. وهذه التوصية يسهل اختبارها، يكفي أن تحاول تصفح موقعك الإلكتروني دون استخدام الفأرة وتفحص ما إن كان ذلك ممكنًا أو لا.

2) ينبغي للصور في موقعك أن تحتوي على نص بديل (alt text) بحيث تستطيع قارءات الشاشة فهم الرسالة التي تريد الصورة إيصالها.

النص البديل للصور في محرر ووردبريس
النص البديل للصور في محرر ووردبريس

3) عند استخدام الروابط التشعبية (تؤدي لمكان آخر) استخدم نصًا فريدًا ومحددًا لها. وهنا سيكون المثال الحقيقي أقرب للفهم من الشرح:

بدل أن تكتب: اضغط هنا لترسل لنا رسالة اكتب: لإرسال رسالة لنا، استخدم هذا النموذج.

4) احرص على وجود تباين كافٍ في نصوصك. اجعل حجم الخطّ كبيرًا بما يكفي للقراءة، واستخدم لون خلفية يمكّن القارئ من قراءة ذلك النص. وهذه الممارسة نافعة للجميع وليس فقط الناس الذين يعانون من صعوبات في القراءة. في حال كنت مهتمًا بموضوع تباين النص، فهذا الموقع يمنحك ما يكفي من الشرح.

5) استخدم مختلف أنواع العناوين لترتيب محتواك:

  • استخدم <h1> للعنوان الرئيسي لصفحة الويب في موقعك.
  • نوصيك أيضًا باستخدام العناوين الفرعية الأصغر لتسهل على القارئ التنقل داخل محتواك، ويكون هيكل المحتوى واضحًا ومنظمًا.
  • نوصيك كذلك بعدم القفز ما بين مستويات العناوين، مثل القفز من <h1> وهو رمز يشير إلى العنوان الرئيسي إلى <h3> وهو رمز يشير إلى عنوان من المستوى 3 (عنوان فرعي 3) دون المرور بـ<h2>

6) استخدم التسميات labels في الأماكن التي تحتاج إدخالًا بدل ماسكات المكان [أو النصوص المؤقتة*] placeholders يصعُب قراءة ماسكات المكان (هي تلك النصوص الباهتة داخل الخانات التي تخبرك بما تكتبه فيها)، كما أنها تختفي بمجرد أن يشرع المستخدم في الكتابة. لا تستخدمها.

*وفق ترجمة محمود عبدربه.

صورة تُمثل ماسك مكان في موقع عربآيز
مثال على ماسكات المكان

7) تجنب الوحدات الثابتة لحجم النص، مثل تحديد حجم النص باستخدام البكسل. بدل ذلك استخدم الأحجام النسبية، لأنها تمكّنك من توسيعها أو تقليصها حسب المحتوى الآخر المرافق وحسب حجم الشاشة.

8) لعرض البيانات المُجدولة استخدم الجداول فقط.

9) استخدم سمات ARIA عند الضرورة.

هي اختصار لعبارة Accessible Rich Internet Applications ومعناها تطبيقات الإنترنت ذات قابلية الوصول الغنيّة وهي مجموعة من العناصر التي تُضاف لأكواد HTML غرضها جعل موقعك أكثر قابلية للوصول.

10) كن على دراية بـالمبادئ التوجيهية للنفاذ إلى محتوى الويب. وفيما يلي المبادئ التوجيهية للنفاذ المنشورة من قبل مبادرة تيسير النفاذ إلى الويب (تُترجم أحيانًا بـ مبادرة منالية الويب) التابعة لـرابطة الشبكة المعلوماتية العالمية.

المصدر: أحد أعداد النشرة البريدية ستاكد ماركتر – اشترك بها من هذا الرابط فهي تستحق [رابط إحالة]

طالع أيضًا من الأرشيف: كيف تبدو الانترنت للمصابين بعسر القراءة ؟ [رابط إحالة]

قانون علمي جدير بالمعرفة:

قانون “داموث”. وينص هذا القانون على أن متوسط الكثافة العددية لأحد الأنواع ينخفض بصورة متوقعة كلما زادت كتلة جسمه، فعلى سبيل المثال، تقل أعداد الفيلة في منطقة ما عن أعداد الفئران في المنطقة ذاتها.

كم بلغ عدد التيرانوصورات؟ 2.5 مليار ديناصور خلال فترة وجود هذا النوع [NATURE الطبعة العربية]

لافت للانتباه دراسة حديثة: تفوق الاستثمار المستدام مجرد وهم [اتحاد المصارف العربية] ومنه نقتبس:

معظم الاستثمارات المستدامة ليست أكثر من مجرد خدعة تسويقية. الرسالة ليست ’تجاهل المعايير البيئية والاجتماعية والحوكمة‘ لكن ’لا تصدق رواية تفوق المعايير البيئية والاجتماعية والحوكمة‘.

ادعم استمرارية هذه اليوميّات برعاية المحتوى الذي أصنعه، طالع تفاصيل الرعاية في هذا الملف؛ أو تصفّح هذا الرابط.

أعجبك ما أصنعه من محتوى؟ تواصل معي الآن عبر واتساب. اضغط على الزرّ الأخضر


يونس يسأل: ما أفضل موقع ويب تصفحته من حيث قابلية الوصول؟


حقوق الصورة البارزة: Photo by Domenico Loia on Unsplash

3 رأي حول “10 توصيات لجعل موقعك الإلكتروني أكثر قابلية للوصول

  1. شكرًا جزيلًا يا يونس، تدوينة غاية في الأهمية ومرتبطة بمجال تجربة المستخدم الهام وكذلك مجال الكتابة لتجربة المستخدم UX Writing
    لدي اقتراح بخصوص تعريب (placeholders) نحن نفضل استخدام (النص المؤقت) لأن هذه هي وظيفته يكون داخل حقول النماذج Forms وعند الضغط على الحقل يختفي النص.

    Liked by 1 person

شاركني أفكارك!

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

شعار ووردبريس.كوم

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   /  تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   /  تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   /  تغيير )

Connecting to %s