البديل والعنوان المربكة

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

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

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

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

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

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

فكر بعناية قبل كتابة نص بديل للتأكد من أن هذه الكلمات توفر معلومات توضيحية لأولئك الذين لا يرون الصورة ويكون منطقية في السياق. بالنسبة للصور الزخرفية ، استخدم القيم الفارغة (alt = "" مع عدم وجود مسافات في منتصف عروض الأسعار) بدلاً من استخدام بدائل غير ذات صلة مثل "Blue Bullet" أو "Spacer.gif". لا تتجاهل ذلك. إذا تجاهلت ذلك ، فسيقوم بعض قراء الشاشة بقراءة اسم ملف ملف الصورة مباشرةً ، وسيعرض متصفحات النص هذه ، مثل 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 ، فإن رابط الوصف "رفض".

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