[سلسلة الفوائد] ( alt ) خاصية النص البديل
مدرج تحت قسم: مقالات
7
أكتوبر
2006
لماذا نستخدم خاصية النص البديل ؟
خاصية النص البديل ( alt ) تستخدم مع أحد الأوسمة التالية في لغة HTML.
( img , area , input , applet )
والنص البديل هو نص يظهر بدلاً من الرسومات ، أو أثناء تحميلها ، أو عندما يتعذر العثور عليها (تم حذفها مثلاً)، أو عندما يقوم زائر الموقع بتحريك مؤشر الماوس فوقها … مثلاً:
<img border="0" src="dhfaf.jpg" alt="ضفاف الديوان الشعري" width="90" height="185" /> <applet width="128" height="128" code="www.dhfaf.com" codebase="www.dhfaf.com">ضفاف الديوان الشعري</applet>
النص البديل سيكون مفيدا للموقع والزوار في الحالات التالية:
- في هذه الأيام، المتصفحات تطورت كثيرا وتعددت خصائصها، فبعضها تسمح للمستخدمين بإيقاف عملية تحميل الصور، أو تقوم فقط بعرض فئة معينة من الصور، وبعض المستخدمين لديهم متصفحات تستخدم برامج قراءة الشاشة لتحويل الرسومات على الشاشة إلى كلمات مقروءة. في مثل هذه الحالات إذا كنت تستخدم خاصية النص البديل ( alt ) مع الصور فإن أغلب المتصفحات ستقوم بعرض النص الذي كتبته بدلاً من الصور. بعض الزوار لا يمكنهم رؤية الصور أو يجدون صعوبة كبيرة في تمييز الصور، ( المصابين بعمى الألوان والمصابين بقصر النظر على سبيل المثال ) ، لذا يعتبر النص البديل ( alt ) مساعدة كبيرة لهذه الفئة من الزوار ، لأنهم يعتمدون عليه كثيرا لتكوين فكرة جيدة عن محتوى الصفحة.
- محركات البحث لا تختلف كثيرا عن الصنفين المذكورين أعلاه ، فإذا كنت ترغب بأن يتم فهرسة صفحات موقعك بالشكل الذي يليق بها ، استخدم خاصية النص البديل ( alt ) لتتأكد بأنهم لن ينسوا الأجزاء المهمة في صفحتك.
ماذا أكتب في النص البديل( alt )؟
القاعدة بشكل عام تقول: استخدم النص بحيث يؤدي نفس وظيفة الصورة في حال غيابها ( عدم تحميلها أو تم حذفها خطأ على سبيل المثال ).
وللتحديد أكثر يمكنك مراعاة التالي أيضاً
- إذا كانت الصورة المعروضة تحتوي على نص ( عبارة عن كلمة مزخرفة مثلاً أو أي نص مكتوب ) فالأفضل أن تقوم بكتابة هذه الكلمات في النص البديل.
- إذا كانت الصورة عبارة عن أيقونة في قائمة ( أو صورة في جدول مثلاً ) أو خط أفقي أيضاً ، فلا بأس أن يكون النص البديل لها فارغاً.
- إذا كانت الصورة تحتوي على الكثير من المعلومات المهمة ، حاول أن تختصرها في سطر قصير وتضعه في النص البديل، وإذا أردت إضافة المزيد يمكنك كتابته في ( longdesc ) كالمثال التالي.
<img border="0" src="dhfaf.jpg" longdesc="ضفاف .. أكبر موسوعة شعرية عربية،تحتوي على العديد من القصائد الشعرية النصية والصوتية" alt="الديوان الشعري" width="90" height="185" />
مقال ممتاز كالعادة أخي أبو جهاد وفقك الله
عندي بعض التعقيبات لو تسمح لي، نعم فالكثير من مصممي الويب يتلخبط بين خاصية alt وخاصية title وكل هذا بفضل المتصفح “الأكثر شعبية” الانترنت اكسبلورر وطريقته في عرض محتوى خاصية alt كمربع مساعد أو tooltip ولكن في الواقع كما ذكرت لك في أحد مقالاتك المميزة أن خاصية title يجب أن تستخدم بدلا من alt في الحالات التي تريد أن تستخدم فيها المربع المساعد.
وأما بالنسبة للنقطه التي ذكرتها “إذا كانت الصورة عبارة عن أيقونة في قائمة ( أو صورة في جدول .. مثلاً ) أو خط أفقي أيضاً ، فلا بأس أن يكون النص البديل لها فارغاً.”، فاأعتقد إذا ماكنت غلطان أن المحقق للمنظمة العالمية للويب يعطيك خطأ لما تكون في صور في موقعك بدون خاصية alt ولكن ما أتذكر بالضبط يالايت تصححلي لو كنت غلطان، لذا أعتقد معنى كلامك أنه لا بأس أن تكون الخاصية فارغة من النص ولكن يجب أن تكون موجودة.
جزاك الله خير أبو جهاد
ذكرت في مقدمة الموضوع أن خاصية النص البديل (alt) تعرض تلميح شاشة عند مرور مؤشر الفأرة عليها … ماذا عن خاصية (title) ؟
خاصية النص البديل (alt) لا تعرض تلميح شاشة في متصفح الفايرفوكس … الخاصية التلي تقوم بهذه المهمة هي خاصية (title) !
سبقني الأستاذ Bo3oof وقد تكلم عن الذي كنت أريد قوله بالتفصيل
جزاكم الله خير
عبدالعزيز
جزاكما الله خيرا ..
بالنسبة لأخي أبو عوف
” فاأعتقد إذا ماكنت غلطان أن المحقق للمنظمة العالمية للويب يعطيك خطأ لما تكون في صور في موقعك بدون خاصية alt ولكن ما أتذكر بالضبط يالايت تصححلي لو كنت غلطان، لذا أعتقد معنى كلامك أنه لا بأس أن تكون الخاصية فارغة من النص ولكن يجب أن تكون موجودة. ”
كلامك صحيح هو أني أقصد أنها يجب أن تكون موجودة ولكن لا بأس ان تكون فارغة .. بس يمكن أكون أخطأت في التعبيرب اعلاه وشكرا على التوضيح
أخي عبد العزيز
خاصية alt تكون للصور فقط
أما خاصية title فيمكن وضعها مع الروابط أيضا
وكما أفدت وأفاد الأخ أبو عوف أنها فقط تظهر للمستخدم متصفح اكسبلورو
لذا نقوم عادة باستخدام الخاصتين alt و title مع الصور لأنه الفايرفوكس يظهر title ولا يظهر alt
أتمنى اكون أصبت
بارك الله فيكم ابو جهاد بيضها و الشباب ما قصرو بالنقاش
ممتاز بارك الله فيك
الذي اعرفه أن alt توضع للصور حتى ما إذالم تبقى الصورة او اختفت او حذفت تظهر الكتابة تحتها، و أيضا إن محركات البحث الخاصة بالصور تعتمد على هذه التعريفة في وصف الصورة حين الزحف في الموقع، و حين عرضها عند البحث عن الصور، وايضا مطلوبة كثيرا في البانيير
اما title فهي تؤدي وضيفتها كما يدل عليها اسمها، وهي غير مقتصرة على الصور، تقريبا كل الوسوم الظاهرية، فقرات(p)
صناديق(div) روابط(a) صور(img)
والسلام عليكم
أخي زيزوار،
وعليكم السلام ورحمة الله،
كلمة alt هي اختصار لكلمة alternative أي البديل، ففي الحالات التي ذكرتها يجب على المتصفح أن يظهر النص الذي بداخل هذه الخاصية “بدل” كما ذكر أخونا أبو جهاد وليس تحت العناصر المربوطة بهذه الخاصية. أما بالنسبة لكلامك عن محركات البحث فكلامك صحيح، ولهذا ينصح باقتناء متصفحات نصية كlynx الذي يتيح لك تصفح موقعك كما تتصفحه محركات البحث ويساعدك أيضا في عملية الSEO
وتعريف منظمة الويب العالمية لهذه الخاصية: “The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.”
شكرا لكما أخ أبو عوف والأخ زيزوار فقد أثريتما الموضوع بنقاشكما الجميل وبإضافاتكم الجميلة
تحياتي للجميع
صحيح يا بوعوف، انا ظننت انها تكون خلف الصورة، وهي في الحقيقة البديل للصورة، تنفع كثيرا في المتصفحات النصية او الكفية، لتعرف الأزرار و الصور
أبو جهاد انت من فتح هذا الموضوع للنقاش
بارك الله فيكم جميعا