HTML img टैग: शीर्षक विशेषता बनाम Alt विशेषता?

Question

मैं अमेज़ॅन ब्राउज़ कर रहा था और मैंने देखा कि " 1TB " सर्च करते समय यदि आप सितारों की रेटिंग छवि पर माउस कर्सर को घुमाते हैं, तो आप केवल IE का उपयोग करते हुए स्कोर देखते हैं। यदि आप दूसरे ब्राउज़र का उपयोग कर रहे हैं तो स्कोर नहीं दिखेगा।

3.8 की रेटिंग और 4.2 की रेटिंग दोनों 4 सितारों के रूप में दिखाई देते हैं। बेशक एक 3.8 स्टार बनाम 4.2 स्टार (76% बनाम 84% स्कोर) एक अंतर बना सकते हैं!

इसका कारण यह है कि altपाठ प्रदर्शित करने का मानक तरीका केवल तब होता है जब उपयोगकर्ता ग्राफिक्स बंद कर देता है या जब ब्राउज़र "रीड आउट" होता है (उदाहरण के लिए उन उपयोगकर्ताओं के लिए ब्राउज़र जो नेत्रहीन हैं)। IE, होवर पर इसे दिखाता है।

इसलिए मुझे लगता है कि अगर अमेज़ॅन को उपयोगकर्ता के ब्राउज़र की परवाह किए बिना दिखाना है, तो titleइसके अतिरिक्त उपयोग किया जाना चाहिए alt। क्या आप सहमत हैं?

Answer 1

मैं दोनों के लिए जाऊंगा। शीर्षक सभी ब्राउज़रों में एक अच्छा टूलटिप दिखाएगा और किसी भी चित्र के साथ ब्राउज़र में ब्राउज़ करने पर ऑल्ट एक विवरण देगा।

उस ने कहा, मैं कुछ आँकड़े देखना पसंद करूंगा कि माल को ब्राउज़ करने के लिए "स्टोर" में जाने वाले कितने "सर्फर" वास्तव में छवियां बंद कर देते हैं या एक ब्राउज़र का उपयोग कर रहे हैं जो छवियों का समर्थन नहीं करता है। मुझे लगता है कि उन दिनों में जहां 90% आबादी इंटरव्यू से जुड़ने के लिए 28k मॉडेम का उपयोग कर रही है, वह लूओओंग है।

Comments

ऑल्ट का उपयोग करना बस कुछ दिखाने के बारे में नहीं है जब छवियों को बैंडविड्थ कारणों के लिए अधिभारित किया जाता है। उदाहरण के लिए नेत्रहीनों के लिए डिज़ाइन किए गए कुछ ब्राउज़र पूरी तरह से बड़े पैमाने पर उपयोग करेंगे।

— एंथनीवजोन

... लेकिन: कभी-कभी चित्र लोड नहीं होते हैं; और अंधे के लिए गैर-दृश्य ब्राउज़र हैं; सफारी में भाषण विशेषताएं पृष्ठ को पढ़ती हैं, जिसमें छवियों से पूरी विशेषताएं शामिल हैं; खोज इंजिन अनुकूलन; आदि बहुत से अच्छे कारण 100% छवि प्रदर्शन को नहीं मानते हैं।

— jwl

@ एंथोनी, क्रूर - सहमत। वहाँ विभिन्न हम्म "एज केस" हैं जहाँ ऊँचाई प्रदान करना बहुत मददगार है (और मैं इसे छोड़ने का सुझाव नहीं दे रहा हूं) - हालाँकि अगर उपयोगकर्ता को टूलटिप के रूप में प्रदान करने के लिए "सार्थक जानकारी" है, तो सबसे निश्चित रूप से होना चाहिए एक शीर्षक विशेषता हो - क्योंकि यह वही है जिसके लिए यह है। जब मैं ऊपर "एज केस" कहता हूं, तो मेरा मानना ​​है कि फ़ायरफ़ॉक्स, क्रोम, IE, ओपेरा, सफारी,

— कोनेकर

ALT टैग SEO फ्रेंडली होते हैं। शीर्षक के रूप में ही रखा जाना चाहिए।

— हेल्पनीडर

यदि आपके पास विकलांगता थी और स्क्रीन रीडर की आवश्यकता थी, तो मुझे पूरा यकीन है कि आप "एज केस" के रूप में संदर्भित नहीं होंगे।

— मैट फ्लेचर

Answer 2

उनका उपयोग विभिन्न चीजों के लिए किया जाता है। altविशेषता प्रयोग किया जाता है के बजाय छवि के। यदि छवि को दिखाया नहीं जा सकता है, और स्क्रीन पाठकों में।

titleविशेषता दिखाया गया है साथ आम तौर पर एक मंडराना टूलटिप के रूप में, छवि के साथ।

एक का उपयोग दूसरे के "बजाय" नहीं किया जाना चाहिए। प्रत्येक को ठीक से उपयोग किया जाना चाहिए, उन चीजों को करने के लिए जिन्हें वे करने के लिए डिज़ाइन किए गए थे।

Comments

और ध्यान दें कि HTML5 ऑल्ट विशेषता अनिवार्य है। कुछ देशों में यदि आप किसी राज्य संस्थान के लिए एक परियोजना करते हैं तो यह भी ILLEGAL है कि इसका उपयोग न करें। जबकि टाइटल जैलफ के रूप में एक "डिजाइन" चीज है।

— jave.web

और मुझे विश्वास नहीं है - मुझे पता है कि स्क्रीन रीडर छवि के बजाय पूरी तरह से पढ़ते हैं।

— jave.web

@ jave.web एचटीएमएल 5 चश्मा सुझाव देता है और Alt विशेषता w3.org/html/wg/draft/html/master/… के बारे में बहुत सी चीजों को इंगित करता है, हालांकि यह "अनिवार्य" कहने के लिए दूर तक नहीं जाता है। विशेष रूप से जब एक छवि विशुद्ध रूप से सजावट होती है तो वास्तव में अपेक्षित नहीं है।

— स्क्यूलिफ

HTML5 में Alt विशेषता का उपयोग नहीं करने का मतलब है कि आपका HTML5 मान्य नहीं है। यदि छवि विशुद्ध रूप से सजावट है - इसे एक <img>टैग के रूप में लागू नहीं किया जाना चाहिए - आपको सीएसएस-स्टाइल डिव का उपयोग करना चाहिए;)

— jave.web

@ jave.web आप निर्दिष्ट की तुलना में कल्पना में अधिक पढ़ रहे हैं। वे दृढ़ता से सुझाव देते हैं कि आप एक पूरी विशेषता को शामिल करते हैं, लेकिन अपवाद हैं w3.org/html/wg/drafts/html/master/… और कोई भी कठोर प्रवर्तन नहीं है जिसके लिए आपके पास एक पूरी विशेषता होना आवश्यक है। कोई भी जहां कल्पना में यह इंगित करता है कि यह "अनिवार्य" या "आवश्यक" है। - वास्तव में वे कई मामलों को सूचीबद्ध करते हैं जहां या तो कोई विशिष्ट विशेषता निर्दिष्ट नहीं है, या यह जानबूझकर खाली छोड़ दिया गया है।

— स्कललिफ

Answer 3

ऊंचाई और शीर्षक अलग-अलग चीजों के लिए हैं, जैसा कि पहले ही उल्लेख किया गया है। जबकि शीर्षक विशेषता एक टूलटिप प्रदान करेगा, अल्ट भी एक महत्वपूर्ण विशेषता है, क्योंकि यह पाठ को प्रदर्शित करने के लिए निर्दिष्ट करता है यदि छवि प्रदर्शित नहीं की जा सकती है। (और कुछ ब्राउज़रों में, जैसे फ़ायरफ़ॉक्स, आपको छवि लोड होने के दौरान भी यह पाठ दिखाई देगा )

एक और बात यह है कि मुझे लगता है कि किया जाना चाहिए कि है alt विशेषता है की आवश्यकता वाले XHTML दस्तावेज़ के रूप में मान्य करने के लिए है, जबकि शीर्षक विशेषता सिर्फ एक है "अतिरिक्त विकल्प," क्योंकि यह थे।

Answer 4

ऐसा इसलिए है क्योंकि वे अलग-अलग उद्देश्यों की पूर्ति करते हैं और उन दोनों का उपयोग एक दूसरे के ऊपर नहीं करना चाहिए।

"ऑल्ट" वह है जो आप लोग पहले ही कह चुके हैं, इसलिए आप देख सकते हैं कि यह क्या छवि है, अगर छवि को प्रदर्शित नहीं किया जा सकता है (जो भी कारण हो), यह नेत्रहीन लोगों को यह समझने की अनुमति देता है कि छवि के बारे में क्या है।

"शीर्षक" विशेषता छवि के लिए शीर्षक के साथ टूलटिप दिखाने के लिए सही है।

Answer 5

मेरी राय में ऑल्ट टेक्स्ट को हमेशा वर्णन करना चाहिए कि तस्वीर में क्या दिखाई दे रहा है, इस मामले के लिए कि छवि प्रदर्शित नहीं हुई है।

alt = पाठ [CS] उन उपयोगकर्ता एजेंटों के लिए जो चित्र, फ़ॉर्म या एप्लेट प्रदर्शित नहीं कर सकते, यह विशेषता वैकल्पिक पाठ को निर्दिष्ट करती है। वैकल्पिक पाठ की भाषा लंग विशेषता द्वारा निर्दिष्ट की जाती है।

w3.org

Answer 6

मेरा मानना ​​है कि सख्त एक्सएचटीएमएल अनुपालन के लिए ऑल्ट की आवश्यकता है।

जैसा कि दूसरों ने उल्लेख किया है, शीर्षक टूलटिप्स (अच्छा है) के लिए है, अल्ट एक्सेसिबिलिटी के लिए है। दोनों का उपयोग करने में कुछ भी गलत नहीं है, लेकिन ऊंचाई हमेशा होनी चाहिए।

Answer 7

ALT विशेषता नेत्रहीन उपयोगकर्ता के लिए है जो स्क्रीन रीडर का उपयोग करेगा। यदि ALT किसी भी छवि टैग से गायब है, तो छवि के लिए संपूर्ण url पढ़ा जाएगा। यदि चित्र साइट के डिज़ाइन के भाग के लिए हैं, तो उनके पास अभी भी ALT होना चाहिए, लेकिन उन्हें खाली छोड़ा जा सकता है, इसलिए url को साइट के प्रत्येक भाग के लिए पढ़ना नहीं है।

Answer 8

एएलटी विशेषता

altविशेषता टैग (अर्थात्, का एक सेट में परिभाषित किया गया है img, areaऔर वैकल्पिक रूप से के लिए inputऔर applet) आप वस्तु के लिए एक पाठ बराबर प्रदान करने के लिए अनुमति देने के लिए।

एक पाठ समतुल्य आपकी वेब साइट और उसके आगंतुकों के लिए निम्नलिखित सामान्य स्थितियों में निम्नलिखित लाभ लाता है:

• आजकल, वेब ब्राउजर बहुत अलग-अलग क्षमताओं के साथ विभिन्न प्रकार के प्लेटफार्मों में उपलब्ध हैं; कुछ सभी पर छवियों को प्रदर्शित नहीं कर सकते हैं या केवल छवियों के प्रकार का एक प्रतिबंधित सेट; कुछ छवियों को लोड नहीं करने के लिए कॉन्फ़िगर किया जा सकता है। यदि आपके कोड की छवियों में सर्वोच्च विशेषता सेट है, तो इनमें से अधिकांश ब्राउज़र छवियों के बजाय आपके द्वारा दिए गए विवरण को प्रदर्शित करेंगे
• आपके कुछ आगंतुक छवियों को नहीं देख सकते हैं, वे अंधे, रंग-अंधा, कम-दृष्टि वाले हैं; पूरी विशेषता उन लोगों के लिए बहुत मददगार है, जो इस बात पर भरोसा कर सकते हैं कि आपके पेज पर क्या है, इसका एक अच्छा विचार है
• खोज इंजन बॉट दो उपरोक्त श्रेणियों से संबंधित हैं: यदि आप चाहते हैं कि आपकी वेबसाइट अनुक्रमित होने के साथ-साथ इसके योग्य भी हो, तो यह सुनिश्चित करने के लिए कि वे आपके पृष्ठों के महत्वपूर्ण खंडों को याद नहीं करेंगे, पूरी विशेषता का उपयोग करें।

शीर्षक की विशेषता

इस तकनीक का उद्देश्य उपयोगकर्ताओं के लिए संदर्भ संवेदनशील मदद प्रदान करना है क्योंकि वे एक 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) के बिना, गैर-दृश्य उपयोगकर्ताओं के लिए प्रपत्र के माध्यम से टैब करते समय उनकी सहायक तकनीक का उपयोग करके संबंधित पंक्ति / स्तंभ शीर्षलेख मानों को रोकना और पूछताछ करना मुश्किल है।

उदाहरण के लिए, एक सर्वेक्षण फॉर्म में पहली पंक्ति में चार कॉलम हेडर होते हैं: प्रश्न, सहमति, अनिर्णीत, असहमत। प्रत्येक स्तंभ में पसंद का उत्तर देने के लिए प्रत्येक सेल में प्रत्येक पंक्ति में एक प्रश्न और एक रेडियो बटन होता है। प्रत्येक रेडियो बटन के लिए शीर्षक विशेषता उत्तर विकल्प (कॉलम हैडर) और एक विभाजक के रूप में हाइफ़न या कोलोन के साथ प्रश्न (पंक्ति हेडर) का पाठ है।

Img तत्व

की अनुमति दी गई कुछ विशेषताओं का उल्लेख किया MDN ।

• alt
• crossorigin
• decoding
• height
• importance (प्रयोगात्मक एपी)
• intrinsicsize (प्रयोगात्मक एपी)
• ismap
• referrerpolicy (प्रयोगात्मक एपी)
• src
• srcset
• width
• usemap

जैसा कि आप देख सकते हैं कि तत्व के titleअंदर विशेषता की अनुमति नहीं है img। मैं altविशेषता का उपयोग करूंगा और यदि आवश्यकता हो तो मैं विशेषता के :hoverबजाय CSS (उदाहरण: छद्म वर्ग ) का उपयोग करूंगा title।

Answer 9

नहीं, मुझे लगता altहै कि बेहतर है क्योंकि उस विशेषता का उद्देश्य उस घटना में "वैकल्पिक" पाठ प्रदान करना है जो छवि को नहीं देख सकता है (चाहे यह हो कि छवि गायब है या ब्राउज़र स्वयं ही इसे प्रदर्शित करने में असमर्थ है)।

Comments

इसलिए मुझे लगता है कि आपको परवाह नहीं है कि यह 3.8 स्टार या 4.2 स्टार है या नहीं?

— एकाधिकार

Answer 10

ASP.NET MVC के लिए MVCFutures ने दोनों करने का फैसला किया। वास्तव में यदि आप 'ऑल्ट' प्रदान करते हैं तो यह आपके लिए समान मूल्य वाला स्वचालित रूप से एक 'शीर्षक' बनाएगा।

मेरे पास हाथ का स्रोत कोड नहीं है, लेकिन एक त्वरित Google खोज ने इसके लिए एक परीक्षण मामला बदल दिया है!

    [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);
    }

Comments

तो यह IE7 और नीचे की तरह काम करता है, जिसे बुरा व्यवहार माना जाता है। robertnyman.com/2009/05/07/…

— रॉबिन

Answer 11

आपको img तत्व के लिए शीर्षक विशेषता का उपयोग नहीं करना चाहिए। इसके पीछे तर्क काफी सरल है:

वर्तमान में कैप्शन जानकारी महत्वपूर्ण जानकारी है जो डिफ़ॉल्ट रूप से सभी उपयोगकर्ताओं के लिए उपलब्ध होनी चाहिए। यदि ऐसा है तो इस सामग्री को छवि के बगल में पाठ के रूप में प्रस्तुत करें

स्रोत: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 शीर्षक विशेषता के उपयोग पर सामान्य सलाह शामिल है:

शीर्षक विशेषता पर निर्भर वर्तमान में हतोत्साहित किया जाता है क्योंकि कई उपयोगकर्ता एजेंट इस विनिर्देश द्वारा आवश्यक के रूप में एक सुलभ तरीके से विशेषता को उजागर नहीं करते हैं (उदाहरण के लिए एक माउस की तरह एक इंगित डिवाइस की आवश्यकता होती है, जो टूलटिप को प्रेरित करने का कारण बनता है, जो कीबोर्ड-केवल उपयोगकर्ताओं को छोड़कर और टच-ओनली यूजर्स, जैसे कि आधुनिक फोन या टैबलेट)।

स्रोत: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

जब यह सुलभता और विभिन्न स्क्रीन पाठकों की बात आती है:

• जबड़े 10-11: डिफ़ॉल्ट रूप से बंद हो गए
• विंडो-आइज़ 7.02: डिफ़ॉल्ट रूप से चालू
• एनव्हिडिए: समर्थित नहीं (कोई समर्थन विकल्प नहीं)
• VoiceOver: समर्थित नहीं (कोई समर्थन विकल्प नहीं)

इसलिए, जैसा कि डेनिस बॉउड्रेयू ने पर्याप्त रूप से रखा: स्पष्ट रूप से अनुशंसित अभ्यास नहीं ।