AR

اختبار لوحة المفاتيح

يمكنك اختبار موقعك بلوحة المفاتيح فقط. عشر خطوات قصيرة تظهر ما يعمل وما لا يعمل، مع نصيحة لكل نقطة.

اختبار لوحة المفاتيح

اختبار لوحة المفاتيح

E-powermentاختبار لوحة المفاتيح

قبل البدء

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

مثلا عنوان الموقع أو اسم مؤسستك. يظهر فوق نتيجتك.

الاختبار في عشر خطوات

تمت الإجابة: 0 من 10

  1. تخطي القائمة

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

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

    WCAG 2.2: 2.4.1 تجاوز الكتل (المستوى A) 

    هل يعمل؟
    لا يعمل؟ طريقة الحل

    يمكنك الطلب ممن يبني موقعك وضع رابط «الانتقال إلى المحتوى» أعلى كل صفحة، كأول رابط. الرابط يقفز إلى بداية المحتوى، مثلا إلى <main id="inhoud">. ويمكن أن يكون الرابط مخفيا حتى يحصل على التركيز.

  2. كل شيء يمكن الوصول إليه، بترتيب منطقي

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

    WCAG 2.2: 2.1.1 لوحة المفاتيح (المستوى A) ، 2.4.3 ترتيب التركيز (المستوى A) 

    هل يعمل؟
    لا يعمل؟ طريقة الحل

    يمكنك استخدام روابط عادية (<a href>) وأزرار (<button>): فهي تعمل تلقائيا بلوحة المفاتيح. يكون ترتيب الكود مثل ترتيب ما يظهر على الشاشة. ولا يستخدم tabindex برقم أكبر من 0.

  3. رؤية مكانك

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

    WCAG 2.2: 2.4.7 التركيز مرئي (المستوى AA) 

    هل يعمل؟
    لا يعمل؟ طريقة الحل

    يمكنك الطلب ممن يبني موقعك عدم إزالة إطار التركيز أبدا (outline: none) بدون وضع شيء واضح بدلا منه. الإطار بسماكة 2 بكسل على الأقل، بلون يظهر جيدا على الخلفية، سهل الرؤية.

  4. التركيز غير مخفي

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

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

    WCAG 2.2: 2.4.11 التركيز غير محجوب (الحد الأدنى) (المستوى AA) 

    هل يعمل؟
    لا يعمل؟ طريقة الحل

    يمكنك الطلب ممن يبني موقعك ترك مساحة للأشرطة الثابتة، مثلا باستخدام scroll-padding-top في CSS. وأن تكون الإجابة عن رسالة ملفات تعريف الارتباط مطلوبة قبل متابعة الصفحة، أو أن توضع الرسالة بحيث لا تغطي شيئا.

  5. الأزرار والروابط تعمل بمفتاحي Enter وSpace

    المطلوب
    يمكنك الانتقال بمفتاح Tab إلى رابط والضغط على Enter، ثم الانتقال إلى زر والضغط على Enter، وتجربة زر آخر بمفتاح Space.
    ما يجب أن يحدث
    الرابط يفتح بمفتاح Enter. والزر يعمل بمفتاح Enter وبمفتاح Space أيضا. عند الضغط على Space على زر، لا تنزل الصفحة إلى الأسفل: الزر يقوم بعمله.

    تنبيه: زر يعمل بمفتاح Enter لكن ليس بمفتاح Space؟ عندها يمكن استخدامه رغم ذلك، وغالبا لا يعد خطأ حسب WCAG. لكن هذا ما يتوقعه الناس، وغالبا علامة على أنه ليس زرا حقيقيا. يمكنك عندها اختيار «يعمل» وكتابة ذلك في ملاحظتك.

    WCAG 2.2: 2.1.1 لوحة المفاتيح (المستوى A) ، 4.1.2 الاسم، الدور، القيمة (المستوى A) 

    هل يعمل؟
    لا يعمل؟ طريقة الحل

    شيء يبدو كزر ويعمل بالفأرة فقط؟ غالبا ليس زرا حقيقيا. يمكنك الطلب ممن يبني موقعك استخدام <button> للإجراء، ورابط (<a href>) لصفحة أخرى.

  6. القائمة تفتح وتغلق

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

    تنبيه: الإغلاق بمفتاح Esc ليس شرطا إلزاميا في WCAG، لكنه ما يتوقعه الناس. إذا كانت القائمة تغلق بالزر نفسه، فهي تعمل.

    WCAG 2.2: 2.1.1 لوحة المفاتيح (المستوى A) 

    هل يعمل؟
    لا يعمل؟ طريقة الحل

    القائمة المنسدلة التي تفتح فقط عند تمرير الفأرة فوقها لا تعمل بلوحة المفاتيح. يمكنك الطلب ممن يبني موقعك زرا يفتح القائمة ويغلقها، ويخبر قارئ الشاشة إن كانت القائمة مفتوحة (aria-expanded).

  7. تعبئة نموذج

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

    WCAG 2.2: 2.1.1 لوحة المفاتيح (المستوى A) ، 3.2.2 عند الإدخال (المستوى A) 

    هل يعمل؟
    لا يعمل؟ طريقة الحل

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

  8. رسائل الخطأ يمكن العثور عليها

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

    تنبيه: إذا كان الإرسال يصل فعلا، مثل التسجيل، فالأفضل عدم التجربة ببيانات حقيقية.

    WCAG 2.2: 3.3.1 تحديد الخطأ (المستوى A) 

    هل يعمل؟
    لا يعمل؟ طريقة الحل

    يمكنك الطلب ممن يبني موقعك نقل التركيز عند الخطأ إلى الرسالة أو إلى أول حقل فيه خطأ، وكتابة الرسالة بالكلمات عند الحقل، وليس فقط كإطار أحمر، وربط الرسالة بالحقل (aria-describedby)، حتى يقرأها قارئ الشاشة.

  9. النافذة على الصفحة تعمل جيدا

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

    تنبيه: الإغلاق بمفتاح Esc ليس شرطا إلزاميا في WCAG. لكنه ما يتوقعه الناس، وينصح به W3C. وفي كل الأحوال يجب وجود زر إغلاق يمكن الوصول إليه بلوحة المفاتيح.

    WCAG 2.2: 2.4.3 ترتيب التركيز (المستوى A) ، 2.1.2 لا يوجد فخ للوحة المفاتيح (المستوى A) 

    هل يعمل؟
    لا يعمل؟ طريقة الحل

    يمكنك الطلب ممن يبني موقعك استخدام نافذة حوار حقيقية، مثلا عنصر HTML <dialog> مع showModal(). هذا يبقي التركيز داخل النافذة ويغلقها بمفتاح Esc. بعد ذلك من المهم التأكد من أن التركيز يعود إلى الزر الذي فتح النافذة.

  10. لا انحباس في أي مكان

    المطلوب
    يمكنك الانتقال بمفتاح Tab إلى كل ما في الصفحة من جهة أخرى: فيديو، أو خريطة، أو نافذة محادثة، أو نموذج. ثم محاولة الخروج منه من جديد بمفتاح Tab وShift + Tab.
    ما يجب أن يحدث
    الخروج ممكن من كل مكان بمفتاح Tab أو Shift + Tab. وإذا كان ذلك يحتاج إلى مفتاح آخر، فهو مكتوب.

    WCAG 2.2: 2.1.2 لا يوجد فخ للوحة المفاتيح (المستوى A) 

    هل يعمل؟
    لا يعمل؟ طريقة الحل

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

النتيجة

  • 0يعمل
  • 0لا يعمل
  • 0لا ينطبق
  • 10لم يتم اختباره بعد

لا توجد إجابة عن أي خطوة بعد. البداية من الخطوة 1.

لم يتم اختباره بعد

  • 1. تخطي القائمة
  • 2. كل شيء يمكن الوصول إليه، بترتيب منطقي
  • 3. رؤية مكانك
  • 4. التركيز غير مخفي
  • 5. الأزرار والروابط تعمل بمفتاحي Enter وSpace
  • 6. القائمة تفتح وتغلق
  • 7. تعبئة نموذج
  • 8. رسائل الخطأ يمكن العثور عليها
  • 9. النافذة على الصفحة تعمل جيدا
  • 10. لا انحباس في أي مكان

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

تم الإعداد باستخدام «اختبار لوحة المفاتيح» من E-powerment: e-powerment.nl/ar/adawat/toetsenbordtest/

طريقة الاستخدام

  1. يمكنك فتح الموقع المراد اختباره في علامة تبويب أخرى، ووضع الفأرة جانبا.
  2. ثم الخطوات العشر. في كل خطوة: المطلوب منك، وما يجب أن يحدث.
  3. في كل خطوة يمكنك اختيار: يعمل، أو لا يعمل، أو لا ينطبق. ويمكنك كتابة ما رأيته، إن أردت.
  4. بعد الخطوات العشر تأتي النتيجة: ما لا يعمل، مع ما يمكنك فعله لكل نقطة.
  5. يمكنك اختيار طباعة أو نسخ النص، فوق الأداة. مثلا لإرسال النتيجة بالبريد الإلكتروني إلى من يبني موقعك.

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

المفاتيح

Tab
إلى الرابط أو الزر أو الحقل التالي.
Shift + Tab
العودة إلى السابق.
Enter
فتح رابط أو استخدام زر. على Mac يسمى هذا المفتاح أحيانا return.
Space
استخدام زر، أو وضع علامة اختيار وإزالتها.
مفاتيح الأسهم
الاختيار بين أزرار الاختيار الدائرية أو في قائمة منسدلة، وأحيانا التنقل في قائمة.
Esc
إغلاق قائمة أو نافذة منبثقة أو نافذة.

معلومات مفيدة

  • هذا فحص أولي، وليس اختبارا كاملا للقواعد. هل يعمل كل شيء؟ عندها من المؤكد أن لوحة المفاتيح تعمل جيدا على الصفحات التي اختبرتها. أما هل يفي موقعك كله بالمتطلبات، فيمكن أن يختبره شخص متخصص في ذلك.
  • يلزم وجود لوحة مفاتيح. على هاتف أو جهاز لوحي بدون لوحة مفاتيح لا يمكن القيام بهذا الاختبار.
  • في كل خطوة: المتطلب المرتبط بها من WCAG 2.2. معيار WCAG هو المعيار الدولي للمواقع التي يمكن الوصول إليها، وهذا المتطلب اسمه هناك «معيار النجاح». كل الخطوات من المستوى A أو AA. المستوى A هو الحد الأدنى، والمستوى AA هو المعيار العادي. للمزيد: ما هو WCAG.
  • لماذا هذا مهم: ليس الجميع يستخدمون الفأرة، مثلا الأشخاص المكفوفون أو من لديهم يدان ترتجفان. للمزيد: قابل للتشغيل: كل شيء يعمل، حتى دون فأرة.
  • ما يجب أن يحدث يتبع شرح W3C، المنظمة التي تقف وراء WCAG. أحيانا لا يكون الشيء متطلبا صارما، لكنه ما يتوقعه الناس، مثل إغلاق نافذة بمفتاح Esc. عندها يذكر ذلك.

اختبارات أخرى

إجاباتك

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

المصادر

الخطوات تتبع WCAG 2.2 وشرح W3C. تاريخ الاطلاع: 30 أيلول 2026.

المزيد من الأدوات

عرض كل الأدوات 

  • لعبةتجربة

    مسار العوائق

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

    مع مراجعك

  • فحصمساعدة في الكتابة

    مساعد النص البديل

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

    مع مراجعك

  • فحصفحص النص

    فحص اللغة البسيطة

    يمكنك فحص سهولة قراءة نصك. تظهر الجمل الطويلة والكلمات الصعبة، مع كلمة أسهل بجانبها.

    مع مراجعك

هل نبني شيئا معا؟

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

إرسال رسالة [email protected]