इमेज

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

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

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

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

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

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

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

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

सजावटी इमेज

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

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

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

alt खाली है या शून्य है

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

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

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

<!-- 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> एलिमेंट को इनलाइन इस्तेमाल करते समय, आपको सुलभता पर ध्यान देना होगा.

सबसे पहले, एसवीजी को सेमेटिक कोड में लिखा जाता है. इसलिए, एटी उन्हें डिफ़ॉल्ट रूप से स्किप कर देगा. अगर आपने सजावट के मकसद से कोई इमेज इस्तेमाल की है, तो कोई समस्या नहीं है. एआईटी, उसे अनदेखा कर देगा. हालांकि, अगर आपके पास जानकारी देने वाली इमेज है, तो एटी को इमेज के तौर पर पहचानने के लिए, पैटर्न में 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>

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

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

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

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

वैकल्पिक टेक्स्ट के लिए सबसे सही तरीके

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

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

विकल्प के तौर पर दिए जाने वाले टेक्स्ट के लिए सबसे सही तरीकों में ये शामिल हैं:

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

देखें कि आपको क्या समझ आया

अपना ज्ञान परखें.

जटिल इमेज को कैसे ऐक्सेस किया जा सकता है?

लेख में बाद में इसकी जानकारी दें.

गलत जवाब. यह मददगार हो सकता है, लेकिन सिर्फ़ तब जब इसका इस्तेमाल, ज़्यादा जानकारी वाले ब्यौरे के लिंक के साथ किया जाए.

ज़्यादा जानकारी देने के लिए लिंक का इस्तेमाल करें.

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

इमेज में aria-describedby एट्रिब्यूट जोड़ें.

इस तरीके से, इमेज और पूरी जानकारी के बीच एक मज़बूत संबंध बनता है.

पूरी जानकारी के साथ लंबा वैकल्पिक लेख जोड़ें.

इस मामले में, वैकल्पिक टेक्स्ट का इस्तेमाल करने से बचें. ऐसा इसलिए, क्योंकि यह उन उपयोगकर्ताओं के लिए उपलब्ध नहीं होगा जिनके पास एटी नहीं है. साथ ही, हो सकता है कि इसे पूरा न पढ़ा जा सके.