مراجعة سهولة الوصول

# /accessibility-review

> إذا رأيت عناصر نائبة غير مألوفة أو كنت بحاجة للتحقق من الأدوات المتصلة، انظر [CONNECTORS.md](../../CONNECTORS.md).

تدقيق التصميم أو الصفحة للامتثال لمعايير إمكانية الوصول WCAG 2.1 AA.

## طريقة الاستخدام

``` /accessibility-review $ARGUMENTS ```

تدقيق إمكانية الوصول: @$1

## مرجع سريع WCAG 2.1 AA

### قابل للإدراك - **1.1.1** المحتوى غير النصي يحتوي على نص بديل - **1.3.1** يتم نقل المعلومات والبنية بطريقة دلالية - **1.4.3** نسبة التباين >= 4.5:1 (النص العادي)، >= 3:1 (النص الكبير) - **1.4.11** التباين غير النصي >= 3:1 (مكونات الواجهة والرسوميات)

### قابل للتشغيل - **2.1.1** جميع الوظائف متاحة عبر لوحة المفاتيح - **2.4.3** ترتيب التركيز منطقي - **2.4.7** مؤشر التركيز مرئي - **2.5.5** هدف اللمس >= 44x44 بكسل CSS

### قابل للفهم - **3.2.1** يمكن التنبؤ به عند التركيز (لا توجد تغييرات غير متوقعة) - **3.3.1** تحديد الخطأ (وصف الخطأ) - **3.3.2** تسميات أو تعليمات للحقول

### قوي - **4.1.2** الاسم والدور والقيمة لجميع مكونات الواجهة

## المشاكل الشائعة

1. تباين لوني غير كافٍ 2. تسميات نماذج مفقودة 3. عدم وجود إمكانية الوصول عبر لوحة المفاتيح للعناصر التفاعلية 4. نص بديل مفقود على الصور ذات الصلة 5. فخاخ التركيز في النوافذ المنبثقة 6. علامات ARIA مفقودة 7. وسائط تشغيل تلقائي بدون عناصر تحكم 8. حدود زمنية بدون خيارات التمديد

## نهج الاختبار

1. المسح الآلي (يكتشف حوالي 30% من المشاكل) 2. الملاحة باستخدام لوحة المفاتيح فقط 3. اختبار قارئ الشاشة (VoiceOver، NVDA) 4. التحقق من تباين الألوان 5. التكبير إلى 200% — هل يتعطل التخطيط؟

## المخرجات

```markdown ## تدقيق إمكانية الوصول: [اسم التصميم/الصفحة] **المعيار:** WCAG 2.1 AA | **التاريخ:** [التاريخ]

### ملخص **المشاكل المكتشفة:** [X] | **حرجة:** [X] | **رئيسية:** [X] | **طفيفة:** [X]

### النتائج

#### قابل للإدراك | # | المشكلة | معيار WCAG | الخطورة | التوصية | |---|--------|-----------|--------|----------| | 1 | [المشكلة] | [1.4.3 Contrast] | 🔴 حرجة | [الإصلاح] |

#### قابل للتشغيل | # | المشكلة | معيار WCAG | الخطورة | التوصية | |---|--------|-----------|--------|----------| | 1 | [المشكلة] | [2.1.1 Keyboard] | 🟡 رئيسية | [الإصلاح] |

#### قابل للفهم | # | المشكلة | معيار WCAG | الخطورة | التوصية | |---|--------|-----------|--------|----------| | 1 | [المشكلة] | [3.3.2 Labels] | 🟢 طفيفة | [الإصلاح] |

#### قوي | # | المشكلة | معيار WCAG | الخطورة | التوصية | |---|--------|-----------|--------|----------| | 1 | [المشكلة] | [4.1.2 Name, Role, Value] | 🟡 رئيسية | [الإصلاح] |

### فحص التباين اللوني | العنصر | المقدمة | الخلفية | النسبة | المطلوبة | ناجحة؟ | |--------|---------|---------|-------|----------|--------| | [نص الجسم] | [اللون] | [اللون] | [X]:1 | 4.5:1 | ✅/❌ |

### ملاحة لوحة المفاتيح | العنصر | ترتيب Tab | Enter/Space | Escape | مفاتيح الأسهم | |--------|-----------|-------------|--------|----------------| | [العنصر] | [الترتيب] | [السلوك] | [السلوك] | [السلوك] |

### قارئ الشاشة | العنصر | ما يتم الإعلان عنه | المشكلة | |--------|------------------|--------| | [العنصر] | [ما يقوله قارئ الشاشة] | [المشكلة إن وجدت] |

### إصلاحات ذات أولوية 1. **[إصلاح حرج]** — يؤثر على [من] ويحظر [ماذا] 2. **[إصلاح رئيسي]** — يحسّن [ماذا] لـ [من] 3. **[إصلاح طفيف]** — من الجميل أن يكون موجوداً ```

## إذا كانت الموصلات متاحة

إذا كان **أداة التصميم** متصلة: - فحص قيم الألوان وأحجام الخطوط وأهداف اللمس مباشرة من Figma - تحقق من أدوار ARIA وسلوك لوحة المفاتيح في مواصفات المكون

إذا كان **متتبع المشاريع** متصلاً: - إنشاء تذاكر لكل اكتشاف إمكانية وصول مع الخطورة ومعيار WCAG - ربط الاكتشافات بالحروق الملحمية الموجودة لمعالجة إمكانية الوصول

## نصائح

1. **ابدأ بالتباين ولوحة المفاتيح** — هذه تكتشف المشاكل الأكثر شيوعاً وتأثيراً. 2. **اختبر باستخدام تكنولوجيا مساعدة حقيقية** — تدقيقي أساس عظيم، لكن الاختبار اليدوي مع VoiceOver/NVDA يكتشف أشياء لا أستطيع اكتشافها. 3. **أعط الأولوية حسب التأثير** — أصلح المشاكل التي تحظر المستخدمين أولاً، والتفاصيل الدقيقة لاحقاً.