علامة HTML img:سمة العنوان مقابلسمة بديلة؟

StackOverflow https://stackoverflow.com/questions/872389

  •  22-08-2019
  •  | 
  •  

سؤال

كنت أتصفح أمازون ولقد لاحظت ذلك عند البحث "1 تيرابايت"إذا قمت بتمرير مؤشر الماوس فوق صورة التصنيف بالنجوم، فلن ترى النتيجة إلا في حالة استخدام IE.إذا كنت تستخدم متصفحًا آخر، فلن تظهر النتيجة.

يظهر تصنيف 3.8 وتصنيف 4.2 على أنهما 4 نجوم.بالطبع 3.8 نجوم مقابل 4.2 نجوم (76% مقابل 84%) يمكن أن يحدث فرقًا!

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

لذلك أعتقد أنه إذا كان على أمازون إظهاره بغض النظر عن متصفح المستخدم، إذن title يجب أن تستخدم بالإضافة إلى alt.هل توافق؟

هل كانت مفيدة؟

المحلول

وكنت اذهب لكليهما. عنوان سيظهر تلميح لطيفة في جميع المتصفحات وسوف بديل تعطي وصفا عند التصفح في متصفح مع عدم وجود الصور.

وقال ذلك، أحب أن أرى بعض الاحصائيات عن عدد "متصفحي" هناك الذهاب الى "مخزن" لتصفح البضائع فعلا تحولت الصور خارج أو تستخدم متصفح لا يدعم الصور. أعتقد أن أيام حيث 90٪ من السكان يستخدم مودم 28K للاتصال InterWeb وlooooong انتهى.

نصائح أخرى

يتم استخدامها لأشياء مختلفة.ال alt يتم استخدام السمة بدلاً من من الصورة.إذا تعذر عرض الصورة، أو (على ما أعتقد) في قارئات الشاشة.

ال title تظهر السمة على امتداد مع الصورة، عادةً كتلميح أداة تحويم.

لا ينبغي استخدام أحدهما "بدلاً" من الآخر.ينبغي استخدام كل منهما على وجه صحيح, ، للقيام بالأشياء التي صمموا للقيام بها.

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

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

وذلك لأنها تخدم أغراضا مختلفة وكلاهما ينبغي أن تستخدم ليس فقط واحد على الآخر.

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

وو"عنوان" سمة غير صحيحة واحدة لإظهار تلميح الأدوات مع عنوان للصورة.

في رأيي يجب على نص بديل يصف دائما ما يكون مرئيا في الصورة، من أجل قضية لا يتم عرض الصورة.

<اقتباس فقرة>   

وبديل = النص [CS]       عن وكلاء المستخدم الذي لا يمكن عرض الصور والأشكال، أو تطبيقات، تحدد هذه السمة نص بديل. يتم تحديد لغة النص البديل بواسطة السمة انج.

w3.org

وأعتقد مطلوب بديل للامتثال XHTML صارمة.

وكما ذكر آخرون، العنوان هو لتلميحات (لطيفة لديهم)، بديل هو للمعاقين. لا بأس باستخدام كل من، ولكن البديل يجب أن يكون دائما هناك.

لا، أعتقد alt هو أفضل لأن الغرض من هذه السمة هو توفير النص "البديل" في حالة أن الصورة لا يمكن أن يكون عرض (سواء كان ذلك أن الصورة مفقود أو أن المتصفح نفسه غير قادر على عرض ذلك).

وقرر MVCFutures لASP.NET MVC إلى القيام بالأمرين معا. في الواقع إذا توفر 'بديل' فإنه سيتم تلقائيا خلق 'عنوان' بنفس القيمة بالنسبة لك.

وأنا لم يكن لديك شفرة المصدر لتسليم ولكن تحولت جوجل للبحث سريع عن حالة اختبار لذلك! 

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

يجب ألا تستخدم سمة العنوان لعنصر img.السبب وراء ذلك بسيط للغاية:

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

مصدر: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

أتش تي أم أل 5.1 يتضمن نصيحة عامة حول استخدام سمة العنوان:

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

مصدر: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

عندما يتعلق الأمر بإمكانية الوصول وبرامج قراءة الشاشة المختلفة:

  • الفكين 10-11:تم إيقافه بشكل افتراضي
  • عيون النافذة 7.02:تم تشغيله بشكل افتراضي
  • نفدا:غير مدعوم (لا توجد خيارات دعم)
  • التعليق الصوتي:غير مدعوم (لا توجد خيارات دعم)

وبالتالي، كما دينيس بودرو ضعها بشكل مناسب: من الواضح أنها ليست ممارسة موصى بها.

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

سمة البديل

ال alt يتم تعريف السمة في مجموعة من العلامات (وهي، img, area واختياريا ل input و applet) للسماح لك بتوفير نص مكافئ للكائن.

يجلب النص المكافئ الفوائد التالية لموقع الويب الخاص بك وزواره في المواقف الشائعة التالية:

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

سمة العنوان

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

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

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select>

مثال 2:حقول الإدخال لرقم الهاتف
تحتوي صفحة الويب على عناصر تحكم لإدخال رقم هاتف في الولايات المتحدة، مع ثلاثة حقول لرمز المنطقة والتبادل وآخر أربعة أرقام.

<fieldset>
    <legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset>

مثال 3:وظيفة البحث تحتوي صفحة الويب على حقل نصي حيث يمكن للمستخدم إدخال مصطلحات البحث وزر يسمى "بحث" لإجراء البحث.ال title يتم استخدام السمة لتحديد عنصر التحكم في النموذج ويتم وضع الزر مباشرة بعد حقل النص بحيث يكون من الواضح للمستخدم أن حقل النص هو المكان الذي يجب إدخال مصطلح البحث فيه.

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

مثال 4:جدول بيانات لعناصر تحكم النموذج
يحتاج جدول البيانات الخاص بعناصر تحكم النموذج إلى ربط كل عنصر تحكم برؤوس الأعمدة والصفوف لتلك الخلية.بدون عنوان (أو LABEL خارج الشاشة)، يصعب على المستخدمين غير المرئيين التوقف مؤقتًا والاستفسار عن قيم رأس الصف/العمود المقابلة باستخدام التكنولوجيا المساعدة الخاصة بهم أثناء التنقل عبر النموذج.

على سبيل المثال، يحتوي نموذج الاستطلاع على أربعة رؤوس أعمدة في الصف الأول:سؤال، أوافق، لم أقرر، لا أوافق.يحتوي كل صف تالي على سؤال وزر اختيار في كل خلية يتوافق مع اختيار الإجابة في الأعمدة الثلاثة.سمة العنوان لكل زر اختيار هي عبارة عن سلسلة من اختيار الإجابة (رأس العمود) ونص السؤال (رأس الصف) مع واصلة أو نقطتين كفاصل.

عنصر إمج

السمات المسموح بها المذكورة في MDN.

  • alt
  • crossorigin
  • decoding
  • height
  • importance (واجهة برمجة التطبيقات التجريبية)
  • intrinsicsize (واجهة برمجة التطبيقات التجريبية)
  • ismap
  • referrerpolicy (واجهة برمجة التطبيقات التجريبية)
  • src
  • srcset
  • width
  • usemap

كما ترون title السمة غير مسموح بها في الداخل img عنصر.سأستخدم alt السمة وإذا تطلب الأمر سأستخدم CSS (مثال:الطبقة الزائفة :hover) بدلاً من title يصف.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top