जटिल चित्र: चार्ट, मानचित्र और लंबे विवरण
ऐसे चित्र सँभालें जिन्हें छोटे वाक्यांश से अधिक विवरण चाहिए।
जटिल चित्र: चार्ट, मानचित्र और लंबे विवरण, CoddyKit पर Web Accessibility Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Web Accessibility Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
जब alt पर्याप्त नहीं होता
कुछ चित्रों में छोटे वाक्यांश से बताने के लिए बहुत अधिक जानकारी होती है। चार्ट, मानचित्र और आरेखों के लिए लंबे विवरण की योजना चाहिए।
छोटे alt से शुरू करें
एक जटिल चित्र के लिए भी संक्षिप्त वैकल्पिक पाठ दिया जाता है, जिसमें उसका नाम बताया जाता है, जैसे 2024 की मासिक बिक्री का स्तंभ-चित्र।
<img src="chart.png" alt="Bar chart of monthly sales for 2024">फिर विवरण जोड़ें
संक्षिप्त वैकल्पिक पाठ चित्र का नाम बताता है; उसके पास दिया गया विस्तृत विवरण फिर उसमें दिखाए गए वास्तविक आँकड़ों या संबंधों को समझाता है।
मुख्य बात बताएँ
एक अच्छा विस्तृत विवरण हर मान की नीरस सूची देने के बजाय मुख्य निष्कर्ष बताता है, जैसे दिसंबर में बिक्री सबसे अधिक रही।
आँकड़ा तालिका का विकल्प
आलेखों के लिए सबसे अच्छा विकल्प अक्सर वही संख्याएँ दिखाने वाली वास्तविक HTML तालिका को चित्र के ठीक नीचे रखना होता है।
विवरण से जोड़ना
आप पृष्ठ पर विस्तृत विवरण रख सकते हैं और उसे उसके तत्व की id की ओर संकेत करने वाले aria-describedby से जोड़ सकते हैं।
<img src="map.png" alt="Store map" aria-describedby="mapdesc">चित्र और चित्र-शीर्षक
चित्र और उसके दिखाई देने वाले विवरण को figure और चित्र-शीर्षक में रखें, ताकि यह संबंध सभी के लिए स्पष्ट रहे।
<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>मानचित्रों को अपने आँकड़े चाहिए
अंतर्निहित तथ्यों के बिना मानचित्र का चित्र बेकार है, इसलिए पाठ्य समकक्ष के रूप में पता, दिशा-निर्देश या सूची दें।
आरेख और प्रवाह
प्रवाह-चित्र के लिए चरणों और उनके क्रम का गद्य में वर्णन करें, ताकि दृश्य विन्यास के बिना भी तर्क समझ में आए।
इसे आसानी से खोजने योग्य रखें
सुनिश्चित करें कि विस्तृत विवरण आसानी से मिल सके। ऐसा छिपा हुआ पाठ्य समकक्ष, जिस तक उपयोगकर्ता पहुँच ही न सकें, बिल्कुल मददगार नहीं है।
जटिलता के अनुसार प्रयास करें
चित्र जितना अधिक समृद्ध होगा, उसका पाठ्य समकक्ष भी उतना ही अधिक विवरण देगा। आप कितना लिखेंगे, यह चित्र की जटिलता के अनुसार तय करें।
त्वरित जाँच
जटिल आलेख के लिए सबसे अच्छी योजना चुनें।
पुनरावलोकन
आपने कर दिखाया! जटिल चित्रों को संक्षिप्त वैकल्पिक पाठ के साथ वास्तविक पाठ्य समकक्ष, आँकड़ा तालिका, चित्र-शीर्षक या aria-describedby चाहिए, जो मुख्य निष्कर्ष समझाए।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “जटिल चित्र: चार्ट, मानचित्र और लंबे विवरण” पाठ निःशुल्क है?
हाँ—“जटिल चित्र: चार्ट, मानचित्र और लंबे विवरण” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Web Accessibility Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“जटिल चित्र: चार्ट, मानचित्र और लंबे विवरण” में मैं क्या सीखूँगा?
ऐसे चित्र सँभालें जिन्हें छोटे वाक्यांश से अधिक विवरण चाहिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web Accessibility Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Web Accessibility Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web Accessibility Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“जटिल चित्र: चार्ट, मानचित्र और लंबे विवरण” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Web Accessibility Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Web Accessibility Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- सूचनात्मक बनाम सजावटी: पहला निर्णय
- ऐसा Alt लिखें जो उद्देश्य बताए, पिक्सेल नहीं
- खाली alt और छिपा सजावटी चित्र
- जटिल चित्र: चार्ट, मानचित्र और लंबे विवरण