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

يقدم هذا الدليل تعليمات شاملة لاختبار إمكانية الوصول لوثائق برينسايت لضمان الامتثال لمعايير WCAG 2.2 المستوى AA.

نظرة عامة¶

يجب أن تفي جميع وثائق برينسايت بمعايير WCAG 2.2 المستوى AA لضمان إمكانية الوصول لجميع المستخدمين، بما في ذلك ذوي الإعاقة.

جدول المحتويات¶

1. الاختبار الآلي
2. اختبار التنقل بلوحة المفاتيح
3. اختبار قارئ الشاشة
4. اختبار تباين الألوان
5. سمات اللغة
6. قائمة التحقق من الاختبار

الاختبار الآلي¶

الأدوات¶

1. axe DevTools (إضافة المتصفح)
2. التثبيت من Chrome Web Store
3. التشغيل على كل صفحة بعد البناء المحلي

4. إصلاح جميع المشكلات الحرجة والخطيرة

5. WAVE (أداة تقييم إمكانية الوصول على الويب)

6. زيارة wave.webaim.org
7. إدخال عنوان URL للصفحة أو استخدام إضافة المتصفح

8. مراجعة الأخطاء والتحذيرات

9. Lighthouse (مدمج في Chrome DevTools)

   # في Chrome DevTools
   1. افتح DevTools (F12)
   2. انتقل إلى علامة تبويب "Lighthouse"
   3. حدد فئة "Accessibility"
   4. انقر على "Generate report"
   5. استهدف نتيجة 95+
   

تشغيل الاختبارات الآلية¶

# تثبيت التبعيات
npm install -g pa11y-ci

# إنشاء تكوين pa11y
cat > .pa11y-ci.json << 'EOF'
{
  "defaults": {
    "standard": "WCAG2AA",
    "timeout": 30000,
    "wait": 1000
  },
  "urls": [
    "http://localhost:8000/",
    "http://localhost:8000/healthcare/",
    "http://localhost:8000/business/",
    "http://localhost:8000/tech/"
  ]
}
EOF

# بدء الخادم المحلي
mkdocs serve &

# تشغيل الاختبارات
pa11y-ci

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

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

إجراء الاختبار¶

1. التنقل بـ Tab
2. اضغط Tab للانتقال للأمام عبر العناصر التفاعلية
3. اضغط Shift+Tab للانتقال للخلف

4. تحقق من إمكانية الوصول لجميع الروابط والأزرار وعناصر التحكم

5. مؤشرات التركيز

6. تأكد من وجود مخطط تركيز مرئي على جميع العناصر المركزة

7. يجب أن يكون التركيز مرئياً بوضوح على جميع الخلفيات

8. اختصارات لوحة المفاتيح

1. روابط التخطي
2. اضغط Tab عند تحميل الصفحة
3. تحقق من ظهور رابط "تخطي إلى المحتوى"
4. اضغط Enter للتخطي إلى المحتوى الرئيسي

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

اختبر كل صفحة:

• يمكن الوصول لجميع روابط التنقل بمفتاح Tab
• مؤشر التركيز مرئي على جميع العناصر
• يمكن تفعيل جميع الروابط بمفتاح Enter
• يمكن تفعيل جميع الأزرار بـ Enter أو Space
• القوائم المنسدلة قابلة للوصول بلوحة المفاتيح
• يمكن إغلاق النوافذ المنبثقة بمفتاح Esc
• لا يوجد فخ لوحة مفاتيح
• ترتيب Tab يتبع ترتيب القراءة المنطقي

اختبار قارئ الشاشة¶

اختبر مع قارئ شاشة واحد على الأقل لضمان الإعلان عن المحتوى بشكل صحيح.

قارئات الشاشة الموصى بها¶

1. NVDA (Windows، مجاني)
2. التحميل: nvaccess.org

3. الأفضل لـ: اختبار Firefox

4. JAWS (Windows، تجاري)

5. تجريبي: freedomscientific.com

6. المعيار الصناعي

7. VoiceOver (macOS/iOS، مدمج)

8. التفعيل: Cmd+F5 على Mac

9. الأفضل لـ: اختبار Safari

10. TalkBack (Android، مدمج)

11. التفعيل: الإعدادات > إمكانية الوصول > TalkBack

أوامر قارئ الشاشة الأساسية¶

NVDA (Windows)¶

VoiceOver (macOS)¶

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

لكل صفحة:

• يُعلن عن عنوان الصفحة عند التحميل
• العنوان الرئيسي (H1) واضح ووصفي
• معالم التنقل محددة بشكل صحيح
• جميع الصور لها نص بديل مناسب
• الروابط لها نص وصفي (وليس "انقر هنا")
• النماذج لها تسميات مناسبة
• يُعلن عن رسائل الخطأ
• يُعلن عن تحديثات المحتوى الديناميكي
• يُعلن عن تغييرات اللغة (الإنجليزية/العربية)
• الجداول لها رؤوس مناسبة

اختبار تباين الألوان¶

تأكد من وجود تباين كافٍ بين النص وألوان الخلفية.

متطلبات WCAG¶

• النص العادي: الحد الأدنى لنسبة التباين 4.5:1
• النص الكبير (18pt+ أو 14pt+ سميك): الحد الأدنى لنسبة التباين 3:1
• مكونات واجهة المستخدم: الحد الأدنى لنسبة التباين 3:1

أدوات الاختبار¶

1. WebAIM Contrast Checker
2. زيارة: webaim.org/resources/contrastchecker
3. أدخل ألوان المقدمة والخلفية

4. تحقق من امتثال WCAG AA

5. أدوات مطور المتصفح

   # Chrome DevTools
   1. فحص العنصر
   2. انقر على عينة اللون في لوحة الأنماط
   3. عرض نسبة التباين في منتقي الألوان
   4. اضبط حتى امتثال AA أو AAA
   

تباين لوحة ألوان برينسايت¶

اختبر هذه المجموعات اللونية:

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

• نص الجسم يلبي الحد الأدنى 4.5:1
• نص العناوين يلبي النسبة المناسبة
• نص الروابط مميز عن نص الجسم
• نص الأزرار له تباين كافٍ
• مؤشرات التركيز مرئية بوضوح
• حالات التحويم تحافظ على التباين
• رسائل الخطأ قابلة للقراءة
• رسائل النجاح قابلة للقراءة

سمات اللغة¶

تضمن سمات اللغة الصحيحة النطق والترجمة الصحيحين.

سمات HTML Lang¶

يجب أن تحتوي جميع الصفحات على:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>عنوان الصفحة</title>
  </head>
  <body>
    <main>
      <h1>المحتوى العربي</h1>
      <p>هذا المحتوى بالعربية.</p>
    </main>
  </body>
</html>

للصفحات الإنجليزية:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <main>
      <h1>English Content</h1>
      <p>This is in English.</p>
    </main>
  </body>
</html>

المحتوى ثنائي اللغة¶

للصفحات التي تحتوي على كلا اللغتين:

<section>
  <h2>المطالبات الصحية | Healthcare Claims</h2>

  <div lang="ar" dir="rtl">
    <h3>نظرة عامة</h3>
    <p>معالجة المطالبات الصحية...</p>
  </div>

  <div lang="en">
    <h3>Overview</h3>
    <p>Healthcare claims processing...</p>
  </div>
</section>

قائمة التحقق من سمات اللغة¶

• عنصر <html> الجذر له سمة lang
• الصفحات العربية لها dir="rtl"
• تغييرات اللغة داخل الصفحة محددة
• سمة lang على جميع الأقسام بلغة مختلفة
• الكلمات/العبارات الأجنبية المضمنة محددة بـ lang

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

اختبار إمكانية الوصول الكامل¶

لكل صفحة توثيق:

الهيكل¶

• HTML5 صالح
• H1 واحد لكل صفحة
• تسلسل عناوين منطقي (لا مستويات متخطاة)
• عناصر HTML الدلالية مستخدمة بشكل صحيح
• معالم ARIA مستخدمة بشكل صحيح

الصور والوسائط¶

• جميع الصور لها نص بديل
• الصور الزخرفية لها alt فارغ (alt="")
• الصور المعقدة لها أوصاف طويلة
• عناصر SVG لها عناصر title وdesc
• الفيديوهات لها تسميات توضيحية (إن وجدت)

الروابط والتنقل¶

• جميع الروابط لها نص وصفي
• غرض الرابط واضح من النص وحده
• رابط تخطي إلى المحتوى الرئيسي موجود
• تنقل مسار الصفحات متوفر
• الصفحة الحالية محددة في التنقل

النماذج والتفاعلات¶

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

الألوان والتباين¶

• تباين النص يلبي WCAG AA (4.5:1)
• تباين النص الكبير يلبي WCAG AA (3:1)
• تباين مكونات UI يلبي WCAG AA (3:1)
• اللون ليس الوسيلة الوحيدة لنقل المعلومات

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

• جميع الوظائف متاحة عبر لوحة المفاتيح
• مؤشرات التركيز مرئية
• ترتيب tab منطقي
• لا فخاخ لوحة مفاتيح

قارئ الشاشة¶

• عنوان الصفحة وصفي
• العناوين تصف المحتوى
• المعالم مُعلّمة بشكل صحيح
• المحتوى الديناميكي يُعلن عنه
• تغييرات اللغة يُعلن عنها

الجوال¶

• أهداف اللمس 44x44 بكسل على الأقل
• تكبير القرص غير معطل
• الاتجاه غير مقفل
• المحتوى قابل للقراءة بدون تكبير

الإبلاغ عن المشكلات¶

عند العثور على مشكلات إمكانية الوصول:

1. توثيق المشكلة

   ## المشكلة: نص بديل مفقود على المخطط
   
   **الصفحة**: healthcare/nphies/workflows.md
   **العنصر**: السطر 45، مخطط سير العمل
   **معيار WCAG**: 1.1.1 المحتوى غير النصي
   **الشدة**: عالية
   **الإصلاح**: إضافة نص بديل وصفي يشرح خطوات سير العمل
   

2. إنشاء مشكلة GitHub

3. استخدم تسمية "accessibility"
4. أدرج لقطات شاشة
5. حدد معيار WCAG

6. اقترح إصلاحاً إن أمكن

7. مستويات الأولوية

8. حرجة: تمنع استخدام الصفحة لبعض المستخدمين
9. عالية: عائق رئيسي لإمكانية الوصول
10. متوسطة: مشكلة ملحوظة لكن يوجد حل بديل
11. منخفضة: مشكلة طفيفة، تأثير ضئيل

الموارد¶

إرشادات WCAG¶

• نظرة عامة على WCAG 2.2
• مقالات WebAIM

أدوات الاختبار¶

• axe DevTools
• WAVE
• pa11y

قارئات الشاشة¶

• NVDA
• JAWS
• دليل مستخدم VoiceOver

التعلم¶

• مبادرة إمكانية الوصول على الويب (WAI)
• سلسلة فيديو A11ycasts

OID: 1.3.6.1.4.1.61026