تصميم مواقع يسهل الوصول إليها: لوحة المفاتيح والتركيز

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

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

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

لماذا تعد إمكانية الوصول جزءا من عمل التصميم

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

احسم العناصر الأربعة التالية معا في مرحلة التصميم:

• ترتيب التنقل: هل يتوافق المسار الذي يتبعه زر Tab مع التسلسل الهرمي البصري؟
• التركيز: هل يظهر العنصر النشط في كل موضع، ولا يختفي خلف الأشرطة التي تبقى في أعلى الصفحة؟
• التسمية: هل يتوافق الاسم الظاهر للزر والرابط والحقل مع الاسم الذي تقرؤه التقنيات المساعدة؟
• البديل: هل يمكن تحويل المعلومات التي تحملها الصورة أو الأيقونة أو الرسم البياني إلى نص؟

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

اجعل التنقل بلوحة المفاتيح متوافقا مع الترتيب البصري

مستخدم لوحة المفاتيح لا يمسح الصفحة بعينيه؛ بل يتتبع موضع التركيز. ينبغي أن ينتقل التركيز من اليسار إلى اليمين، ومن الأعلى إلى الأسفل، وأن يقود أولا إلى المهمة الأساسية. فإذا كان مربع البحث يظهر على اليسار لكنه يأتي أخيرا في ترتيب Tab، فقد انفصل التصميم عن السلوك.

عند رسم ترتيب التنقل، اعتبر القواعد التالية قرارات تصميم:

1. لا تدخل في التنقل بزر Tab إلا العناصر التفاعلية: الرابط والزر وحقل النموذج والقائمة المنسدلة وعلامة التبويب.
2. لا يستقبل النص العادي أو كامل سطح البطاقة أو المربع الزخرفي التركيز.
3. يتطابق الترتيب البصري مع ترتيب DOM. و«تصحيح» الترتيب بقيمة موجبة للخاصية tabindex ليس إلا ترقيعا مؤقتا.
4. الرابط الذي يتخطى القائمة العلوية المتكررة إلى المحتوى الأساسي هو من أولى الخطوات المفيدة عندما تكون ترويسات الصفحات طويلة.

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

المكونات المخصصة والقوائم وحصر التركيز

قد تبدو قائمة منسدلة جاهزة أو أداة اختيار تاريخ أو قائمة select مخصصة سليمة عند استخدام الفأرة. لكنها تحتاج إلى منطق مستقل لإدارة الحالات مع لوحة المفاتيح: يفتحها Enter أو Space، وتتنقل مفاتيح الأسهم بين الخيارات، ويغلقها Escape، ثم يعود التركيز إلى عنصر الفتح. هذه ليست «حركات دقيقة»، بل قواعد محددة للتفاعل.

لا يحصر التركيز إلا في النوافذ الحوارية المشروطة واللوحات المنزلقة. عند فتح نافذة حوارية، ينقل التركيز إلى داخلها، ويتنقل Tab ضمنها، وعند إغلاقها يعود التركيز إلى عنصر التحكم الذي فتحها. إذا ظلت عناصر الصفحة الخلفية قابلة للوصول بزر Tab، فسيفقد المستخدم موضعه. وينطبق هذا السلوك أيضا على نموذج طلب عرض السعر أو لوحة ملفات تعريف الارتباط أو أداة اختيار اللغة في مشاريع تصميم مواقع الشركات.

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

حافظ على وضوح مؤشر التركيز واتساقه

إزالة إطار التركيز الافتراضي قد تبدو وسيلة للحصول على مظهر «أنظف» عند استخدام الفأرة، لكنها تخفي العنصر النشط عند استخدام لوحة المفاتيح. إذا أزلت الإطار، فاستبدله بمؤشر تركيز يتوافق مع العلامة التجارية ويكون واضحا بالقدر نفسه على الأقل. لون التحويم ليس بديلا عن التركيز: فالتحويم مرتبط بالفأرة، والتركيز مرتبط بلوحة المفاتيح.

يمكن اختصار ملاحظات تصميم مؤشر التركيز كما يلي:

• يتميز المؤشر بوضوح فوق الخلفيات الفاتحة والداكنة معا.
• تمنع السماكة والمسافة عن العنصر اختفاء المؤشر كخط رفيع.
• يستخدم الأسلوب نفسه في الموقع كله؛ فظهور المؤشر في صفحة وغياب أي أثر له في أخرى يضعف الثقة.
• لا يقتطع مؤشر التركيز بسبب الزوايا المستديرة أو الظلال.

في مشاريع KepezWeb، ينبغي ألا يترك مؤشر التركيز باعتباره «تفصيلا يخص المطور». فالزر والرابط وعلامة التبويب وعنصر التحكم داخل البطاقة وحقل النموذج تنتمي إلى عائلة واحدة. تصمم حالات التحويم والتفعيل والتركيز كل على حدة في مكتبة المكونات؛ فالتركيز ليس «نسخة باهتة من حالة التفعيل».

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

النص البديل: متى تكتبه ومتى تتركه فارغا

النص البديل هو تحويل وظيفة الصورة إلى كلمات، وليس كتابة جملة طويلة لكل صورة. والسؤال هو: هل تقدم الصفحة المعلومات نفسها من دون هذه الصورة؟

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

لا يمكن اختزال رسم بياني معقد في جملة واحدة. يحدد النص البديل المختصر موضوعه، وتوضع البيانات الفعلية في جدول أو في ملخص أسفله مباشرة. لا يكفي أن تقول «رسم بياني يظهر ارتفاع المبيعات»؛ بل يجب تحويل الفترة والمقارنة المعروضتين إلى نص.

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

زر الأيقونة والدعوة إلى الإجراء المعتمدة على الصورة وحدها

قد تبدو الأيقونة بلا نص «مفهومة» عند استخدام الفأرة. لكن إذا لم يكن لعنصر التحكم اسم ظاهر، فإنه يظل صامتا لمستخدم لوحة المفاتيح وقارئ الشاشة. ينبغي أن ترافق أيقونات القلب والنقاط الثلاث والسهم والإغلاق عبارة قصيرة أو اسم ميسر متسق. ولا يتعارض الاسم مع التسمية الظاهرة: فالزر المكتوب عليه «إرسال» لا ينبغي أن يقرأ في الخلفية باسم «تقديم النموذج».

إذا أضيفت صورة الخلفية عبر CSS، فلا توجد لها خاصية alt. وإذا كانت المعلومات مضمنة في تلك الصورة، فانقلها إلى نص HTML. عندما لا يظهر تاريخ الحملة أو السعر أو التنبيه إلا في الصورة، يكون هذا المحتوى في حكم غير الموجود لمن لا يستطيع رؤيتها. لا تضمن الوعود المتغيرة، مثل السعر أو المدة، في الصورة؛ بل أبقها في طبقة النص.

التسمية والاسم الميسر ورابط التخطي

التسمية الظاهرة هي مصدر الاسم الميسر. النص النائب لا يحل محل التسمية. فالنص النائب «اسمك» يختفي عند تعبئة الحقل، ولا يستطيع المستخدم عند حدوث خطأ رؤية ما طلبته منه. تبقى التسمية خارج الحقل، وتربط به برمجيا، ويوضح نص الخطأ الحقل المقصود.

سمات ARIA لا تحل محل HTML الدلالي. الزر زر، والرابط رابط. إضافة دعم لوحة المفاتيح والاسم لاحقا إلى عنصر div قابل للنقر أعلى كلفة من اختيار العنصر الصحيح منذ البداية. استخدم ARIA لسد نقص فعلي في مكون مخصص.

رابط التخطي («الانتقال إلى المحتوى») هو أول عنصر قابل لاستقبال التركيز، ويظهر عند التركيز عليه. أما رابط التخطي الذي يبقى مخفيا ولا يظهر حتى عند التركيز عليه، فهو في حكم غير الموجود. في صفحات الشركات الطويلة، يزيل هذا العنصر الصغير عبء المرور بالقائمة بأكملها في كل مرة.

تسهم اللغة والتسلسل الهرمي للعناوين ومناطق الصفحة الدلالية أيضا في التنقل. فوجود مجموعة كاملة من عناوين h2 وحدها، أو ثلاث مناطق باسم «المحتوى الرئيسي»، يربك قائمة العناوين في قارئ الشاشة كما يربك التنقل بلوحة المفاتيح. العنوان علامة بنيوية، وليس حجما بصريا؛ فقد لا يكون النص الكبير عنصر عنوان، بينما تكون تسمية صغيرة عنوانا فعليا.

ما ينبغي مراجعته في مرحلة التصميم

تلخص المقارنة التالية القرار المطلوب والمرحلة التي ينبغي حسمه فيها، بدلا من اللجوء إلى ترقيعه لاحقا.

القرار	حسمه في التصميم	ترقيعه لاحقا
ترتيب التنقل	يرسم التسلسل الهرمي البصري وترتيب DOM بالتسلسل نفسه	يفرض الترتيب باستخدام tabindex وتركيز مخفي
مؤشر التركيز	مستقل عن التحويم وواضح في جميع المكونات	يحذف الإطار، ثم يعاد إلى صفحة واحدة لاحقا
النص البديل	تحدد وظيفة الصورة كتابة: معلومات أو زخرفة أو عنصر تحكم	يلصق اسم الملف أو نص عام خال من المعنى مثل «صورة»
التسمية والاسم	يتطابق النص الظاهر مع الاسم الميسر	يترك نص نائب أو أيقونة فقط
النافذة والقائمة	توضع قواعد واضحة للفتح والإغلاق وإعادة التركيز	تغلق بالفأرة، ولا يعمل Escape ولا Tab

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

كل مهمة تنجز بالفأرة ينبغي أن يكون إنجازها ممكنا بلوحة المفاتيح أيضا، بالترتيب نفسه وبالأسماء نفسها.

الأسئلة الشائعة

هل تقتصر إمكانية الوصول على المستخدمين ذوي الإعاقات الدائمة؟

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

هل تؤثر إزالة إطار التركيز سلبا في العلامة التجارية؟

إزالة الإطار من دون إبقاء أي مؤشر تؤثر سلبا؛ أما مؤشر التركيز المتسق والمتوافق مع العلامة التجارية فلا يفعل ذلك. لا يكفي استخدام نمط التحويم باعتباره تركيزا. يفحص المؤشر على الخلفيات الداكنة والفاتحة كل على حدة.

هل يجب كتابة نص بديل لكل صورة؟

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

هل يجعل استخدام ARIA الصفحة سهلة الوصول؟

ليس بمفرده. العنصر الصحيح في HTML والتسمية الظاهرة وترتيب التنقل بلوحة المفاتيح ووضوح التركيز هي التي تؤدي الدور الأساسي. تستخدم ARIA لسد النقص المتبقي في المكونات المخصصة؛ وقد يكون استخدامها الخاطئ أكثر إرباكا من عنصر تحكم صامت.

متى ينبغي اختبار ذلك؟

عند تصميم المكون لأول مرة. اختبر التنقل بلوحة المفاتيح قبل اعتماد القائمة والنموذج والنافذة الحوارية المشروطة وقالب البطاقة. ففحص واحد قبل النشر لا يصلح بكلفة منخفضة قرارات التركيز والتسميات التي لم تتخذ مبكرا.

إذا أردت تحديد ترتيب التنقل بلوحة المفاتيح ومؤشر التركيز والنصوص البديلة منذ البداية في موقع جديد أو عند تجديد موقعك، فحدد نطاق العمل مع فريق KepezWeb. ولـطلب عرض سعر يناسب احتياجاتك، يكفي أن تترك رسالة قصيرة.