# يجب أن يكون للصور نص بديل

<https://www.fixreports.com/ar/issues/image-alt>

WCAG ⁨1.1.1 Non-text Content⁩ · المستوى ⁨A⁩

تفتقر صور إلى بديل نصي، فلا يعرف مستخدمو قارئات الشاشة ما تعرضه.

## ما الذي تفحصه هذه القاعدة
يتحقق من أن لعناصر <img> نصًا بديلًا أو دورًا من نوع none أو presentation.

## لماذا يهم ذلك
يتطلب معيار WCAG 1.1.1 بديلًا نصيًا للصور ذات المعنى. وبدونه، لا يستطيع مستخدم قارئ الشاشة معرفة المنتج الذي تعرضه الصورة.

## كيف تصلحها
### في أي موقع
1. أضف وصفًا قصيرًا ومحددًا في النص البديل لكل صورة في نظام إدارة المحتوى أو القالب لديك.
2. صِف ما يهم المتسوّق: اسم المنتج، ولونه، وزاوية العرض (مثل «حقيبة قماشية بلون زيتوني، منظر أمامي»).
3. يجب أن تحمل الصور الزخرفية سمة alt فارغة (⁨alt=""⁩) كي تتجاوزها قارئات الشاشة.

### في Shopify
1. في لوحة إدارة Shopify، افتح المنتجات > [المنتج] > الوسائط (Products > [product] > Media)، وانقر على كل صورة واملأ حقل «النص البديل» (Alt text). ولصور الأقسام، افتح المتجر الإلكتروني > القوالب > تخصيص (Online Store > Themes > Customize) واضبط النص البديل للصورة في إعدادات القسم.
2. صِف ما يهم المتسوّق: اسم المنتج، ولونه، وزاوية العرض (مثل «حقيبة قماشية بلون زيتوني، منظر أمامي»).
3. يجب أن تحمل الصور الزخرفية سمة alt فارغة (⁨alt=""⁩) كي تتجاوزها قارئات الشاشة.

### في WooCommerce وWordPress
1. في WordPress، افتح الوسائط > المكتبة، واختر كل صورة واملأ حقل «النص البديل». وتستخدم صور معرض المنتج الحقل نفسه.
2. صِف ما يهم المتسوّق: اسم المنتج، ولونه، وزاوية العرض (مثل «حقيبة قماشية بلون زيتوني، منظر أمامي»).
3. يجب أن تحمل الصور الزخرفية سمة alt فارغة (⁨alt=""⁩) كي تتجاوزها قارئات الشاشة.

## كيف تتحقق من الإصلاح
- أعد فحص الصفحات المتأثرة.
- استخدم قارئ شاشة (VoiceOver: اضغط Cmd+F5 على Mac) لتسمع كيف تُعلَن صور المنتجات.

## المصادر
- وثائق قاعدة axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- فهم WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content