इमेज

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

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

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

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

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

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

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

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

सजावटी इमेज

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

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

alt एट्रिब्यूट की वैल्यू में कोई वैल्यू नहीं दी गई है

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

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

भूमिका को presentation या none पर सेट किया गया सुलभता से जुड़े कॉन्टेंट के संपर्क से किसी एलिमेंट के सिमैंटिक को हटा देता है पेड़ इस दौरान, aria-hidden= "true" पूरा एलिमेंट—और उसके सभी बच्चे—हटा देंगे Accessibility 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 का इस्तेमाल सावधानी से करें, क्योंकि इससे वे एलिमेंट छिप सकते हैं जिसे आप छिपाना नहीं चाहते.

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

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

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

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

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

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

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

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

वैकल्पिक टेक्स्ट इस्तेमाल करने के सबसे सही तरीके

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

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

कुछ अतिरिक्त वैकल्पिक टेक्स्ट तरीकों में ये शामिल हैं:

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

देखें कि आपको कितना समझ आया है

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