इमेज के लिए टेक्स्ट के विकल्प

इमेज के लिए टेक्स्ट के विकल्प देने के लिए, alt एट्रिब्यूट का इस्तेमाल करना

Alice Boxhall

Dave Gash

Meggin Kearney

इमेज ज़्यादातर वेब पेजों का एक अहम हिस्सा होती हैं. साथ ही, कम दृष्टि वाले उपयोगकर्ताओं के लिए इमेज एक अहम हिस्सा होती हैं. हमें यह देखना होगा कि पेज में इमेज कौनसी भूमिका निभाती है, ताकि यह पता चल सके कि उसके टेक्स्ट का दूसरा टाइप कौनसा होना चाहिए. इस इमेज को देखें.

<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 या किसी भी तरह के कैप्शन से अलग होता है. इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब इमेज उपलब्ध न हो.

उपयोगी वैकल्पिक लेख लिखना थोड़ा कला है. स्ट्रिंग को इस्तेमाल करने लायक टेक्स्ट विकल्प के तौर पर दिखाने के लिए, ज़रूरी है कि इसे इमेज जैसा कॉन्सेप्ट दिखाया जाए.

पेज के मास्टहेड में, लिंक किए गए लोगो की इमेज का इस्तेमाल करें, जैसा कि ऊपर दिखाया गया है. हम इमेज के बारे में बहुत सटीक तरीके से "The Funion लोगो" बता सकते हैं.

<img class="logo" src="logo.jpg" alt="The Funion logo">

शायद आप इसे "होम" या "मुख्य पेज" के बजाय आसान टेक्स्ट विकल्प के तौर पर देना चाहें, लेकिन इससे कम दृष्टि वाले और सामान्य दृष्टि वाले, दोनों तरह के लोगों को नुकसान पहुंचता है.

हालांकि, ऐसे स्क्रीन रीडर इस्तेमाल करने वाले व्यक्ति की कल्पना करें जो पेज पर मास्टहेड लोगो खोजना चाहता है. उसे "होम" की वैकल्पिक वैल्यू देने से, भ्रम की स्थिति पैदा होती है. साथ ही, स्क्रीन रीडर इस्तेमाल करने वाले व्यक्ति को एक ही चुनौती का सामना करना होता है, जैसे कि साइट के लोगो पर क्लिक करने से क्या होता है.

वहीं दूसरी ओर, किसी इमेज के बारे में जानकारी देना हमेशा मददगार नहीं होता. उदाहरण के लिए, खोज बटन के अंदर एक मैग्नीफ़ाइंग ग्लास इमेज देखें, जिसमें "Search" टेक्स्ट मौजूद हो. अगर टेक्स्ट मौजूद नहीं है, तो आपको उस इमेज को "search" में वैकल्पिक वैल्यू देनी होगी. हमें टेक्स्ट दिख रहा है, इसलिए स्क्रीन रीडर "search" शब्द को पिक अप करके ज़ोर से पढ़कर सुनाएगा. इसलिए, इमेज पर alt की एक जैसी वैल्यू इस्तेमाल करना ज़रूरी नहीं है.

हालांकि, हमें पता है कि अगर हम alt टेक्स्ट को छिपा देते हैं, तो शायद हमें इमेज फ़ाइल का नाम सुनाई देगा. इससे न तो आपको कोई फ़ायदा होगा और न ही भ्रम होगा. इस मामले में, सिर्फ़ एक खाली alt एट्रिब्यूट का इस्तेमाल किया जा सकता है और स्क्रीन रीडर, इमेज को स्किप कर देगा.

<img src="magnifying-glass.jpg" alt="">

खास जानकारी देने के लिए, सभी इमेज में alt एट्रिब्यूट होना चाहिए, लेकिन सभी इमेज में टेक्स्ट होना ज़रूरी नहीं है. ज़रूरी इमेज में ऐसा वैकल्पिक लेख होना चाहिए जिससे कम शब्दों में इमेज के बारे में पता चले, जबकि सजावटी इमेज के लिए खाली वैकल्पिक एट्रिब्यूट मौजूद होने चाहिए. इसका मतलब है कि alt="".