عنصر alt في HTML: دليل شامل لاستخدام النص البديل للصور
مقدمة
عنصر alt (الاختصار لكلمة "alternative") هو سمة أساسية في لغة HTML تُستخدم لتوفير وصف نصي بديل للصور. هذا العنصر يلعب دورًا حاسمًا في:
- تحسين إمكانية الوصول (Accessibility)
- تحسين محركات البحث (SEO)
- تجربة المستخدم عند تعطل تحميل الصور
الصيغة الأساسية
<img src="صورة.jpg" alt="وصف نصي للصورة">
أهمية استخدام النص البديل
لإمكانية الوصول
- يساعد المستخدمين ضعاف البصر الذين يعتمدون على قارئات الشاشة
- يوفر سياقًا للمحتوى عند عدم القدرة على رؤية الصور
لتحسين SEO
- تتعرف محركات البحث على محتوى الصور من خلال النص البديل
- يساعد في فهرسة الصور بشكل صحيح في نتائج البحث
عند فشل تحميل الصور
يظهر النص البديل مكان الصورة عندما:
- لا يتم تحميل الصورة
- المستخدم يعطل تحميل الصور
- هناك خطأ في مسار الصورة
أفضل الممارسات لكتابة نص alt فعّال
- كن وصفيًا ولكن مختصرًا (عادةً 125 حرفًا أو أقل)
- تجنب "صورة لـ..." أو "صورة تظهر..." (تضيف قارئات الشاشة هذه المعلومات تلقائيًا)
- للصور التزيينية (التي لا تحمل معلومات)، استخدم
alt=""فارغًا - للصور النصية (مثل الشعارات)، أعد كتابة النص في السمة
alt - للصور المعقدة (مثل الرسوم البيانية)، قدم وصفًا في المحتوى المحيط أيضًا
أمثلة عملية
مثال جيد:
<img src="cat.jpg" alt="قطة سوداء تلعب بكرة صوف حمراء">
مثال غير جيد:
<img src="cat.jpg" alt="صورة قطة">
للصور التزيينية:
<img src="decorative-border.png" alt="">
للصور الوظيفية (أزرار):
<img src="search-icon.png" alt="بحث">
الأخطاء الشائعة
إهمال السمة تمامًا:
<img src="product.jpg"> <!-- خطأ -->
تكرار المعلومات الموجودة في النص المحيط:
<p>تفاحة حمراء</p>
<img src="apple.jpg" alt="تفاحة حمراء"> <!-- غير ضروري -->
استخدام كلمات مفتاحية بشكل مفرط (Keyword Stuffing):
<img src="car.jpg" alt="سيارة، بيع سيارات، سيارات جديدة، سيارات مستعملة">
النص البديل في سياقات مختلفة
في عناصر <input> من نوع صورة:
<input type="image" src="submit-button.png" alt="إرسال النموذج">
في SVG:
<svg role="img" aria-label="وصف الصورة">
<!-- محتوى SVG -->
</svg>
في CSS:
عند استخدام الصور كخلفية عبر CSS، يجب توفير النص البديل في HTML.
ملاحظة مهمة:
يعد استخدام سمة alt بشكل صحيح من الأساسيات المهمة في تطوير الويب. فهو ليس مجرد متطلب للتوافق مع معايير الويب (WCAG)، بل هو أيضًا ممارسة جيدة لتحسين تجربة المستخدم وتحسين محركات البحث.
