كيف تختبر موقعك بلوحة المفاتيح فقط

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

المفاتيح التي تحتاجها

• Tab: الرابط أو الزر أو الحقل التالي
• Shift + Tab: السابق
• Enter: فتح رابط، تفعيل زر، إرسال
• Space: تفعيل زر، تحديد مربع، التمرير
• الأسهم: أزرار الاختيار، القوائم، أشرطة التمرير، علامات التبويب
• Esc: إغلاق قائمة أو مربع حوار

على ماك مع سفاري، فعّل أولًا خيار «اضغط على Tab لتمييز كل عنصر في صفحة الويب» من إعدادات سفاري، ضمن قسم متقدم.

الاختبار خطوة بخطوة

1. ابدأ من أعلى الصفحة

   انقر في شريط العنوان ثم اضغط Tab. يُفضَّل أن يكون أول ما تصل إليه رابط «انتقل إلى المحتوى الرئيسي».

2. تنقّل بين كل العناصر

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

3. استخدم كل عنصر تحكم

   افتح القائمة بـ Enter، وتنقّل داخلها بالأسهم أو Tab، وأغلقها بـ Esc. حدّد المربعات بالمسافة. أرسل النموذج بـ Enter.

4. افتح النوافذ المنبثقة وأغلقها

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

5. ابحث عن الفخاخ

   إذا لم تستطع الخروج بـ Tab من مشغل فيديو أو خريطة أو أداة دردشة، فهذا فخ للوحة المفاتيح (WCAG 2.1.2) وعائق خطير.

6. دوّن وأصلح

   دوّن كل مشكلة مع الصفحة والعنصر. معظم الإصلاحات صغيرة: إضافة نمط للتركيز، أو استخدام زر حقيقي بدل div، أو تصحيح الترتيب في HTML.

أكثر أربع مشكلات شيوعًا وطرق إصلاحها

لا يوجد تركيز ظاهر. أضاف أحدهم outline: none ليبدو التصميم أنظف. أعده بنمط واضح مثل :focus-visible { outline: 3px solid #1F4FD8; outline-offset: 2px; }.

عناصر div قابلة للنقر. لا يمكن الوصول إلى <div onclick> بـ Tab. استخدم <button> حقيقيًا للإجراءات و<a href> للروابط، فهي تعمل مع لوحة المفاتيح تلقائيًا.

ترتيب غريب. قيم tabindex الموجبة (1، 2، 3) أو CSS الذي ينقل العناصر بصريًا قد يجعل التركيز يقفز. أزل قيم tabindex الموجبة وصحح الترتيب في HTML.

تركيز مخفي. ترويسة ثابتة أو شريط ملفات تعريف الارتباط يغطي العنصر الذي عليه التركيز. أضافت WCAG 2.2 قاعدة لهذا (2.4.11، عدم حجب التركيز). أضف هامش تمرير: html { scroll-padding-top: 90px; }.

اجعله عادة

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