ऑल्ट टेक्स्ट सहायक क्या है?
छवि का प्रकार चुनें, प्रकार-विशिष्ट संकेतों की मदद से ऑल्ट टेक्स्ट लिखें, और एक्सेसिबिलिटी चेकलिस्ट से जाँचें। स्क्रीन रीडर के अनुकूल विवरण लिखने के लिए सुझाव और उदाहरण शामिल हैं।
छह इमेज प्रकारों — फ़ोटो, आइकन, चार्ट, सजावटी, सूचनात्मक, इमेज लिंक — में से एक चुनिए, और फ़ील्ड उसी प्रकार के लिए ख़ास संकेत पर बदल जाता है, जो स्क्रीन-रीडर उपयोगकर्ताओं को असल में चाहिए। लाइव वर्ण गणक 125 अक्षरों के पार होने पर चेताता है, और छह-बिंदु चेकलिस्ट जाँचती है कि वर्णन विशिष्ट है, संक्षिप्त है, संदर्भ ध्यान में है, 'image of' जैसे जुमलों से मुक्त है, सबसे ज़रूरी जानकारी सबसे आगे है, और कौमा की कतार या दोहराए कीवर्ड से ठुसा नहीं है। सजावटी इमेज पर alt="" का स्मरण मिलता है ताकि सहायक तकनीक उन्हें छोड़ दे।
उपयोग कैसे करें
- आप जिस छवि का वर्णन कर रहे हैं उसका प्रकार चुनें: फ़ोटोग्राफ़, आइकन, चार्ट, सजावटी, सूचनात्मक, या इमेज लिंक।
- अपनी छवि के प्रकार के अनुसार संकेत का उपयोग करके संक्षिप्त विवरण लिखें।
- एक्सेसिबिलिटी चेकलिस्ट के अनुसार अपने ऑल्ट टेक्स्ट की समीक्षा करें, फिर इसे HTML या CMS में उपयोग के लिए कॉपी करें।
कब उपयोग करें
- Shopify या WordPress के प्रोडक्ट गैलरी पर लॉन्च से पहले alt एट्रिब्यूट भरना।
- तिमाही रिपोर्ट के चार्ट के लिए alt लिखना ताकि स्क्रीन-रीडर उपयोगकर्ता तक संख्याएँ पहुँचें।
- एक्सेसिबिलिटी समीक्षा से पहले WCAG 1.1.1 के विरुद्ध मौजूदा साइट का ऑडिट करना।
परिणाम
Q1 बिक्री दिखाने वाले बार चार्ट के लिए: 'chart.png' की जगह लिखें 'Q1 2024 क्षेत्रवार बिक्री दर्शाने वाला बार चार्ट: उत्तरी अमेरिका $2.1M, यूरोप $1.8M, एशिया $1.4M'।
अक्सर पूछे जाने वाले प्रश्न
- alt टेक्स्ट को सबसे महत्वपूर्ण एक्सेसिबिलिटी एट्रिब्यूट क्यों कहा जाता है?
- यह WCAG (1.1.1 ग़ैर-पाठ सामग्री, Level A) की पहली ज़रूरत है और हर पन्ने पर दृष्टिहीन स्क्रीन-रीडर उपयोगकर्ता को मिलने वाली एकमात्र अनिवार्य चीज़ है। नदारद रहने पर एक्सेसिबिलिटी के साथ-साथ सर्च इंजन और लिंक-प्रीव्यू क्रॉलर भी इसे कैप्शन के रूप में नहीं देख पाते।
- alt टेक्स्ट कितना छोटा हो? क्या 125 अक्षर सख़्त सीमा है?
- तकनीकी रूप से नहीं। ब्राउज़र और स्क्रीन-रीडर लंबे स्ट्रिंग भी संभाल लेते हैं। 125-अक्षर का यह नियम पुराने JAWS के काटने वाले व्यवहार से आया, जो अब ठीक हो चुका है; फिर भी छोटे वर्णन सुनने में कम थकाते हैं।
- विभाजक रेखाओं या पृष्ठभूमि की सजावट जैसे विशुद्ध सजावटी इमेज के लिए क्या करें?
- alt="" (खाली स्ट्रिंग) का प्रयोग करें, एट्रिब्यूट को छोड़िए मत। खाली alt स्क्रीन-रीडर को बताता है कि इस इमेज को छोड़ दे। alt पूरी तरह हटाने पर कुछ स्क्रीन-रीडर फ़ाइल नाम पढ़ने लगते हैं, जो चुप्पी से भी बुरा है।
- किसी जटिल चार्ट का वर्णन 125 अक्षरों में कैसे करें?
- हर डेटा बिंदु नहीं, चार्ट प्रकार और मुख्य निष्कर्ष से शुरू कीजिए। 'लाइन चार्ट: 2024 की तीसरी तिमाही में मोबाइल ने डेस्कटॉप को पार किया' मासिक संख्याओं की सूची से बेहतर है। पूरी डेटा को पन्ने पर अलग जगह लंबे टेक्स्ट विवरण में दीजिए।
- क्या शुरू में 'फ़ोटो ऑफ़' या 'इमेज ऑफ़' लगाना चाहिए?
- नहीं। स्क्रीन-रीडर पहले ही 'image' की घोषणा कर देता है, सो 'image of a cat' 'image, image of a cat' बन जाता है। सीधे विषय से शुरू कीजिए, जैसे 'A grey cat on a blue couch'। टूल की चेकलिस्ट इस पैटर्न को अपने-आप पकड़ती है।
संबंधित उपकरण
स्क्रीन रीडर टेक्स्ट प्रीव्यू
देखें कि स्क्रीन रीडर आपकी सामग्री को कैसे पढ़ता है
फ़ोकस क्रम विज़ुअलाइज़र
किसी भी वेबपेज पर कीबोर्ड Tab क्रम को देखें
फ़ॉन्ट साइज़ टेस्टर
विभिन्न फ़ॉन्ट आकारों में टेक्स्ट का पूर्वावलोकन करें
डिस्लेक्सिया-अनुकूल टेक्स्ट
आसान पठन के लिए टेक्स्ट को फ़ॉर्मैट करें
बड़ा टेक्स्ट मोड
किसी भी टेक्स्ट को बड़ा करके आसानी से पढ़ें
हाई कॉन्ट्रास्ट मोड
हाई कॉन्ट्रास्ट में सामग्री का पूर्वावलोकन करें