इमेज

सुलभ इमेज को पहली नज़र में एक आसान विषय माना जा सकता है. किसी इमेज में कुछ "वैकल्पिक लेख" जोड़ें और काम हो गया. हालांकि, यह विषय कुछ लोगों की सोच से ज़्यादा जटिल है. इस सेक्शन में, हम इन विषयों के बारे में जानेंगे:

• इमेज को ऐक्सेस करने लायक बनाने के लिए, कोड को अपडेट करने का तरीका.
• उपयोगकर्ताओं के साथ कौनसी जानकारी शेयर की जानी चाहिए और उसे कहां शेयर करना चाहिए.
• दिव्यांग लोगों की मदद करने के लिए, इमेज को बेहतर बनाने के अन्य तरीके.

इमेज का मकसद और कॉन्टेक्स्ट

कोड की एक भी लाइन लिखने से पहले, पॉइंट इमेज के मकसद के बारे में सोचें. साथ ही, यह भी सोचें कि इसे कहां इस्तेमाल किया जाएगा और इसका इस्तेमाल कैसे किया जाएगा. इन सवालों के जवाब देने से, आपको यह तय करने में मदद मिल सकती है कि सहायक टेक्नोलॉजी (एटी), जैसे कि स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति को जानकारी सबसे अच्छे तरीके से कैसे दी जाए.

खुद से ये सवाल पूछें:

• क्या इमेज, सुविधा या पेज के कॉन्टेक्स्ट को समझने के लिए ज़रूरी है?
• इमेज में किस तरह की जानकारी दी गई है?
• क्या इमेज आसान है या मुश्किल?
• क्या इमेज में कोई भावना दिख रही है या इससे उपयोगकर्ता को कोई कार्रवाई करने के लिए कहा जा रहा है?
• क्या इमेज सिर्फ़ "आकर्षक" है और इसका कोई मकसद नहीं है?

विज़ुअल फ़्लोचार्ट, जैसे कि इमेज डिसिज़न ट्री, से यह तय करने में मदद मिल सकती है कि आपकी इमेज किस कैटगरी में आती है.

ब्राउज़र एक्सटेंशन या अन्य तरीकों का इस्तेमाल करके, अपनी साइट या वेब ऐप्लिकेशन पर मौजूद इमेज छिपाने की कोशिश करें. इसके बाद, खुद से पूछें: "क्या मुझे बाकी कॉन्टेंट समझ में आ रहा है?" अगर जवाब हां है, तो हो सकता है कि यह सजावटी इमेज हो. अगर ऐसा नहीं है, तो इमेज में किसी तरह की जानकारी दी गई हो और वह कॉन्टेक्स्ट के हिसाब से ज़रूरी हो. इमेज का मकसद तय करने के बाद, उसके लिए सबसे सटीक तरीके से कोडिंग की जा सकती है.

सजावटी इमेज

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

अगर आपको लगता है कि कोई इमेज सजावटी है, तो उसे एटी से प्रोग्राम के हिसाब से छिपाया जाना चाहिए. किसी इमेज को छिपाने के लिए प्रोग्राम करने पर, एटी को यह सिग्नल मिलता है कि पेज के कॉन्टेंट, कॉन्टेक्स्ट या कार्रवाई को समझने के लिए इमेज की ज़रूरत नहीं है. इमेज छिपाने के कई तरीके हैं. जैसे, खाली या शून्य टेक्स्ट विकल्प का इस्तेमाल करना, ARIA लागू करना या इमेज को सीएसएस बैकग्राउंड के तौर पर जोड़ना. उपयोगकर्ताओं से सजावटी इमेज छिपाने के कुछ उदाहरण यहां दिए गए हैं.

alt एट्रिब्यूट की वैल्यू खाली है या शून्य है

खाली या शून्य वाले वैकल्पिक टेक्स्ट एट्रिब्यूट और मौजूद न होने वाले वैकल्पिक टेक्स्ट एट्रिब्यूट में अंतर होता है. अगर वैकल्पिक टेक्स्ट एट्रिब्यूट मौजूद नहीं है, तो एटी, फ़ाइल का नाम या आस-पास का कॉन्टेंट पढ़कर सुना सकता है. इससे उपयोगकर्ता को इमेज के बारे में ज़्यादा जानकारी मिलती है.

भूमिका को presentation या none पर सेट किया गया है

presentation या none पर सेट की गई भूमिका, सुलभता ट्री में एलिमेंट के सिमैंटिक को हटा देती है. वहीं, aria-hidden= "true", पूरे एलिमेंट और उसके सभी चाइल्ड एलिमेंट को ऐक्सेसिबिलिटी एपीआई से हटा देता है.

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

aria-hidden का इस्तेमाल सावधानी से करें, क्योंकि इससे ऐसे एलिमेंट छिप सकते हैं जिन्हें आपको नहीं छिपाना है.

सीएसएस में इमेज

सीएसएस का इस्तेमाल करके बैकग्राउंड इमेज जोड़ने पर, स्क्रीन रीडर इमेज फ़ाइल का पता नहीं लगा पाता. इस तरीके का इस्तेमाल करने से पहले, पक्का करें कि आपको इमेज को छिपाना है.

जानकारी देने वाली इमेज

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

अगर आपकी इमेज में जानकारी दी गई है, तो आपको प्रोग्राम के हिसाब से तैयार किया गया वैकल्पिक टेक्स्ट शामिल करना चाहिए. इसमें इमेज के मकसद के बारे में बताया गया हो. इमेज के बारे में वैकल्पिक जानकारी को अक्सर "वैकल्पिक टेक्स्ट" कहा जाता है. इससे एटी का इस्तेमाल करने वाले लोगों को इमेज के बारे में ज़्यादा जानकारी मिलती है. साथ ही, उन्हें इमेज के मैसेज या मकसद को बेहतर तरीके से समझने में मदद मिलती है.

alt एट्रिब्यूट शामिल करके, <img> एलिमेंट में ब्यौरे जोड़े जा सकते हैं. यह सभी फ़ाइल टाइप पर लागू होता है. जैसे, JPG, PNG या SVG.

<img src=".../Ladybug_Swarm.jpg"
  alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">

हालांकि, <svg> एलिमेंट को इनलाइन करते समय, आपको सुलभता पर ज़्यादा ध्यान देना होगा. एसवीजी को सिमैंटिक तरीके से कोड किया जाता है. इसलिए, एटी डिफ़ॉल्ट रूप से उन्हें अनदेखा कर देता है.

अगर SVG एक डेकोरेटिव इमेज है, तो यह ठीक है. एटी इसे अनदेखा कर देगा. हालांकि, अगर आपका SVG जानकारी देने वाली इमेज है, तो एलिमेंट में ARIA role="img" जोड़ें, ताकि एटी इसे इमेज के तौर पर पहचान सके.

दूसरा, <svg> एलिमेंट, alt एट्रिब्यूट का इस्तेमाल नहीं करते हैं. इसलिए, जानकारी देने वाली इमेज में वैकल्पिक ब्यौरे जोड़ने के लिए, कोडिंग के अलग-अलग तरीकों का इस्तेमाल करना होगा.

<svg role="img">
  <title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>

फ़ंक्शनल इमेज

काम करने वाली इमेज, किसी कार्रवाई से जुड़ी होती है. काम करने वाली इमेज का उदाहरण, होम पेज से लिंक किया गया लोगो, खोज बटन के तौर पर इस्तेमाल किया गया मैग्नीफ़ाइंग ग्लास या सोशल मीडिया का ऐसा आइकॉन है जो आपको किसी दूसरी वेबसाइट या ऐप्लिकेशन पर ले जाता है.

जानकारी देने वाली इमेज की तरह ही, काम करने वाली इमेज में भी वैकल्पिक जानकारी शामिल होनी चाहिए, ताकि सभी उपयोगकर्ताओं को उनके मकसद के बारे में पता चल सके. जानकारी देने वाली इमेज के उलट, हर फ़ंक्शनल इमेज में इमेज के ऐक्शन के बारे में बताना ज़रूरी है. इसमें विज़ुअल पहलुओं के बारे में बताने की ज़रूरत नहीं है.

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

इमेज में वैकल्पिक ब्यौरे जोड़ने का एक तरीका, विज़ुअली छिपा हुआ टेक्स्ट है. इस तरीके का इस्तेमाल करने पर, स्क्रीन रीडर टेक्स्ट को पढ़ पाते हैं, क्योंकि यह डीओएम में होता है. हालांकि, कस्टम सीएसएस की मदद से इसे छिपा दिया जाता है.

कोड स्निपेट से पता चलता है कि "होम पेज पर जाएं" रैपर का टाइटल है. साथ ही, इमेज का वैकल्पिक टेक्स्ट "आपके लॉन के लिए प्यारी लेडीबग" है. स्क्रीन रीडर की मदद से लोगो कोड सुनने पर, आपको एक ही इमेज में विज़ुअल और ऐक्शन, दोनों के बारे में जानकारी मिलती है.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
   </a>
</div>

मुश्किल इमेज

जटिल इमेज के बारे में अक्सर, सजावटी, जानकारी देने वाली या काम की इमेज की तुलना में ज़्यादा जानकारी देनी पड़ती है. पूरी जानकारी देने के लिए, इसमें कम और ज़्यादा शब्दों वाली वैकल्पिक जानकारी, दोनों की ज़रूरत होती है. जटिल इमेज में इन्फ़ोग्राफ़िक, मैप, ग्राफ़/चार्ट, और जटिल इलस्ट्रेशन शामिल होते हैं.

अन्य इमेज टाइप की तरह ही, जटिल इमेज में वैकल्पिक ब्यौरे जोड़ने के लिए अलग-अलग तरीकों का इस्तेमाल किया जा सकता है.

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

किसी इमेज के बारे में ज़्यादा जानकारी देने का एक तरीका यह है कि किसी रिसॉर्स को लिंक किया जाए. इसके अलावा, पेज पर बाद में ज़्यादा जानकारी देने के लिए जंप लिंक भी दिया जा सकता है. यह तरीका न सिर्फ़ एटी का इस्तेमाल करने वाले लोगों के लिए अच्छा है, बल्कि यह उन लोगों की भी मदद करता है जिन्हें संज्ञानात्मक, सीखने, और पढ़ने से जुड़ी समस्याएं हैं. इन लोगों को कोड में छिपी जानकारी के बजाय, स्क्रीन पर इमेज की अतिरिक्त जानकारी आसानी से उपलब्ध होने से फ़ायदा मिल सकता है.

<img> एलिमेंट में aria-describedby एट्रिब्यूट जोड़कर भी इस समस्या को ठीक किया जा सकता है. इमेज को ऐसे आईडी से प्रोग्राम के हिसाब से लिंक किया जा सकता है जिसमें ज़्यादा जानकारी दी गई हो. इस तरीके से, इमेज और पूरे ब्यौरे के बीच मज़बूत संबंध बनता है. ज़्यादा जानकारी को स्क्रीन पर दिखाया जा सकता है या इसे छिपाया जा सकता है. हालांकि, इसे दिखाने का विकल्प चुनें, ताकि ज़्यादा से ज़्यादा लोगों को मदद मिल सके.

छोटे वैकल्पिक ब्यौरों को बड़े ब्यौरे के साथ ग्रुप करने का एक और तरीका है. इसके लिए, <figure> और <figcaption> एलिमेंट का इस्तेमाल करें. ये एलिमेंट, aria-describedby की तरह काम करते हैं. इसका मतलब है कि ये एलिमेंट को सिमैंटिक तौर पर ग्रुप करते हैं. इससे इमेज और उसके ब्यौरे के बीच ज़्यादा मज़बूत संबंध बनता है.

ARIA role="group" जोड़ने से, यह पक्का किया जा सकता है कि यह सुविधा उन पुराने वेब ब्राउज़र के साथ काम करे जो <figure> एलिमेंट के सिमैंटिक के साथ काम नहीं करते.

बदलाव वाले टेक्स्ट के लिए सबसे सही तरीके

हालांकि, सिर्फ़ वैकल्पिक टेक्स्ट शामिल करना काफ़ी नहीं है. टेक्स्ट का मतलब भी समझ में आना चाहिए. उदाहरण के लिए, अगर आपकी इमेज में लेडीबग के झुंड को गुलाब की पत्तियों को खाते हुए दिखाया गया है, लेकिन वैकल्पिक टेक्स्ट में सिर्फ़ "कीड़े" लिखा है, तो क्या इससे इमेज का पूरा मैसेज और मकसद पता चलेगा? बिलकुल नहीं.

वैकल्पिक जानकारी में, इमेज के बारे में ज़्यादा से ज़्यादा काम की जानकारी होनी चाहिए. साथ ही, यह जानकारी कम शब्दों में होनी चाहिए. स्क्रीन रीडर के लिए, वर्णों की संख्या की कोई सीमा नहीं होती. हालांकि, स्क्रीन रीडर को ज़्यादा जानकारी न देनी पड़े, इसके लिए सलाह दी जाती है कि वैकल्पिक टेक्स्ट में 150 या इससे कम वर्णों का इस्तेमाल करें. अगर आपको इमेज के बारे में ज़्यादा जानकारी देनी है, तो इमेज के लिए जटिल पैटर्न में से किसी एक का इस्तेमाल करें. इसके अलावा, कैप्शन टेक्स्ट जोड़ें या मुख्य कॉपी में इमेज के बारे में ज़्यादा जानकारी दें.

वैकल्पिक टेक्स्ट लिखने के कुछ अन्य सबसे सही तरीके यहां दिए गए हैं:

• ब्यौरे में "की इमेज" या "की फ़ोटो" जैसे शब्दों का इस्तेमाल न करें, क्योंकि स्क्रीन रीडर इन फ़ाइल टाइप की पहचान कर लेगा.
• अपनी इमेज के नाम रखते समय, ज़्यादा से ज़्यादा एक जैसे और सटीक नाम रखें. जब इमेज का ब्यौरा देने वाला टेक्स्ट मौजूद नहीं होता या उसे अनदेखा कर दिया जाता है, तब इमेज के नाम फ़ॉलबैक के तौर पर काम करते हैं.
• इमेज के नाम या वैकल्पिक टेक्स्ट में, अक्षर के अलावा अन्य वर्णों (उदाहरण के लिए, #, 9, &) का इस्तेमाल न करें. साथ ही, शब्दों के बीच डैश का इस्तेमाल करें, न कि अंडरस्कोर का.
• जब भी संभव हो, सही विराम चिह्नों का इस्तेमाल करें. इसके बिना, इमेज के ब्यौरे एक लंबे वाक्य की तरह लगेंगे, जो कभी खत्म नहीं होगा.
• वैकल्पिक टेक्स्ट को रोबोट की तरह नहीं, बल्कि इंसान की तरह लिखो. कीवर्ड स्टफ़िंग से किसी को फ़ायदा नहीं होता. स्क्रीन रीडर का इस्तेमाल करने वाले लोग परेशान होंगे और सर्च इंजन के एल्गोरिदम आपको दंडित करेंगे.