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

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

جولة لوحة المفاتيح

ابدأ كل اختبار يدوي دون فأرة. انتقل من شريط العنوان إلى نهاية الصفحة بـ Tab، ثم عُد بـ Shift+Tab، واسأل عند كل محطة:

1. هل أستطيع الوصول إليه؟ كل عنصر تحكّم تستطيع الفأرة استخدامه يجب أن يكون قابلًا للوصول.
2. هل أستطيع رؤيته؟ التركيز مرئي بوضوح وغير مخفي خلف الأشرطة الثابتة.
3. هل الترتيب منطقي؟ يتبع التركيز ترتيب قراءة الصفحة.
4. هل يعمل؟ ‏Enter يتّبع الروابط ويفعّل الأزرار؛ وSpace يفعّل الأزرار ويبدّل مربّعات الاختيار؛ ومفاتيح الأسهم تعمل داخل أزرار الـ radio والتبويبات والقوائم.
5. هل أستطيع الخروج؟ ‏Escape يُغلق نوافذ الحوار والقوائم، ويعود التركيز إلى العنصر الذي فتحها، ولا شيء يحبس التركيز.

في Ticketly، وجدت هذه الجولة وحدها الـ tabindex الموجب، والتركيز غير المرئي، وزر الـ div، والنافذة المنبثقة التي تركت التركيز خلفها، قبل أن يفتح أحد قارئ شاشة.

أيّ قارئات الشاشة تختبر

في استطلاع WebAIM لعام 2026، كانت قارئات الشاشة الأساسية الأكثر شيوعًا على أجهزة سطح المكتب JAWS ‏(55.0%) وNVDA ‏(32.9%)، وكلاهما على Windows، يليهما VoiceOver على macOS ‏(6.5%). وعلى الهاتف، يستخدم 72.2% من المشاركين VoiceOver على iOS، متقدّمًا بفارق كبير على TalkBack على Android ‏(29.5%). مصفوفة اختبار عملية:

• NVDA مع Chrome أو Firefox على Windows. ‏NVDA مجاني ومفتوح المصدر، وسلوكه قريب بما يكفي من سلوك JAWS ليلتقط معظم المشكلات.
• VoiceOver مع Safari على macOS، وهو مدمج في النظام.
• VoiceOver على iOS لأي شيء يستخدمه الناس على الهواتف، وفي مهرجان يكاد يكون كل شيء كذلك.

أساسيات NVDA

لـ NVDA وضعان. في وضع التصفّح (browse mode)، يقرأ NVDA الصفحة بمؤشّر افتراضي، والحروف المفردة تقفز بين العناصر. وفي وضع التركيز (focus mode)، تذهب ضغطات المفاتيح إلى عنصر التحكّم، فتستطيع الكتابة في حقل. يبدّل NVDA بينهما تلقائيًا حين تدخل حقلًا، وNVDA+Space يبدّل يدويًا. ومفتاح NVDA هو Insert افتراضيًا، ويمكنك أيضًا تفعيل Caps Lock مفتاحًا لـ NVDA، وهذا مريح على الحاسوب المحمول.

أضِف Shift إلى أي أمر بحرف مفرد للعودة إلى الخلف.

أساسيات VoiceOver ‏(macOS)

شغّل VoiceOver وأوقفه بـ Cmd+F5. ومفاتيح VO هي Control+Option. قبل أن تبدأ، افتح إعدادات Safari وفعّل “Press Tab to highlight each item on a webpage”؛ وإلا فسيتخطّى Tab الروابط في Safari وستبلّغ عن أخطاء غير موجودة.

على iOS، اسحب يمينًا ويسارًا للتنقّل بين العناصر، وانقر مرتين للتفعيل، وأدِر إصبعين على الشاشة لفتح الـ rotor.

كيف يبدو الصحيح

يجب أن يُعلَن كل عنصر تفاعلي مع اسم ودور، ومع حالة أو قيمة حين يكون ذلك مناسبًا. أصغِ إلى الجزء الناقص:

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

كتابة الملاحظات

الملاحظة التي يستطيع المطوّر إصلاحها دفعة واحدة لها ستة أجزاء:

Title:    Quantity stepper buttons have no accessible name
Where:    /events/friday, Friday pass card
Steps:    NVDA + Chrome. Tab to the "−" button after "Quantity".
Actual:   NVDA says "button". Same for "+".
Expected: "Fewer Friday passes, button" and "More Friday passes, button".
WCAG:     4.1.2 Name, Role, Value (A). Severity: high (blocks purchase).

صار لديك كل ما تحتاجه من أدوات: الفحص الآلي، ولوحة المفاتيح، وقارئا شاشة. ويجمعها الدرس الأخير في تدقيق كامل لـ Ticketly، وفي عادات تُبقيه سهل الوصول بعد أن تغادر.