इमेज

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

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

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

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

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

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

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

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

सजावटी इमेज

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

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

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

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

भूमिका को 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 का इस्तेमाल सावधानी से करें, क्योंकि इससे वे एलिमेंट छिपाए जा सकते हैं जिन्हें आपको छिपाना नहीं है.

सीएसएस में मौजूद इमेज

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

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

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

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

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

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

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

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

वैकल्पिक टेक्स्ट से जुड़े सबसे सही तरीके

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

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

टेक्स्ट के अलावा, अन्य सबसे सही तरीकों में ये शामिल हैं:

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

आपने जो सीखा है उसकी जांच करें

ARIA और एचटीएमएल के बारे में अपनी जानकारी की जांच करें