इमेज के लिए वैकल्पिक टेक्स्ट देने के लिए, ऑल्ट एट्रिब्यूट का इस्तेमाल करना
इमेज, ज़्यादातर वेब पेजों का एक अहम हिस्सा होती हैं. साथ ही, ये कम दृष्टि वाले उपयोगकर्ताओं के लिए खास तौर पर मददगार होती हैं. हमें यह देखना होगा कि किसी पेज पर इमेज की क्या भूमिका है, ताकि यह तय किया जा सके कि उसके लिए टेक्स्ट का विकल्प किस तरह का होना चाहिए. इस इमेज पर एक नज़र डालें.
<article>
<h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
<img src="imgs/160204193356-01-cat-500>.<jpg">;
/article
एक अध्ययन से पता चला है कि 10 में से 9 बिल्लियां, अपने मालिकों के सोते समय चुपचाप उनकी निगरानी करती हैं
इस पेज पर एक बिल्ली की इमेज है. इसमें बिल्ली के बारे में एक लेख दिखाया गया है. इसमें बिल्ली के बारे में यह बताया गया है कि वह अक्सर किसी के बारे में राय देती है. स्क्रीन रीडर, इस इमेज का नाम पढ़कर सुनाएगा. इमेज का नाम "/160204193356-01-cat-500.jpg" होगा. यह जानकारी सही है, लेकिन काम की नहीं है.
इस इमेज के लिए, काम का टेक्स्ट विकल्प देने के लिए alt एट्रिब्यूट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, "एक बिल्ली, खतरनाक तरीके से आसमान की ओर देख रही है."
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly >off into space"
इसके बाद, स्क्रीन रीडर इमेज के बारे में कम शब्दों में जानकारी पढ़कर सुनाता है. यह जानकारी, VoiceOver के काले बार में दिखती है. इसके बाद, उपयोगकर्ता यह चुन सकता है कि उसे लेख पढ़ना है या नहीं.
alt के बारे में कुछ टिप्पणियां:
altकी मदद से, एक आसान स्ट्रिंग तय की जा सकती है. इसका इस्तेमाल तब किया जाता है, जब इमेज उपलब्ध न हो. जैसे, जब इमेज लोड न हो, वेब क्रॉल करने वाले बॉट ने उसे ऐक्सेस किया हो या स्क्रीन रीडर ने उसे देखा हो.alt,titleया किसी भी तरह के कैप्शन से अलग होता है. इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब इमेज उपलब्ध न हो.
काम का ऑल्ट टेक्स्ट लिखना कला है. किसी स्ट्रिंग को टेक्स्ट के विकल्प के तौर पर इस्तेमाल करने के लिए, उसमें उसी कॉन्टेक्स्ट में वही कॉन्सेप्ट होना चाहिए जो इमेज में है.
ऊपर दिखाई गई इमेज की तरह, किसी पेज के मास्टहेड में लिंक की गई लोगो इमेज का इस्तेमाल करें. हम इमेज के बारे में "फ़नियन का लोगो" के तौर पर सटीक जानकारी दे सकते हैं.
<img class="logo" src="logo.jpg" a>lt="The Funion logo"
हो सकता है कि आपको "होम" या "मुख्य पेज" के बजाय, कोई आसान टेक्स्ट विकल्प देना अच्छा लगे. हालांकि, इससे कम दृष्टि वाले और सामान्य दृष्टि वाले, दोनों उपयोगकर्ताओं को परेशानी होती है.
हालांकि, स्क्रीन रीडर का इस्तेमाल करने वाले किसी व्यक्ति को पेज पर मास्टहेड लोगो ढूंढना हो, तो "होम" के तौर पर एल्ट वैल्यू देने से, उसे और भी उलझन हो सकती है. स्क्रीन रीडर का इस्तेमाल करने वाले उपयोगकर्ता की तरह ही, सामान्य उपयोगकर्ता को भी यह पता लगाने में समस्या होती है कि साइट के लोगो पर क्लिक करने से क्या होता है.
दूसरी ओर, किसी इमेज के बारे में जानकारी देना हमेशा ज़रूरी नहीं होता. उदाहरण के लिए, 'खोजें' टेक्स्ट वाले खोज बटन में मैग्नीफ़ाइंग ग्लास की इमेज. अगर टेक्स्ट मौजूद नहीं था, तो आपको उस इमेज के लिए "search" की वैकल्पिक वैल्यू ज़रूर देनी होगी. हालांकि, हमारे पास दिखने वाला टेक्स्ट है, इसलिए स्क्रीन रीडर "खोजें" शब्द को चुनकर ज़ोर से पढ़ेगा. इसलिए, इमेज पर एक जैसी alt वैल्यू मौजूद होने की ज़रूरत नहीं है.
हालांकि, हमें पता है कि अगर हम alt टेक्स्ट को हटा दें, तो हमें इमेज फ़ाइल का नाम सुनाई देगा. यह जानकारी बेकार है और भ्रम पैदा कर सकती है. इस मामले में, सिर्फ़ खाली alt एट्रिब्यूट का इस्तेमाल किया जा सकता है. ऐसा करने पर, स्क्रीन रीडर इमेज को पूरी तरह से स्किप कर देगा.
<img src="magnifying-glass.jpg&qu>ot; alt=""
खास जानकारी के लिए, सभी इमेज में alt एट्रिब्यूट होना चाहिए. हालांकि, यह ज़रूरी नहीं है कि उन सभी में टेक्स्ट हो. अहम इमेज के लिए, जानकारी देने वाला वैकल्पिक लेख होना चाहिए. इससे यह पता चलता है कि इमेज में क्या है. वहीं, सजावटी इमेज के लिए, वैकल्पिक लेख के एट्रिब्यूट की वैल्यू के तौर पर alt="" का इस्तेमाल किया जाना चाहिए.