इमेज के लिए टेक्स्ट के विकल्प देने के लिए वैकल्पिक एट्रिब्यूट का इस्तेमाल करना
इमेज ज़्यादातर वेब पेजों का एक अहम हिस्सा होती हैं. साथ ही, कम दृष्टि वाले उपयोगकर्ताओं को आकर्षित करने के लिए ये तस्वीरें काफ़ी अहम हो जाती हैं. हमें यह देखना होगा कि किसी पेज में इमेज की क्या भूमिका है, ताकि यह तय किया जा सके कि उसके लिए किस तरह का टेक्स्ट विकल्प होना चाहिए. इस इमेज पर एक नज़र डालें.
<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" alt="The Funion logo">
हो सकता है कि आपको "होम" या "मुख्य पेज" के बजाय, कोई आसान टेक्स्ट विकल्प देना अच्छा लगे. हालांकि, इससे कम दृष्टि वाले और सामान्य दृष्टि वाले, दोनों उपयोगकर्ताओं को परेशानी होती है.
हालांकि, स्क्रीन रीडर का इस्तेमाल करने वाले किसी व्यक्ति को पेज पर मास्टहेड लोगो ढूंढना हो, तो "होम" के तौर पर एल्ट वैल्यू देने से उसे और भी भ्रमित होना पड़ता है. साथ ही, देख सकने वाला उपयोगकर्ता भी एक ही चुनौती का सामना करता है — यह पता करना कि साइट के लोगो पर क्लिक करने से क्या होता है — यानी एक स्क्रीन रीडर उपयोगकर्ता.
दूसरी ओर, किसी इमेज के बारे में बताना हमेशा मददगार नहीं होता. उदाहरण के लिए, एक खोज बटन में मैग्नीफ़ाइंग ग्लास की इमेज और "खोजें" टेक्स्ट. अगर टेक्स्ट वहां नहीं था, तो आप उस इमेज को "search" के लिए वैकल्पिक वैल्यू देंगे. हालांकि, हमारे पास दिखने वाला टेक्स्ट है, इसलिए स्क्रीन रीडर "खोजें" शब्द को चुनकर ज़ोर से पढ़ेगा. इसलिए, इमेज पर एक जैसी alt वैल्यू मौजूद होने की ज़रूरत नहीं है.
हालांकि, हम जानते हैं कि अगर हम alt टेक्स्ट को खाली छोड़ देते हैं, तो शायद हमें इमेज फ़ाइल का नाम सुनाई देगा. यह नाम काम का नहीं होगा और भ्रम की स्थिति में भी पड़ सकता है. इस
इस मामले में, सिर्फ़ एक खाली alt एट्रिब्यूट का इस्तेमाल किया जा सकता है और स्क्रीन रीडर, इमेज को स्किप कर देगा.
<img src="magnifying-glass.jpg" alt="">
खास जानकारी देने के लिए, हर इमेज में alt एट्रिब्यूट होना चाहिए, लेकिन यह ज़रूरी नहीं है कि सभी इमेज में टेक्स्ट हो. अहम इमेज के लिए, जानकारी देने वाला वैकल्पिक लेख होना चाहिए, जिसमें कम शब्दों में बताया गया हो कि इमेज में क्या है. वहीं, सजावटी इमेज के लिए, वैकल्पिक लेख के एट्रिब्यूट की वैल्यू के तौर पर कोई वैल्यू नहीं डाली जानी चाहिए. इसका मतलब है कि वैल्यू के तौर पर alt="" डाला जाना चाहिए.