सुलभ छवियाँ — Alt/डेकोरेटिव/डायग्राम 2025

भूमिका

SEO और एक्सेसिबिलिटी कुछ हिस्सों में मिलती हैं, पर लक्ष्य अलग हैं। यह लेख alt डिज़ाइन पर केंद्रित है ताकि स्क्रीन रीडर के साथ पढ़े जाने पर अर्थ स्पष्ट रहे, और डेकोरेटिव/सूचनात्मक/डायग्राम के बीच की रेखा स्पष्ट हो। SEO के लिए देखें: इमेज SEO 2025 — Alt टेक्स्ट, स्ट्रक्चर्ड डेटा और साइटमैप का व्यावहारिक गाइड.

alt डिज़ाइन के सिद्धांत

• डेकोरेटिव छवियाँ: खाली alt (alt="") ताकि स्क्रीन रीडर उन्हें छोड़ दें।
• सूचनात्मक छवियाँ: मुख्य बिंदु संक्षेप में, आसपास के टेक्स्ट को न दोहराएँ।
• डायग्राम/चार्ट: alt में सार; संख्याएँ/इकाइयाँ पास के टेक्स्ट या figcaption में।

सामान्य स्थितियाँ

• लिंक्ड इमेज: alt गंतव्य/उद्देश्य बताए। फ़ाइल-नाम या लंबी व्याख्याएँ न लिखें।
• OGP प्रीव्यू: अक्सर पेज सामग्री को दोहराते हैं; alt छोटा रखें। डिज़ाइन नोट्स: OGP थंबनेल डिज़ाइन 2025 — पठनीय, हल्का, फ़्रेम में.

लागू करते समय गलतियाँ

• role="presentation" का अति प्रयोग न करें; सही alt के साथ सेमान्टिक HTML बेहतर है।
• ओवर-डिलीवरी रोकें: srcset/sizes मिलाकर दें। विवरण: 2025 में रेस्पॉन्सिव इमेज डिज़ाइन — srcset/sizes प्रैक्टिकल गाइड.

व्यावहारिक सुझाव

• इमेज क्रॉपर से डायग्राम की पठनीयता और कंपोज़िशन जाँचें।
• Srcset जनरेटर से responsive स्रोत बनाएँ।
• OGP थंबनेल मेकर से OGP थंबनेल बनाएं।

पहली पहचान: डेकोरेटिव, सूचनात्मक या UI

1. डेकोरेटिव (केवल माहौल) → alt="". अतिरिक्त भूमिकाएँ नहीं चाहिए।
2. सूचनात्मक (समझ के लिए आवश्यक) → संक्षेप में सार; पुनरावृत्ति से बचें।
3. UI आइकन/बटन → alt/accessible name दृश्य लेबल से मेल खाए।

alt के लिए छोटा अनुबंध

• alt ऐसा एक-वाक्य हो जो वहीं पढ़े जाने पर अर्थपूर्ण लगे।
• “छवि/फोटो” जैसे शब्द आमतौर पर अनावश्यक।
• डेटा ग्राफिक्स में alt = सार + इकाइयाँ; लंबा वर्णन टेक्स्ट/कैप्शन में रखें।

खराब बनाम अच्छे alt

• खराब: alt="ग्राफ"

  • कमी: कौन-सी मीट्रिक और क्या रुझान?

• अच्छा: alt="2024 की मासिक आय; Q4 की ओर बढ़त"

• खराब: alt="बटन"

• अच्छा: alt="कार्ट में जोड़ें" (UI बटन)

• खराब: alt="कंपनी लोगो"

• अच्छा: alt="Unified Image Tools" (लिंक हो तो लिंक-उद्देश्य के अनुरूप)

जटिल डायग्राम (लंबा टेक्स्ट और कहीं)

• alt संक्षिप्त रखें; विस्तृत संख्याएँ/टिप्पणियाँ चित्र के पास दें।
• <figcaption> से संदर्भ दें; स्क्रीन रीडर के लिए alt को लंबा करने से बेहतर है।

उदाहरण (Next.js)

<figure>
  <Image src="/charts/sales-2024.png" alt="2024 की मासिक आय; Q4 की ओर बढ़त" width={960} height={540} />
  <figcaption>जुलाई से आय ऊपर की ओर। इकाई: 10K.</figcaption>
</figure>

UI आइकन और एक्सेसिबल नाम

• शुद्ध डेकोरेटिव आइकन: alt="" और एक्सेसिबिलिटी-ट्री से छुपाएँ।
• यदि आइकन ही एकमात्र कंटेंट है, तो aria-label या दृश्य टेक्स्ट दें।
• alt और aria-label को एक ही तत्व पर डुप्लिकेट न करें; एक नाम चुनें।

प्रदर्शन और a11y साथ-साथ

• LCP इमेज के लिए प्राथमिकता/प्रीलोड दें, alt फिर भी संक्षिप्त रखें।
• sizes/srcset अनुकूलित करें; बैंडविड्थ भी a11y का पहलू है।
• टेक्स्ट कंट्रास्ट रखें; टेक्स्ट-इन-इमेज की बजाय HTML टेक्स्ट प्राथमिकता दें।

OGP/सोशल छवियाँ

• alt छोटा रखें ताकि पेज सामग्री से दोहराव न हो।
• कई प्रीव्यू alt नहीं पढ़ते; मुख्य सार बॉडी टेक्स्ट में उपस्थित रहे।
• विवरण: OGP थंबनेल डिज़ाइन 2025 — पठनीय, हल्का, फ़्रेम में.

परीक्षण और सत्यापन

• स्क्रीन रीडर (NVDA/VoiceOver): पढ़ने का क्रम और अनावश्यकता जाँचें।
• स्वचालित (Axe/Pa11y): खाली alt और सार्थक चित्र पहचानें।
• वास्तविक पेज पर: कीबोर्ड फोकस और इमेज-लोड विफल होने पर व्यवहार।

चेकलिस्ट (रिलीज़ से पहले)

• डेकोरेटिव चित्र alt="" से मौन हैं।
• सूचनात्मक चित्रों का सार संक्षेप है, दोहराव नहीं।
• UI आइकन का एक्सेसिबल नाम दृश्य लेबल से मेल खाता है।
• डायग्राम: इकाइयाँ/रुझान टेक्स्ट में; alt संक्षिप्त।
• srcset/sizes/फ़ॉर्मेट/प्रीलोड सेटअप a11y को बाधित नहीं करता।

संबंधित

• इमेज SEO 2025 — Alt टेक्स्ट, स्ट्रक्चर्ड डेटा और साइटमैप का व्यावहारिक गाइड
• 2025 में रेस्पॉन्सिव इमेज डिज़ाइन — srcset/sizes प्रैक्टिकल गाइड
• Srcset जनरेटर