الاختبار النهائي

السؤال 1 من 12

<span class="link" onclick="go('/faq')">FAQ</span>

• أضِف tabindex=“0”
• أضِف role=“link”
• أضِف aria-label=“FAQ”
• استبدله بـ <a href="/faq">FAQ</a>

السؤال 2 من 12

• يفشل في AA، لأن النص الصغير يحتاج إلى 10:1
• ينجح في AA ‏(4.5:1) وفي AAA أيضًا (7:1) للنص العادي
• ينجح في AA فقط لأن الأزرار تُعدّ نصًا كبيرًا

السؤال 3 من 12

• إلى ملخّص أخطاء في الأعلى يسرد المشكلات الثلاث كروابط إلى حقولها
• لا مكان؛ الإطارات الحمراء تُظهر أيّ الحقول خاطئة
• إلى زر الإرسال، ليحاول المستخدم مرة أخرى

السؤال 4 من 12

• aria-pressed لا تعمل إلا على مربّعات الاختيار
• يجب أن تستخدم أزرار التبديل aria-expanded بدلًا منها
• تغيير التسمية والحالة معًا يعطي إعلانًا مربكًا مثل “Unbold, toggle button, pressed”؛ أبقِ التسمية ثابتة

السؤال 5 من 12

• لا مكان؛ المتصفّح يتولّى الأمر
• إلى شعار الموقع
• إلى أول رابط في التذييل
• إلى عنوان السلة أو رسالة «سلّتك فارغة» صارت قابلة للتركيز بـ tabindex=“-1”

السؤال 6 من 12

• لا، كل هدف يجب ألا يقلّ عن 24 × 24 px
• نعم، بموجب استثناء المسافة: الدوائر بقطر 24 px المتمركزة على كل هدف لا تتداخل مع بعضها ولا مع الهدف الآخر
• نعم، لأن أزرار الأيقونات مستثناة

السؤال 7 من 12

• lang="fr" على الـ blockquote، لتتحوّل قارئات الشاشة إلى النطق الفرنسي (3.1.2 Language of Parts)
• dir="rtl" على الـ blockquote
• لا شيء، لأن الصفحة عليها lang=“en” أصلًا

السؤال 8 من 12

• التنبيهات (alerts) لا تُعلنها قارئات الشاشة أبدًا
• الـ live regions لا يمكن أن تحتوي كلمة “added”
• الـ alert حازمة وتقاطع الكلام؛ ورسالة التأكيد الروتينية يجب أن تستخدم role=“status”
• يجب أن تكون الرسالة في عنوان الصفحة بدلًا من ذلك

السؤال 9 من 12

• فحص axe للصفحة والنافذة مغلقة
• فحص تباين الألوان بمنتقي الألوان في أدوات المطوّر
• التحقّق من صحة كود HTML
• فتح النافذة بلوحة المفاتيح وضغط Tab، أو مراقبة document.activeElement

السؤال 10 من 12

<a href="/artists/nour"><img src="nour.jpg" alt="Nour Quartet"> Nour Quartet</a>

• تحتاج الصورة إلى role=“img”
• يصبح الاسم “Nour Quartet Nour Quartet”؛ ويجب أن تحمل الصورة alt=“” لأن النص يسمّي الرابط أصلًا
• لا يمكن أن تحتوي الروابط صورًا

السؤال 11 من 12

• 2.4.13 Focus Appearance
• 2.5.8 Target Size (Minimum)
• 3.3.8 Accessible Authentication (Minimum)
• 2.4.11 Focus Not Obscured (Minimum)

السؤال 12 من 12

• افحص navigator.reducedMotion قبل البدء
• اسأل المستخدم عبر confirm() عند كل تحميل للصفحة
• افحص window.matchMedia('(prefers-reduced-motion: reduce)').matches ولا تبدأ التمرير التلقائي حين تكون true، مع الإبقاء على زر الإيقاف المؤقت في الحالتين