عندما يشوه بائعو المتصفح المعايير ويفعلون الأشياء بمفردهم ، فقد يتسببون في بعض المشكلات ، أو على الأقل يسببون الارتباك. أحد الأمثلة على ذلك هو الطريقة التي تتعامل بها بعض المتصفحات مع سمات ALT (تسمى عادةً علامات ALT بشكل غير صحيح) ، مثل متصفح IE مع عدد كبير من المستخدمين في Windows.
لا يتم استخدام نص ALT كنصائح للأدوات ، أو بالأحرى ، لا يوفر تعليمات إضافية للصور. على العكس من ذلك ، يجب استخدام سمة العنوان لتوفير معلومات شرح إضافية للعنصر. يتم عرض هذه المعلومات كنصيحة أداة في معظم متصفحات الصور ، على الرغم من أنه يمكن للمصنعين استخدام أي طريقة أخرى لتقديم نص سمة العنوان.
يبدو أن الكثير من الناس يشعرون بالارتباك من خلال هاتين السمة (أصبح السؤال أكثر شيوعًا في قائمة بريد معايير الويب مؤخرًا) ، لذلك كتبت أفكاري حول كيفية استخدامها.
ALT السمةبالنسبة لوكيل المستخدم (UA) الذي لا يمكنه عرض الصور أو النماذج أو التطبيقات ، يتم استخدام السمة ALT لتحديد نص بديل. يتم تحديد لغة النص البديل بواسطة سمة Lang. المصدر: كيفية تحديد نص بديل.
تتضمن سمة ALT (لاحظ أنها سمة بدلاً من تسمية) تعليمات بديلة ، مطلوبة للنقاط الساخنة للصورة والصورة. لا يمكن استخدامه إلا في IMG والمساحة والإدخال عناصر (بما في ذلك عناصر التطبيق). بالنسبة لعناصر الإدخال ، تهدف سمة ALT إلى استبدال صورة زر الإرسال. على سبيل المثال: <إدخال نوع = صورة src = image.gif alt = إرسال />.
استخدم السمة ALT لتوفير أوصاف نصية للمشاهدين الذين لا يستطيعون رؤية الصور في المستند الخاص بك. ويشمل ذلك المستخدمين الذين يستخدمون المتصفحات التي لا تدعم عرض الصور أو عرض الصور التي يتم إيقافها ، والمستخدمين الذين يعانون من ضعف البصر والمستخدمين الذين يستخدمون قراء الشاشة. يتم استخدام نص بديل لاستبدال الصور بدلاً من توفير تعليق إضافي.
فكر بعناية قبل كتابة نص بديل للتأكد من أن هذا النص يوفر معلومات توضيحية لأولئك الذين لا يرون الصورة ويكون منطقية في السياق. بالنسبة للصور الزخرفية ، يمكنك استخدام القيم الفارغة (alt = ، لا توجد مسافات في عروض الأسعار) بدلاً من استخدام بدائل غير ذات صلة مثل الرصاص الأزرق أو الفاصل. لا تتجاهل ذلك. إذا تجاهلت ذلك ، فسيقوم بعض قراء الشاشة بقراءة اسم ملف ملف الصورة مباشرةً ، وسيعرض متصفحات النص هذه ، مثل Lynx ، اسم ملف ملف الصورة ، والذي لن يكون مفيدًا إلى متصفحك.
من الأسهل تعيين النص البديل في صورة تحتوي على نص. يمكن استخدام النص الوارد في الصورة عمومًا كقيمة سمة ALT.
بالنسبة لطول النص البديل ، انظر ما يقوله WCAG 2.0 (دليل قابلية استخدام محتوى الموقع 2.0):
يجب أن تكون قيمة السمة ALT أقل من 100 حرف إنجليزي أو يجب على المستخدم التأكد من أن نص الاستبدال قصير قدر الإمكان.
أنا أفهمها بأقصى قدر ممكن وطالما كان ذلك ممكنًا.
حتى لو كنت تريد أن تظهر كنصيحة للأداة ، فلا تستخدم سمة ALT لعنصر النص ، وهو ليس استخدامه. على حد علمي ، فإن هذا يعمل فقط في Windows IE Browser و Netscape القديم 4.* (إصدار Windows). لن يعرضه أي متصفح Mac كأداة.
عندما يعرض المتصفح نص الاستبدال كنصيحة للأداة ، يتم أيضًا تشجيع سلوك استخدام السمة ALT بشكل غير صحيح. يبدأ بعض الأشخاص في كتابة نص بديل لا معنى له لأنهم يميلون إلى الاعتقاد بأنه معلومات وهم إضافية بدلاً من بديل لا يمكن عرض الصور. قد لا يرغب الآخرون في ظهور نصيحة الأداة ، ثم يتجاهلون تمامًا كتابة قيمة سمة ALT. تسببت هذه الممارسات الخاطئة في صعوبات للمشاهدين الذين لا يستطيعون رؤية الصورة.
للحصول على تعليمات إضافية ومعلومات غير ضرورية ، يرجى استخدام سمة العنوان.
سمة العنوانتوفر سمة العنوان معلومات موحية للعناصر التي تحدد هذه السمة.
المصدر: سمة العنوان.
يمكن استخدام سمة العنوان على جميع العلامات باستثناء القاعدة ، BaseFont ، Head ، HTML ، META ، Param ، البرنامج النصي والعنوان. لكنها ليست ضرورية. ربما لهذا السبب لا يفهم الكثير من الناس متى يستخدمونه.
استخدم سمة العنوان لتوفير معلومات إضافية غير ضرورية. يعرض معظم المتصفحات المرئية نص العنوان كنصيحة للأداة عندما يتم تعليق الماوس على عنصر معين ، ولكن الأمر متروك للمصنع لتحديد كيفية تقديم نص العنوان. ستعرض بعض المتصفحات نص العنوان في شريط الحالة. على سبيل المثال ، النسخة السابقة من متصفح Safari.
سمة العنوان لها غرض جيد ، وهو إضافة نص وصفي إلى الرابط ، خاصةً عندما لا يعبر الرابط نفسه عن الغرض من الرابط بوضوح شديد. يتيح ذلك للزائرين معرفة أين ستأخذها هذه الروابط ، ولن يقوموا بتحميل صفحة قد لا تكون ذات أهمية على الإطلاق. هناك تطبيق محتمل آخر يتمثل في توفير معلومات توضيحية إضافية للصور ، مثل التواريخ أو غيرها من المعلومات غير الضرورية.
يمكن أن تكون قيمة سمة العنوان أطول من قيمة سمة ALT. ومع ذلك ، تجدر الإشارة إلى أن بعض المتصفحات تقطع نصًا طويلًا جدًا (مثل تلميحات الأدوات أو غيرها). على سبيل المثال ، يمكن لمستعرض Mozilla الأساسي عرض فقط 60 حرفًا. يعتبر هذا خطأ موزيلا ، وهو شيء تحتاج إلى الانتباه إليه.
النظر قبل استخدامنصيحتي هي التأكد من أن النص البديل ضروري. في معظم التطبيقات ، يجب تركه فارغًا ، alt = (لاحظ أنه لا توجد مسافات في اثنين من الاقتباس). فكر في تلك الصور ، أو نوع المعلومات التي توفرها هذه المشاهدات ، أو النص الذي يجب أن تستخدمه لوصفها ، أو ما هي المعلومات التي يجب أن تقدمها للأشخاص الذين لا يرون الصور؟ كتابة النص البديل إلى صورة: الرئيس التنفيذي يقف خارج المبنى ، يرتدي بدلة رمادية وربطة عنق سوداء ، ينظر إلى السماء ، هل من المفيد حقًا للأشخاص الذين لا يستطيعون رؤية الصورة؟ إذا كنت تعتقد ذلك ، فيمكنك كتابته. في كثير من الحالات ، أعتقد أنه من الأفضل ترك النص البديل فارغًا.
بالنسبة لسمات العنوان ، من الصعب إعطاء تعليمات صارمة. معظم استخدامي على الروابط التي لا يمكن أن تكون غير ملائمة ، مثل نص الرابط نفسه في نفس الصفحة وصفحات الارتباطات المختلفة. في بعض الأحيان يتم توفير المزيد من نص التسمية التوضيحية لبعض الأزرار أو عناصر النماذج.
وصف أطولعندما تتطلب الصورة وصفًا أطول وتتجاوز الحد من سمة ALT ، فهناك بعض الخيارات.
يمكن استخدام خاصية LongDesc لتوفير روابط لصفحة منفصلة تحتوي على وصف النص للصورة. هذا يعني ربط المشاهد بصفحة أخرى ، والتي يمكن أن تتسبب في فهم الصعوبات. بالإضافة إلى ذلك ، فإن دعم المتصفح لسممة Longdesc غير متناسق أيضًا ، وهو ليس جيدًا جدًا.
يمكن أن تحتوي خاصية LongDesc على رابط لجزء آخر من المستند الحالي (مرساة نقطة) بدلاً من الارتباط بصفحة أخرى. في حواشي إمكانية الوصول ، يشرح آندي كلارك كيفية تطبيقه جيدًا.
يمكن استخدام روابط الوصف (روابط D) لتكملة LongDesc. رابط الوصف هو رابط منتظم يتصل بصفحة تحتوي على نص بديل. يتم وضع الرابط بجوار الصورة وهو على ما يرام في جميع المتصفحات. لدى الناس الكثير من الآراء المختلفة حول فعاليتها ، ولا أحب هذه الملاحظة في رأيي الشخصي. WCAG هي أيضًا ، وفي تقنيات HTML الخاصة بهم في مشروع WCAG 2.0 ، يتم رفض رابط الوصف.
إذا كان وصفًا طويلًا للصورة مفيدًا لأي عارض ، فيجب عليك التفكير ببساطة في عرضه في نفس المستند بدلاً من الارتباط بالصفحات الأخرى أو إخفاءه. بهذه الطريقة يمكن للجميع قراءتها. هذه طريقة بسيطة ومنخفضة التقنية.