أساسيات إمكانية الوصول لصور بطاقات المنتجات: النص البديل، والأدوار، وقارئات الشاشة

يشرح هذا الدليل كيفية جعل صور بطاقات المنتجات متاحة للجميع: كتابة نص بديل هادف، واختيار الترميز أو الأدوار الصحيحة للعناصر المرئية غير الصور، وهيكلة علاقات الصورة/التعليق، والاختبار باستخدام قارئات الشاشة ولوحات المفاتيح - لضمان سهولة استخدام بطاقات التجارة الإلكترونية للجميع. ⏱️ قراءة لمدة 5 دقائق

أساسيات النص البديل لصور بطاقات المنتجات

يجب أن يجيب النص البديل على السؤال: "ماذا توضح هذه الصورة؟" اجعله موجزًا ​​وعمليًا: صف المنتج وأي متغير أو حالة مهمة تظهرها الصورة. تجنب الكلمات الزائدة في واجهة المستخدم مثل "صورة لـ" أو "صورة". إذا كان اسم المنتج ووصف قصير ظاهرين بالقرب منه، فيمكن أن يكون النص البديل أقصر أو مطابقًا للنص الظاهر حتى لا تتسبب برامج قراءة الشاشة في التفاف النص بشكل مربك.

• جيد: "كرسي طعام من خشب الأرز، تشطيب الجوز" - موجز، يحدد المنتج ونوعه.
• الأفضل للأغراض الترويجية: "كرسي طعام من خشب الأرز، تشطيب الجوز - معروض للبيع بخصم 20٪" - فقط إذا كانت الصورة نفسها توضح العرض الترويجي.
• سيئ: "صورة الكرسي" أو قوائم طويلة من تفاصيل التصميم التي لا تفيد في اتخاذ قرارات الشراء.

إذا كانت الصورة هي المكان الوحيد الذي تظهر فيه المعلومات (على سبيل المثال، يتم عرض منتج في تكوين معين غير موصوف بطريقة أخرى)، فقم بتضمين تلك المعلومات في النص البديل بحيث تكون متاحة للتقنيات المساعدة.

الصور مقابل الصور الزخرفية أو صور الخلفية

حدد ما إذا كانت كل صورة تمثل محتوى أم عنصرًا زخرفيًا. إذا كانت الصورة تنقل معلومات عن المنتج أو تدعم رابطًا، فاستخدم عنصر <img> حقيقيًا مع نص بديل ذي معنى. أما إذا كانت الصورة زخرفية بحتة - كالإطارات المزخرفة أو عناصر التصميم - فأخفها عن التقنيات المساعدة.

• <img> التزيينية: استخدم سمة alt فارغة alt="" وتأكد من عدم وجود تسريب للاسم الذي يمكن الوصول إليه.
• صور الخلفية الزخرفية (CSS): ابقها خارج شجرة إمكانية الوصول؛ تجنب إعطائها أدوارًا أو تسميات ARIA.
• إذا كانت صورة الخلفية هي الطريقة الوحيدة لنقل معلومات المنتج، فانقلها إلى عنصر <img> بحيث يمكن إضافة نص بديل لها.

الأدوار والدلالات للعناصر غير الصورية

أحيانًا تُستخدم عناصر <div> أو خلفيات CSS لعرض صور المنتجات (لأسباب تتعلق بالتصميم أو الأداء). إذا كان لا بد من عرض هذا العنصر كصورة للأجهزة المساعدة، فيجب استخدام الدلالات الدلالية بشكل صحيح.

• استخدم خاصية role="img" فقط عندما يُمثل عنصر غير img صورةً حقيقيةً تُوصل محتوىً. ثم قم بتوفير اسم يسهل الوصول إليه عبر aria-label أو aria-labelledby .
• مثال: <div role="img" aria-label="Blue running shoes, size 9"></div>
• تجنب استخدام role="img" + نص مزخرف؛ إذا كان النص مزخرفًا، فأضف aria-hidden="true" بدلاً من ذلك.
• لا تعتمد على سمات العنوان لإمكانية الوصول - فهي مدعومة بشكل غير متسق وليست بديلاً عن تسمية alt أو ARIA.

بنية الشكل والتعليق

عندما تحتاج الصورة إلى تعليق توضيحي - مثل شارات الأسعار، أو أوصاف المتغيرات، أو ملاحظات الاستخدام - استخدم البنية الدلالية مع <الشكل> و<تعليق الشكل>. هذا يجمع الصورة مع نصها التوضيحي ويخلق علاقة قراءة واضحة للتكنولوجيا المساعدة.

• مثال على البنية: صورة منتج داخل <figure> مع <figcaption> تحتوي على اسم المنتج أو وصف مختصر.
• إذا كانت الصورة نفسها عبارة عن رابط أيضًا، فاحتفظ بـ <a> داخل <figure> أو قم بتغليف <figure> بالرابط بشكل متسق، وتأكد من أن الاسم الذي يمكن الوصول إليه واضح (تجنب الإعلانات المكررة).
• عندما يصف النص المرئي المنتج بالفعل، فكر في استخدام alt="" والإشارة إلى التسمية المرئية باستخدام aria-labelledby للحصول على اسم واحد متماسك وسهل الوصول إليه.

اختبار قارئ الشاشة وإمكانية الوصول إلى لوحة المفاتيح

تستطيع الأدوات الآلية رصد العديد من المشكلات، لكن الاختبار اليدوي باستخدام تقنيات مساعدة حقيقية أمرٌ ضروري. اختبر باستخدام VoiceOver (لنظامي macOS وiOS)، وNVDA (لنظام Windows)، وTalkBack (لنظام Android)، وتحقق من ترتيب علامات التبويب في لوحة المفاتيح وسلوك التركيز لبطاقات المنتجات.

• تحقق من ترتيب القراءة: يجب أن تصادف قارئات الشاشة اسم المنتج والسعر والإجراء بتسلسل منطقي، ويجب ألا تكرر الصورة المعلومات التي تمت قراءتها بالفعل دون داعٍ.
• لوحة المفاتيح: يجب أن تكون الروابط والعناصر التفاعلية داخل البطاقة قابلة للوصول عبر مفتاح Tab، وأن يكون لها أنماط تركيز مرئية، وأن تكون قابلة للتشغيل بواسطة مفتاح Enter/Space عند الاقتضاء.
• استخدم أشجار إمكانية الوصول في أدوات المطورين (لوحة إمكانية الوصول في أدوات مطوري Chrome، ومفتش الويب في Safari) للتأكد من عرض الأدوار والأسماء والخصائص كما هو مقصود.
• قم بإجراء اختبارات منتظمة للمستخدمين مع مستخدمي التقنيات المساعدة للحصول على أعلى مستوى من الثقة.

الأداء، والاستجابة، واتساق الترميز

يجب أن تتميز الصور التي يسهل الوصول إليها أيضاً بالأداء العالي والاستجابة السريعة. استخدم تقنيات الصور الحديثة مع الحفاظ على دلالات سهولة الوصول.

• قم بعرض صور متجاوبة باستخدام srcset و sizes لكي تختار المتصفحات الدقة المناسبة. ينتقل النص البديل مع العنصر بغض النظر عن اختيار المصدر.
• استخدم loading="lazy" للصور خارج الشاشة؛ تأكد من أن التحميل الكسول لا يؤخر توفر الأسماء ذات المعنى والتي يمكن الوصول إليها أو العناصر القابلة للتركيز للتقنيات المساعدة.
• حافظ على اتساق الترميز عبر بطاقات المنتجات: يمنع ترتيب DOM المتسق ترتيب القراءة المفاجئ ويحافظ على إمكانية التنبؤ بالتنقل باستخدام لوحة المفاتيح.
• تجنب تبديل عقد DOM بطرق تؤدي إلى إزالة الأسماء التي يمكن الوصول إليها أو كسر العلاقات (على سبيل المثال، نقل اسم المنتج المرئي خارج التسلسل المنطقي).

الأخطاء الشائعة والأنماط العملية

تتسبب بعض الأخطاء المتكررة في معظم مشاكل إمكانية الوصول. استخدم هذه الأنماط العملية لتجنبها.

• المأزق: نص بديل طويل ومطول. النمط: نص بديل قصير وعملي يكمل النص المرئي - على سبيل المثال، "جاكيت رجالي مقاوم للماء، أخضر غامق، متوسط" .
• مشكلة: قد تُعلن قارئات الشاشة عن الصور الزخرفية. الحل: ضع علامة <img alt=""> على الصور الزخرفية البحتة، أو أضف aria-hidden="true" للعناصر غير الصور.
• مأزق: استخدام صور الخلفية لعرض المعلومات الأساسية. الحل: تحويلها إلى <img> أو تقديم المعلومات كنص يسهل الوصول إليه بجوار الصورة.
• مشكلة: محتوى مكرر يُقرأ مرتين (نص بديل للصورة يكرر العنوان الظاهر). الحل: إما الاحتفاظ بالنص البديل ("") إذا كان العنوان الظاهر يصف الصورة بالكامل، أو استخدام aria-labelledby للإشارة إلى النص الموجود لإنشاء اسم واحد يسهل الوصول إليه.
• مأزق: التفاعل غير الدلالي (عنصر <div> قابل للنقر). النمط: استخدم عنصر <button> أو <a> الأصلي عندما يكون العنصر قابلاً للنقر؛ إذا كان لا بد من استخدام عنصر غير دلالي، فأضف الدور ومعالجات لوحة المفاتيح وأنماط التركيز بعناية.

إن تطبيق هذه المبادئ سيجعل بطاقات منتجاتك أكثر فائدة لمستخدمي قارئات الشاشة وأكثر قوة عبر الأجهزة: اكتب نصًا بديلًا هادفًا، واعرض فقط الصور المرئية ذات المعنى، واستخدم التجميع الدلالي مع الشكل/شرح الشكل، واختبر باستخدام تقنية مساعدة حقيقية والتنقل عبر لوحة المفاتيح.

مدعوم من Trafficontent