سمة البديل وسمة العنوان

عندما يخالف بائعو المتصفحات المعايير ويفعلون أشياء لا تتبع القواعد، فقد يتسببون في حدوث مشكلات، أو على الأقل ارتباك. أحد الأمثلة على ذلك هو الطريقة التي تتعامل بها بعض المتصفحات مع السمات البديلة (غالبًا ما تسمى بشكل غير صحيح العلامات البديلة)، مثل Internet Explorer لنظام التشغيل Windows، والذي يضم عددًا كبيرًا من المستخدمين.

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

يبدو أن الكثير من الناس في حيرة من أمرهم بشأن هاتين الخاصيتين (ظهر هذا السؤال في القائمة البريدية لمجموعة معايير الويب مؤخرًا)، لذلك قمت بتدوين أفكاري حول كيفية استخدامهما.

سمة بديلة

بالنسبة لوكلاء المستخدم (UA) الذين لا يمكنهم عرض الصور أو النماذج أو التطبيقات الصغيرة، يتم استخدام سمة alt لتحديد نص بديل. يتم تحديد لغة النص البديل بواسطة سمة lang.
المصدر: كيفية تحديد النص البديل.

تحتوي السمة Alt (لاحظ "السمة" بدلاً من "التسمية") على تعليمات الاستبدال المطلوبة للصور ونقاط اتصال الصور. يمكن استخدامه فقط في عناصر الصورة، والمنطقة، والإدخال (بما في ذلك عناصر التطبيق الصغير). بالنسبة لعناصر الإدخال، تهدف السمة alt إلى استبدال صورة زر الإرسال. على سبيل المثال: <input type="image" src="image.gif" alt="Submit" />.

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

فكر جيدًا قبل كتابة النص البديل للتأكد من أنه يوفر بالفعل معلومات للأشخاص الذين لا يمكنهم رؤية الصورة وأنه منطقي في السياق. بالنسبة إلى الصور المزخرفة، استخدم قيمة فارغة (alt=""، بدون مسافات بين علامتي الاقتباس) بدلاً من النص البديل غير ذي الصلة مثل "رمز نقطي أزرق" أو "spacer.gif". لا تتجاهله، لأنه إذا تجاهلته، فإن بعض برامج قراءة الشاشة ستقرأ اسم ملف الصورة مباشرة، وستعرض متصفحات النصوص مثل Lynx اسم ملف الصورة، ولن يكون ذلك ذا فائدة كبيرة للمشاهدين.

من الأسهل تعيين نص بديل للصور التي تحتوي على نص، بشكل عام، يمكن استخدام النص الموجود في الصورة كقيمة سمة بديلة.

أما بالنسبة لطول النص البديل، فانظر إلى ما تقوله WCAG 2.0 (إرشادات توفر محتوى موقع الويب 2.0):

يجب أن يكون طول قيمة السمة Alt أقل من 100 حرف إنجليزي أو يجب على المستخدم التأكد من أن النص البديل قصير قدر الإمكان.

أفهمها على أنها "قصيرة قدر الإمكان وطويلة بقدر الضرورة".

حتى إذا كنت تريد ظهوره كتلميح أداة، فلا تستخدم سمة alt في عناصر النص، وهذا ليس الاستخدام المقصود. بقدر ما أعرف، هذا يعمل فقط في متصفح Windows IE وNetscape 4.* القديم (إصدار Windows). لا يوجد متصفح Mac يعرض هذا كنصيحة أداة.

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

للحصول على معلومات وصفية إضافية ومعلومات غير أساسية، يرجى استخدام سمة العنوان.

سمة العنوان

توفر سمة العنوان معلومات استشارية للعنصر الذي تم تعيينها عليه.

المصدر: سمة العنوان.

يمكن استخدام سمة العنوان في جميع العلامات باستثناء Base وbasefont وhead وhtml وmeta وparam وscript وtitle. ولكن هذا ليس ضروريا. ربما لهذا السبب لا يفهم الكثير من الناس متى يستخدمونه.

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

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

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

فكر قبل الاستخدام

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

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

وصف أطول

عندما تتطلب الصورة وصفًا أطول من حدود السمات البديلة، فهناك بعض الخيارات.

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

يمكن أن تحتوي السمة longdesc على رابط لجزء آخر من المستند الحالي (رابط) بدلاً من الارتباط بصفحة أخرى. في الحواشي السفلية لإمكانية الوصول، يقدم آندي كلارك شرحًا جيدًا لكيفية تطبيقه.

يمكن استخدام روابط الوصف (روابط D) لتكملة longdesc. رابط الوصف هو رابط عادي لصفحة تحتوي على نص بديل. الرابط يوضع بجانب الصورة وهو متاح في جميع المتصفحات. هناك العديد من الآراء المختلفة حول فعاليتها، وأنا شخصيا لا أحب هذه الملاحظة. WCAG أيضًا، في مسودة العمل الخاصة بتقنيات HTML لـ WCAG 2.0، تم "إهمال" روابط الوصف.

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