إمكانية الوصول: موقع يستطيع الجميع استخدامه

• فريق Triple

إمكانية الوصول: موقع يستطيع الجميع استخدامه

ليست ميزة إضافية ولا عملًا خيريًا. معظم ما يجعل الموقع متاحًا لذوي الإعاقة يجعله أفضل للجميع ولمحركات البحث.

إمكانية الوصول تُعامَل غالبًا كبند يُؤجَّل. والحقيقة أن معظم متطلباتها هي نفسها متطلبات موقع جيد: نص مقروء، وبنية واضحة، وأزرار يمكن الضغط عليها.

ولها أثر مباشر على السيو: بنية العناوين السليمة والنص البديل والروابط الواضحة كلها إشارات تقرأها محركات البحث بنفس الطريقة التي يقرأها بها قارئ الشاشة.

التباين: أول ما يُكسر

النص الرمادي الفاتح على أبيض يبدو أنيقًا في ملف التصميم، ويصبح غير مقروء على شاشة جوال في الشمس.

المعيار المتعارف عليه يطلب نسبة تباين لا تقل عن 4.5 إلى 1 للنص العادي، و3 إلى 1 للنص الكبير. هذه أرقام تُقاس بأداة لا تُقدَّر بالعين — ما يبدو مقبولًا لعين شابة على شاشة جيدة قد يكون غير مقروء لغيرها.

أحجام اللمس

الزر الصغير على الجوال مشكلة للجميع، وأكبر لمن يده ترتجف أو من يستخدم الهاتف بيد واحدة أثناء المشي.

الحد المتعارف عليه 44 بكسل طولًا وعرضًا للعناصر القابلة للضغط. والاستثناء المنطقي هو الرابط داخل فقرة نصية — لا يُطلب تضخيمه لأنه جزء من السطر.

بنية العناوين

قارئ الشاشة يتنقل بالعناوين كما تتنقل أنت بالنظر. عنوان واحد h1 لكل صفحة، ثم h2 للأقسام، ثم h3 للفروع — دون قفز.

وهذا يعني ألا تُستخدم وسوم العناوين لأجل الحجم. النص الذي تريده كبيرًا وليس عنوانًا يُكبَّر بالتنسيق لا بوسم h3. القفز من h2 إلى h5 يجعل القارئ يظن أن هناك أقسامًا فاتته.

لوحة المفاتيح وحدها

اختبار من دقيقتين يكشف الكثير: افتح موقعك ولا تلمس الفأرة. تنقّل بمفتاح Tab وحده.

• هل ترى أين أنت؟ يجب أن يكون هناك إطار واضح حول العنصر المحدد. حذف هذا الإطار لأنه «غير جميل» خطأ شائع يقطع التنقل تمامًا.
• هل الترتيب منطقي؟ من أعلى لأسفل، لا قفزات عشوائية.
• هل تستطيع الخروج من النوافذ المنبثقة؟ مفتاح Esc يجب أن يغلق.
• هل تصل لكل شيء؟ قائمة لا تُفتح إلا بمرور الفأرة لا يصل إليها من لا يستخدم فأرة.

النماذج

أكثر موضع تتعطل فيه التجربة. القاعدة الأساسية: لكل حقل ليبل مرتبط به برمجيًا.

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

ورسائل الخطأ يجب أن تقول ما الخطأ وكيف يُصلَح: «البريد يجب أن يحتوي على @» أنفع من «قيمة غير صالحة».

خصوصية العربية

• اتجاه الصفحة — dir="rtl" على مستوى الصفحة، لا محاذاة يدوية لكل عنصر.
• الأرقام والبريد والروابط — اعزلها باتجاهها الصحيح وإلا ظهرت مقلوبة. رقم مثل +20 106 740 0502 يُقرأ معكوسًا داخل فقرة عربية إن لم يُعزَل.
• الخط — بعض الخطوط العربية تفقد التشكيل أو تُقصّر الأحرف في أحجام صغيرة. راجع الخطوط العربية على الويب.
• ارتفاع السطر — العربية تحتاج تباعدًا أكبر من اللاتينية لأن نقاطها وتشكيلها تمتد فوق السطر وتحته.

الحركة

بعض المستخدمين يصابون بدوار من الحركة المستمرة. المتصفحات تتيح إعدادًا يعلن فيه المستخدم أنه يفضّل تقليل الحركة، ويمكن للموقع أن يستجيب له.

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

ما لا يعمل: الإضافات الجاهزة

انتشرت أدوات تُركَّب على الموقع فتضيف زرًا يعد بجعله «متاحًا». هذه الأدوات لا تصلح البنية الأساسية — لا تكتب ليبل ناقصًا ولا تصلح تباينًا ضعيفًا ولا ترتب عناوين مقلوبة.

إمكانية الوصول تُبنى في الكود والتصميم، لا تُضاف بزر. والخبر الجيد أن ما ذكرناه هنا معظمه يُنفَّذ مرة واحدة ثم يصبح عادة في كل صفحة جديدة.

اختبار في عشر دقائق

لا تحتاج خبيرًا للبدء. هذه الفحوص الخمسة تكشف أغلب المشاكل، ويمكن لأي شخص تنفيذها:

• كبّر الصفحة إلى 200% — هل يختفي محتوى أو يتداخل؟
• تنقّل بمفتاح Tab فقط — هل ترى أين أنت، وهل تصل لكل شيء؟
• أوقف الصور من إعدادات المتصفح — هل ما زالت الصفحة مفهومة من النص البديل؟
• اقرأ بصوت عالٍ نصوص الروابط وحدها — هل يفهم من يسمعها إلى أين تؤدي؟ «اضغط هنا» تفشل في هذا الاختبار.
• افحص التباين بأداة قياس، خاصة على النصوص الرمادية والنص فوق الصور.

الاختبار الرابع يكشف مشكلة شائعة في السيو أيضًا: نص رابط بلا معنى لا يخبر محرك البحث شيئًا عن الوجهة.

الفيديو والصوت

المحتوى المرئي والمسموع يحتاج بديلًا نصيًا، وهذا يخدم أكثر مما تتوقع:

• ترجمة مكتوبة للفيديو — لمن لا يسمع، ولمن يشاهد في مكان عام بلا صوت، وهؤلاء كثيرون.
• نص كامل للبودكاست — يصبح محتوى قابلًا للفهرسة والبحث.
• لا تشغّل الصوت تلقائيًا — مزعج للجميع وكارثي لمستخدم قارئ الشاشة.
• لا تنقل المعلومة باللون وحده — «الحقول الحمراء مطلوبة» لا تصل لمن لا يميز الأحمر. أضف علامة نصية.

النقطة الأخيرة تنطبق على الرسوم البيانية أيضًا: استخدم الأنماط والتسميات لا الألوان وحدها.