أخبرتك الأدوات الآلية بما ينقص Ticketly. أما لوحة المفاتيح وقارئ الشاشة فيخبرانك بما يعنيه استخدامه فعلًا. هذا هو الجزء من الاختبار الذي تتخطّاه معظم الفرق، وهو الجزء الذي يجد المشكلات التي يشتكي منها الناس حقًا. لا تحتاج إلى أن تصبح مستخدمًا خبيرًا لقارئ الشاشة. تحتاج إلى نحو خمسة عشر أمرًا وعادة الإصغاء بانتباه.
\nابدأ كل اختبار يدوي دون فأرة. انتقل من شريط العنوان إلى نهاية الصفحة بـ Tab، ثم عُد بـ Shift+Tab، واسأل عند كل محطة:
\nفي Ticketly، وجدت هذه الجولة وحدها الـ tabindex الموجب، والتركيز غير المرئي، وزر الـ div، والنافذة المنبثقة التي تركت التركيز خلفها، قبل أن يفتح أحد قارئ شاشة.
\nفي استطلاع WebAIM لعام 2026، كانت قارئات الشاشة الأساسية الأكثر شيوعًا على أجهزة سطح المكتب JAWS (55.0%) وNVDA (32.9%)، وكلاهما على Windows، يليهما VoiceOver على macOS (6.5%). وعلى الهاتف، يستخدم 72.2% من المشاركين VoiceOver على iOS، متقدّمًا بفارق كبير على TalkBack على Android (29.5%). مصفوفة اختبار عملية:
\nلـ NVDA وضعان. في وضع التصفّح (browse mode)، يقرأ NVDA الصفحة بمؤشّر افتراضي، والحروف المفردة تقفز بين العناصر. وفي وضع التركيز (focus mode)، تذهب ضغطات المفاتيح إلى عنصر التحكّم، فتستطيع الكتابة في حقل. يبدّل NVDA بينهما تلقائيًا حين تدخل حقلًا، وNVDA+Space يبدّل يدويًا. ومفتاح NVDA هو Insert افتراضيًا، ويمكنك أيضًا تفعيل Caps Lock مفتاحًا لـ NVDA، وهذا مريح على الحاسوب المحمول.
\n| الإجراء | \nمفاتيح NVDA | \n
|---|---|
| تشغيل NVDA / إيقاف الكلام | \nCtrl+Alt+N / Ctrl | \n
| القراءة من هنا | \nNVDA+Down Arrow | \n
| السطر أو العنصر التالي | \nDown Arrow | \n
| العنوان التالي / عنوان المستوى 2 | \nH / 2 | \n
| الـ landmark التالي | \nD | \n
| حقل النموذج / الزر / الرابط التالي | \nF / B / K | \n
| الجدول التالي، ثم التنقّل بين الخلايا | \nT، ثم Ctrl+Alt+Arrows | \n
| قائمة العناوين والروابط والـ landmarks | \nNVDA+F7 | \n
أضِف Shift إلى أي أمر بحرف مفرد للعودة إلى الخلف.
\nشغّل VoiceOver وأوقفه بـ Cmd+F5. ومفاتيح VO هي Control+Option. قبل أن تبدأ، افتح إعدادات Safari وفعّل “Press Tab to highlight each item on a webpage”؛ وإلا فسيتخطّى Tab الروابط في Safari وستبلّغ عن أخطاء غير موجودة.
\n| الإجراء | \nمفاتيح VoiceOver | \n
|---|---|
| العنصر التالي / السابق | \nVO+Right / VO+Left | \n
| التفعيل | \nVO+Space | \n
| القراءة من هنا / إيقاف الكلام | \nVO+A / Control | \n
| العنوان التالي | \nVO+Cmd+H | \n
| الـ Rotor (العناوين، الروابط، الـ landmarks، عناصر النماذج) | \nVO+U، ثم Left/Right للتبديل بين القوائم | \n
على iOS، اسحب يمينًا ويسارًا للتنقّل بين العناصر، وانقر مرتين للتفعيل، وأدِر إصبعين على الشاشة لفتح الـ rotor.
\n\nيجب أن يُعلَن كل عنصر تفاعلي مع اسم ودور، ومع حالة أو قيمة حين يكون ذلك مناسبًا. أصغِ إلى الجزء الناقص:
\n| ما تسمعه | \nالحكم | \n
|---|---|
| “Book now Friday pass, button” | \nاسم ودور: جيد | \n
| “Save to wishlist, toggle button, not pressed” | \nاسم ودور وحالة: جيد | \n
| “edit text, blank” | \nلا اسم: الحقل بلا label | \n
| “Pay now” (ويتخطّاه Tab) | \nلا دور، وغير قابل للتركيز: div قابل للنقر | \n
| “graphic, IMG underscore 2041 dot jpeg” | \nخاصية alt مفقودة | \n
| “How do refunds work?, button” على disclosure | \nلا حالة: aria-expanded مفقودة | \n
وأصغِ أيضًا إلى ما لا يحدث: لا إعلان بعد إضافة تذكرة، ولا شيء يُقال حين تُفتح نافذة حوار، وخطأ يظهر بصمت.
\nالملاحظة التي يستطيع المطوّر إصلاحها دفعة واحدة لها ستة أجزاء:
\nTitle: Quantity stepper buttons have no accessible name\nWhere: /events/friday, Friday pass card\nSteps: NVDA + Chrome. Tab to the "−" button after "Quantity".\nActual: NVDA says "button". Same for "+".\nExpected: "Fewer Friday passes, button" and "More Friday passes, button".\nWCAG: 4.1.2 Name, Role, Value (A). Severity: high (blocks purchase).صار لديك كل ما تحتاجه من أدوات: الفحص الآلي، ولوحة المفاتيح، وقارئا شاشة. ويجمعها الدرس الأخير في تدقيق كامل لـ Ticketly، وفي عادات تُبقيه سهل الوصول بعد أن تغادر.
\n","toc":[{"id":"sec-1","text":"جولة لوحة المفاتيح","level":2},{"id":"sec-2","text":"أيّ قارئات الشاشة تختبر","level":2},{"id":"sec-3","text":"أساسيات NVDA","level":2},{"id":"sec-4","text":"أساسيات VoiceOver (macOS)","level":2},{"id":"sec-5","text":"كيف يبدو الصحيح","level":2},{"id":"sec-6","text":"كتابة الملاحظات","level":2}],"takeaways":["جولة لوحة المفاتيح تتحقّق من إمكانية الوصول إلى كل عنصر، والترتيب، والتركيز المرئي، والتشغيل بـ Enter وSpace، والإغلاق بـ Escape للطبقات المنبثقة، وغياب المصائد.","اختبر NVDA مع Chrome أو Firefox على Windows، وVoiceOver مع Safari على macOS وiOS؛ ومعًا يغطّيان معظم الاستخدام الفعلي لقارئات الشاشة.","يتنقّل مستخدمو قارئ الشاشة عبر العناوين والـ landmarks والروابط وحقول النماذج، فاختبر بهذه الأوامر، لا بالقراءة من الأعلى فقط.","يجب أن يعطي كل إعلان اسمًا ودورًا وأي حالة موجودة؛ وغياب أي جزء من هذا الثلاثي خطأ."],"further":[{"title":"WebAIM: Using NVDA to Evaluate Web Accessibility","url":"https://webaim.org/articles/nvda/"},{"title":"WebAIM: Using VoiceOver to Evaluate Web Accessibility","url":"https://webaim.org/articles/voiceover/"},{"title":"WebAIM: Keyboard Accessibility","url":"https://webaim.org/techniques/keyboard/"},{"title":"W3C WAI: Easy Checks, A First Review of Web Accessibility","url":"https://www.w3.org/WAI/test-evaluate/preliminary/"}],"quiz":[{"q":"تختبر Ticketly باستخدام NVDA في وضع التصفّح (browse mode). أيّ مفتاح يقفز إلى العنوان التالي؟
","options":[{"text":"H","why":"صحيح. في وضع التصفّح، الحروف المفردة تتنقّل بحسب نوع العنصر. وShift+H يعود إلى الخلف، ومن 1 إلى 6 تقفز إلى عنوان من ذلك المستوى."},{"text":"Tab","why":"ينتقل Tab بين العناصر القابلة للتركيز مثل الروابط والأزرار، ويتخطّى العناوين تمامًا."},{"text":"NVDA+F7","why":"هذا يفتح Elements List، وهي نافذة تعرض العناوين والروابط والـ landmarks وغيرها. مفيدة، لكنها ليست القفز بمفتاح واحد."},{"text":"D","why":"يقفز D إلى الـ landmark التالي، مثل main أو navigation، لا إلى العنوان التالي."}],"answer":0},{"q":"في Safari على macOS مع تشغيل VoiceOver، يتخطّى Tab كل روابط Ticketly ولا يزور إلا حقول النماذج. ما الذي يحدث؟
","options":[{"text":"الروابط تنقصها خاصية href","why":"هذا ممكن في صفحة معطوبة، لكن كل الروابط هنا تعمل في المتصفّحات الأخرى. إنه إعداد في Safari، لا خطأ في الصفحة."},{"text":"لا يستطيع VoiceOver قراءة الروابط في Safari","why":"يقرأ VoiceOver الروابط في Safari جيدًا باستخدام VO+arrow keys والـ rotor. المشكلة في سلوك مفتاح Tab فقط."},{"text":"Safari لا يُدرج الروابط في ترتيب Tab افتراضيًا؛ فعّل “Press Tab to highlight each item” أو استخدم Option+Tab","why":"صحيح. فعّل هذا الإعداد قبل اختبار لوحة المفاتيح في Safari، وإلا فستبلّغ عن أخطاء غير موجودة."}],"answer":2},{"q":"يصل التركيز إلى عنصر “Show more dates” في Ticketly فيقول NVDA "Show more dates, button". العنصر يكشف قائمة مخفية. ما الناقص؟
","options":[{"text":"لا شيء؛ الاسم والدور موجودان كلاهما","why":"في زر تبديل يُظهر المحتوى ويُخفيه، الحالة هي الجزء الثالث الذي يحتاجه المستخدمون. ومن دونها لا يعرفون إن كانت القائمة مفتوحة."},{"text":"الحالة، “collapsed” أو “expanded”، التي تأتي من aria-expanded","why":"صحيح. الاسم والدور والحالة معًا تخبر المستخدم ما هو عنصر التحكّم، وماذا يفعل، وما وضعه الحالي."},{"text":"وصف عبر aria-describedby يشرح أنه زر","why":"الدور يقول أصلًا إنه زر. والوصف سيكرّر ذلك بينما تبقى الحالة ناقصة."},{"text":"كلمة “link”، لأنه يكشف محتوى","why":"كشف المحتوى في مكانه فعلٌ، فالدور الصحيح هو button. والجزء الناقص هو الحالة."}],"answer":1}],"exercise":{"kind":"choice","multiple":true,"options":["div-pay","radio-group","blank-field","dialog-open","file-name","status-update","no-state"],"correct":["div-pay","blank-field","file-name","no-state"],"title":"أصغِ إلى صفحة الدفع في Ticketly","prompt":"اختبرت صفحة الدفع في Ticketly باستخدام NVDA وChrome ودوّنت ما سمعته عند سبع نقاط. اختر كل إعلان يكشف خطأً. ولكل واحد منها، فكّر أيّ من الاسم والدور والحالة ناقص أو خاطئ.
\n","hints":["الإعلان الجيد فيه اسم ودور، وحالة حين يكون لعنصر التحكّم حالة.","أصغِ إلى ما هو ناقص: لا اسم، أو لا دور، أو لا حالة، أو اسم ملف حيث يجب أن يكون وصف.","أربعة من السبعة أخطاء."],"explanation":"أربعة إعلانات تكشف أخطاء. “Pay now” بلا دور ويتخطّاه Tab هو div قابل للنقر: استخدم زرًّا. و"edit text, blank" حقل بلا label. و"graphic, IMG underscore 2041 dot jpeg" يعني أن الصورة بلا خاصية alt، فيلجأ قارئ الشاشة إلى اسم الملف. و"How do refunds work?, button" على عنصر للإظهار والإخفاء تنقصه حالته، فيجب إضافة aria-expanded. أما الثلاثة الأخرى فهي ما يبدو عليه الصحيح: مجموعة radio مسمّاة مع الموضع، ونافذة حوار مسمّاة تُعلن نفسها وأول حقل فيها، ورسالة حالة مهذّبة تُقرأ دون نقل التركيز.
\n","checkLabels":{},"optionText":{"div-pay":{"text":"عند قراءة الملخّص: “Pay now”. وينتقل Tab من حقل رقم البطاقة متجاوزًا إياه مباشرة إلى التذييل.","why":"خطأ. لا دور وغير قابل للتركيز: إنه div يتظاهر بأنه زر."},"radio-group":{"text":"عند الدخول بـ Tab إلى خيارات التذكرة: “Ticket type, grouping, Standing, radio button, checked, 1 of 2”.","why":"سلوك صحيح. الـ legend في الـ fieldset يسمّي المجموعة، ولزر الـ radio اسم ودور وحالة وموضعه."},"blank-field":{"text":"عند الانتقال بـ Tab إلى حقل البريد: “edit text, blank”.","why":"خطأ. الحقل بلا اسم متاح، فلا يعرف المستخدم ما يكتبه. يحتاج إلى label."},"dialog-open":{"text":"بعد ضغط Book now: “Book Friday pass, dialog, Quantity, spin button, 1”.","why":"سلوك صحيح. نافذة الحوار مسمّاة، وتُعلن نفسها، وانتقل التركيز إلى أول حقل فيها."},"file-name":{"text":"عند المرور بالأسهم على صورة المكان: “graphic, IMG underscore 2041 dot jpeg”.","why":"خطأ. الصورة بلا خاصية alt، فيقرأ NVDA اسم الملف. أضِف نصًا بديلًا ذا معنى، أو alt=“” إن كانت زخرفية."},"status-update":{"text":"بعد ضغط Add to basket، يبقى التركيز على الزر ويقول NVDA: “Ticket added. 2 tickets in your basket.”","why":"سلوك صحيح. أعلنت live region مهذّبة التحديث دون نقل التركيز."},"no-state":{"text":"على زر الأسئلة الشائعة الذي يُظهر إجابة ويُخفيها: “How do refunds work?, button”. والضغط عليه لا يغيّر شيئًا في الإعلان.","why":"خطأ. الـ disclosure يحتاج إلى aria-expanded ليسمع المستخدمون “collapsed” و"expanded"."}}},"words":766,"readMinutes":5}