كتابة نص بديل جيد للصور

01ما وظيفة النص البديل

النص البديل نص قصير يُحدَّد بالخاصية <code>;alt<;/code>; ويحل محل الصورة لمن لا يستطيع رؤيتها. تقرأه قارئات الشاشة بصوت عالٍ، ويظهر إن تعذّر تحميل الصورة.

هذا هو معيار WCAG 1.1.1 (المحتوى غير النصي، المستوى A). الفكرة الأساسية: اكتب ما تفعله الصورة في هذه الصفحة، لا قائمة كاملة بما تعرضه.

02القرار بحسب الغرض

• تعريفية

  انقل المعلومة نفسها بعبارة قصيرة.

• زخرفية

  استخدم قيمة فارغة <code>;alt=""</code>; لتتجاوزها قارئات الشاشة.

• وظيفية

  صف الإجراء لا الصورة. زر أيقونة العدسة يأخذ «بحث».

• نص داخل صورة

  كرّر النص نفسه في قيمة alt.

القيمة الفارغة ليست كغياب الخاصية. غياب alt قد يدفع بعض قارئات الشاشة إلى قراءة اسم الملف.

03نصائح للكتابة

• تجنّب «صورة لـ». قارئات الشاشة تعلن أصلًا أنه عنصر صورة.
• كن موجزًا. عبارة قصيرة أو جملة واحدة تكفي عادةً.
• لا تكرر التعليق المجاور. إذا قال النص المجاور ذلك فاستخدم alt فارغًا.
• اذكر ما يهم المحتوى فقط. صورة المنتج قد تحتاج اللون، أما صورة الفريق فقد لا تحتاج.

قارن: لشعار مرتبط في الترويسة، يفيد المستخدم <code>;alt="الرئيسية"</code>; أو اسم الموقع أكثر من «شعار أزرق بدائرة».

04المخططات والصور المعقدة

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

السياق هو الحاسم: صورة الجسر نفسها تحتاج نصًا بديلًا مختلفًا في مقال سفر وفي تقرير هندسي وفي لافتة زخرفية.

يعتمد النص الصحيح على وظيفة الصورة. توضح هذه الأمثلة النوع نفسه من الصور في أدوار مختلفة.

• صورة منتج

  ضعيف: «صورة حذاء». أفضل: «حذاء جري جلدي أحمر، منظر جانبي».

• زر بأيقونة

  ضعيف: «أيقونة عدسة». أفضل: «بحث».

• زخرفة فاصلة

  استخدم <code>;alt=""</code>; ليتم تجاوزها.

• اسأل: لو حُذفت الصورة، ماذا سيفقد القارئ؟
• إذا كان الجواب لا شيء فعامِلها كزخرفة.
• اكتب النص البديل بلغة محتوى الصفحة نفسها.

05المصادر

• W3C WAI. Images Tutorial. https://www.w3.org/WAI/tutorials/images/
• W3C. Understanding SC 1.1.1 Non-text Content. https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html