كيف تكتب نصًا بديلًا جيدًا للصور (مع أمثلة)

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

ما النص البديل ومن يستخدمه

يوجد النص البديل في السمة alt للصورة: <img src="coat.jpg" alt="معطف شتوي من الصوف الأزرق بقبعة">. يسمعه الأشخاص المكفوفون وضعاف البصر عبر قارئ الشاشة. ويظهر أيضًا عندما تفشل الصورة في التحميل، وتقرؤه محركات البحث ومساعدو الذكاء الاصطناعي لفهم صفحتك.

الطريقة خطوة بخطوة

1. اسأل عن وظيفة الصورة

   انظر إلى الصورة في مكانها على الصفحة. هل هي للإعلام، أم للزينة، أم تعمل كرابط أو زر؟ الإجابة تحدد ما تكتبه.

2. اكتب جملة واضحة واحدة

   صِف ما يهم الصفحة. لصورة منتج: «معطف شتوي من الصوف الأزرق بقبعة، منظر أمامي». ولصورة الفريق في صفحة من نحن: «خبازونا الخمسة في المطبخ عند الخامسة صباحًا».

3. احذف الحشو

   احذف عبارات مثل «صورة لـ» وقوائم الكلمات المفتاحية. قارئات الشاشة تعلن مسبقًا أنها صورة.

4. تعامل مع الروابط والأزرار

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

5. اترك الصور الزخرفية فارغة

   الزخارف والفواصل والصور العامة التي لا تضيف شيئًا تأخذ alt=””. في ووردبريس، اترك حقل النص البديل فارغًا لهذه الصور فقط.

6. افحص صفحاتك

   شغّل فحصًا لتجد الصور التي تفتقد السمة alt أو التي يبدو نصها البديل كاسم ملف، مثل «IMG_2041.jpg».

أمثلة: سيئ، أفضل، الأفضل

• صورة منتج. سيئ: «معطف». أفضل: «معطف شتوي». الأفضل: «معطف شتوي من الصوف الأزرق بقبعة، منظر أمامي».
• رسم بياني. سيئ: «رسم بياني». الأفضل: «رسم بياني بالأعمدة: نمت المبيعات عبر الإنترنت من 40,000 دولار في يناير إلى 65,000 دولار في يونيو». إذا كان الرسم معقدًا، فلخّصه في النص البديل وضع البيانات كاملة في جدول على الصفحة.
• شعار يقود إلى الرئيسية. سيئ: «logo.png». الأفضل: «الصفحة الرئيسية لمخبز القيقب».
• زخرفة. الأفضل: alt="".

أخطاء شائعة

أكثر الأخطاء شيوعًا غياب السمة alt. من دونها تقرأ كثير من قارئات الشاشة اسم الملف، فيبدو مثل «دي إس سي صفر صفر أربعة واحد نقطة جي بي جي». والخطأ الثاني حشو الكلمات المفتاحية. النص البديل للناس أولًا، والوصف الواضح يفيد تحسين محركات البحث أيضًا.

النص داخل الصور فخ آخر. إذا كان الشعار الإعلاني يقول «خصم 50% على المعاطف الشتوية»، فيجب أن يقول النص البديل الكلمات نفسها. والأفضل أن تستخدم نصًا حقيقيًا فوق الصورة ليتمكن الجميع من قراءته وتكبيره.

النص البديل في الأدوات الشائعة

في ووردبريس، اختر الصورة واملأ حقل النص البديل في إعدادات المكوّن أو في مكتبة الوسائط. في Shopify، افتح الصورة في صفحة المنتج واختر إضافة نص بديل. وفي Wix وSquarespace، ابحث عن «ماذا تُظهر الصورة؟» أو «النص البديل» في إعدادات الصورة.

لا تعرف أي الصور تفتقد النص البديل؟ يسردها Accessible Nord جميعًا مع الصفحة والكود، لتصلحها في جلسة واحدة. اجمع هذا الدليل مع كيف تفحص تباين الألوان لتحقق مكسبين سريعين في عصر واحد.