HTML Academy · درس

الاختبار باستخدام قارئات الشاشة

استخدام VoiceOver وNVDA للتحقق من تطبيقات ARIA

الاختبار باستخدام قارئات الشاشة درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

لماذا تختبر باستخدام قارئات الشاشة؟

لا تكتشف الأدوات المؤتمتة سوى 30-40% من مشكلات إمكانية الوصول. يكشف الاختبار الفعلي باستخدام قارئ الشاشة مشكلات لا تكتشفها الفحوصات المؤتمتة:

ترتيب قراءة مربك
إعلانات ARIA غير المفيدة
غياب إدارة التركيز
أنماط تفاعلية مربكة

VoiceOver على Mac

يأتي VoiceOver مضمّنًا في macOS، ولا يحتاج إلى تثبيت:

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

VoiceOver على iOS

اختبر تجربة قارئ الشاشة على الأجهزة المحمولة باستخدام VoiceOver على iPhone/iPad:

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

NVDA على Windows

NVDA قارئ شاشة مجاني ومفتوح المصدر لنظام Windows:

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

قائمة التحقق من اختبار قارئ الشاشة

ما يجب التحقق منه باستخدام قارئ الشاشة:

يُعلن عن عنوان الصفحة عند التحميل
تنشئ العناوين بنية تنقل منطقية
تحتوي جميع الصور على نص بديل ذي معنى أو نص بديل فارغ
تحتوي جميع حقول النماذج على تسميات
تملك الأزرار والروابط أسماء وصفية
تعمل آلية حصر التركيز في النافذة المنبثقة بشكل صحيح
يُعلن عن تحديثات المحتوى الديناميكي

أخطاء شائعة في قارئات الشاشة

مشكلات لا تكتشفها الاختبارات المؤتمتة:

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

الاختبار باستخدام لوحة المفاتيح أولًا

قبل استخدام قارئ الشاشة، اختبر باستخدام لوحة المفاتيح فقط:

افصل الفأرة أو لوحة اللمس
تنقّل في الصفحة بأكملها باستخدام Tab فقط
تحقق من إمكانية الوصول إلى كل عنصر تفاعلي
تحقق من إمكانية تنفيذ جميع الإجراءات باستخدام لوحة المفاتيح

أدوات اختبار إمكانية الوصول المؤتمتة

أكمل الاختبار اليدوي باستخدام الأدوات المؤتمتة:

axe DevTools — إضافة لمتصفح Chrome؛ أدق أداة فحص مؤتمتة
WAVE — wavebooth.com؛ تراكب مرئي على الصفحة
Lighthouse — أدوات مطوري Chrome؛ تدقيق الأداء وإمكانية الوصول
pa11y — أداة لسطر الأوامر؛ مناسبة جدًا لخطوط CI/CD

مرجع أنماط ARIA

يوفر دليل ممارسات تأليف ARIA (APG) من W3C تطبيقات مرجعية:

Accordion، Alert، Alert Dialog
Breadcrumb، Button، Carousel
Checkbox، Combobox، Dialog
Disclosure، Feed، Grid
Listbox، Menu، Menubar
Tab، Tooltip، Treeview

URL: w3.org/WAI/ARIA/apg/

الدمج المستمر لإمكانية الوصول

أدرج اختبار إمكانية الوصول ضمن سير عملك:

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

ملخص الاختبار

استراتيجية متكاملة لاختبار إمكانية الوصول:

التصميم — تحقق من تباين الألوان وأحجام أهداف اللمس
التطوير — اختبر باستخدام لوحة المفاتيح، وأجرِ فحصًا مؤتمتًا باستخدام axe
المراجعة — اختبر باستخدام قارئ الشاشة (VoiceOver وNVDA)
CI/CD — استخدم pa11y أو axe في خط الأنابيب المؤتمت
الإنتاج — استخدم Lighthouse وفحوصات يدوية موضعية

تحقق سريع

ما النسبة المئوية من مشكلات إمكانية الوصول التي تستطيع الأدوات المؤتمتة اكتشافها بشكل موثوق؟

مراجعة: اختبار قارئ الشاشة

أساسيات الاختبار:

VoiceOver (على Mac/iOS) وNVDA (على Windows) مجانيان ولا غنى عنهما
اختبر باستخدام لوحة المفاتيح فقط أولًا، ثم أضف قارئ الشاشة
الأدوات المؤتمتة: axe وWAVE وLighthouse وpa11y
لا تكتشف الاختبارات المؤتمتة سوى نحو 30-40% من المشكلات
ارجع إلى أنماط APG لتطبيقات ARIA الصحيحة

الأسئلة الشائعة

هل درس «الاختبار باستخدام قارئات الشاشة» مجاني؟

نعم — نص درس «الاختبار باستخدام قارئات الشاشة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «الاختبار باستخدام قارئات الشاشة»؟

استخدام VoiceOver وNVDA للتحقق من تطبيقات ARIA تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «الاختبار باستخدام قارئات الشاشة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

aria-expanded وaria-controls لعناصر التبديل
aria-selected وأنماط علامات التبويب
المناطق الحية: aria-live وaria-atomic وaria-relevant
الاختبار باستخدام قارئات الشاشة

← العودة إلى HTML Academy