ما الذي تفحصه هذه القاعدة
يتحقق من أن لعناصر <img> نصًا بديلًا أو دورًا من نوع none أو presentation.
لماذا يهم ذلك
يتطلب معيار WCAG 1.1.1 بديلًا نصيًا للصور ذات المعنى. وبدونه، لا يستطيع مستخدم قارئ الشاشة معرفة المنتج الذي تعرضه الصورة.
كيف تصلحها
في أي موقع
- أضف وصفًا قصيرًا ومحددًا في النص البديل لكل صورة في نظام إدارة المحتوى أو القالب لديك.
- صِف ما يهم المتسوّق: اسم المنتج، ولونه، وزاوية العرض (مثل «حقيبة قماشية بلون زيتوني، منظر أمامي»).
- يجب أن تحمل الصور الزخرفية سمة alt فارغة (alt="") كي تتجاوزها قارئات الشاشة.
في Shopify
- في لوحة إدارة Shopify، افتح المنتجات > [المنتج] > الوسائط (Products > [product] > Media)، وانقر على كل صورة واملأ حقل «النص البديل» (Alt text). ولصور الأقسام، افتح المتجر الإلكتروني > القوالب > تخصيص (Online Store > Themes > Customize) واضبط النص البديل للصورة في إعدادات القسم.
- صِف ما يهم المتسوّق: اسم المنتج، ولونه، وزاوية العرض (مثل «حقيبة قماشية بلون زيتوني، منظر أمامي»).
- يجب أن تحمل الصور الزخرفية سمة alt فارغة (alt="") كي تتجاوزها قارئات الشاشة.
في WooCommerce وWordPress
- في WordPress، افتح الوسائط > المكتبة، واختر كل صورة واملأ حقل «النص البديل». وتستخدم صور معرض المنتج الحقل نفسه.
- صِف ما يهم المتسوّق: اسم المنتج، ولونه، وزاوية العرض (مثل «حقيبة قماشية بلون زيتوني، منظر أمامي»).
- يجب أن تحمل الصور الزخرفية سمة alt فارغة (alt="") كي تتجاوزها قارئات الشاشة.
كيف تتحقق من الإصلاح
- أعد فحص الصفحات المتأثرة.
- استخدم قارئ شاشة (VoiceOver: اضغط Cmd+F5 على Mac) لتسمع كيف تُعلَن صور المنتجات.
كيف يكتشفها FixReports
يشغّل فحصنا قاعدة axe-core image-alt في متصفح Chrome حقيقي على كل صفحة يختبرها، ويبلّغ عن كل عنصر لا يجتازها مع صفحته وترميزه، ومع لقطة شاشة حيثما ينطبق ذلك.
يؤكد الاختبار الآلي وجود هذه المشكلة بعينها، لكنه لا يستطيع أن يحكم على إمكانية الوصول في بقية الصفحة: فبعض العوائق لا تظهر إلا عندما يفحص شخصٌ الصفحة بنفسه.