TL;DR: Alt Text के लिए 125 characters का कोई universal rule नहीं है। वह जितना संभव हो उतना छोटा और context में image का उद्देश्य बदलने के लिए जितना जरूरी हो उतना लंबा होना चाहिए। Simple informative image को अक्सर एक concise sentence चाहिए। Functional image action बताती है। Decorative image में सामान्यतः empty alt होता है। Complex chart को छोटा label और पास में detail चाहिए।
Alt Text की length को अक्सर एक number में बदल दिया जाता है, लेकिन accessibility ऐसे काम नहीं करती। दस शब्दों का description decorative image के लिए बहुत लंबा और chart के लिए बहुत छोटा हो सकता है। सही टेक्स्ट इस बात पर निर्भर करता है कि image क्यों है और उसे न देख पाने पर व्यक्ति कौन सी जानकारी खोएगा।
यह गाइड informative, functional, decorative और complex images के लिए Alt Text लिखना बताती है। इसमें keyword stuffing, repeated caption और उद्देश्य बताए बिना visual details की सूची जैसे common mistakes भी शामिल हैं। लक्ष्य useful replacement text है, perfect character score नहीं।
Description को context में लिखें और फिर अक्षर गिनती टूल से उसका आकार जांचें। Counting overloaded description खोजने में मदद करती है, लेकिन page समझने के लिए जरूरी जानकारी हटाने पर मजबूर नहीं करनी चाहिए।
Alt Text कितना लंबा होना चाहिए?
Alt Text जितना संभव हो उतना छोटा और image का उद्देश्य बताने के लिए जितना जरूरी हो उतना लंबा होना चाहिए। Simple informative image के लिए एक concise sentence काफी हो सकता है। Functional icon को कुछ शब्द चाहिए। Complex chart को सामान्यतः short alt attribute और दूसरी जगह long explanation चाहिए।
HTML या WCAG में 125 characters की universal maximum limit नहीं है। यह कुछ teams और पुराने tools की practical recommendation है, ऐसा rule नहीं जो लंबे टेक्स्ट को automatically inaccessible बना दे।
Image के बिना page पढ़ें और पूछें कि कौन सी information missing है। केवल वही replacement लिखें। Description paragraph बन जाए तो detail visible body text में ले जाएं ताकि अधिक लोग उसका उपयोग कर सकें।
Alt Text में क्या describe करना चाहिए?
Image का उद्देश्य और इस specific context में जो information वह जोड़ती है, उसे describe करें। हर visible object की list न बनाएं, जब तक detail महत्वपूर्ण न हो। वही photo news page, product page या personal profile में अलग Alt Text मांग सकती है।
W3C non-text content के लिए equivalent purpose वाला text alternative मांगता है, decoration जैसी स्थितियों के लिए exceptions के साथ। उसका image text alternative decision tree description, functional label, nearby explanation या empty alt attribute चुनने में मदद करता है।
“image of” या “picture of” से शुरुआत न करें, जब तक medium स्वयं महत्वपूर्ण न हो। Screen reader और आसपास का markup सामान्यतः content को image के रूप में पहचान लेते हैं।
Informative, functional और decorative images
लिखने से पहले image classify करें। Category तय करती है कि text content बताए, action समझाए या empty रहे।
- Informative image: वह fact या meaning बताएं जो image जोड़ती है। उदाहरण: “Station entrance के पास खड़ी लाल bicycle.”
- Functional image: action या destination बताएं। Magnifying-glass button को “Search” चाहिए, “Magnifying glass” नहीं।
- Decorative image: कोई information न जोड़ने पर HTML में empty alt attribute इस्तेमाल करें।
- Image of text: essential words शामिल करें यदि वे पास में real text के रूप में नहीं हैं।
- Logo: logo संगठन की जानकारी देता हो तो उसका नाम बताएं। Home link में “Company name, home” हो सकता है।
Caption को word for word repeat न करें। Repetition बिना meaning के listening बढ़ाती है। Duplicate लगने पर caption और Alt Text को टेक्स्ट अंतर टूल से compare करें।
Charts और complex images के लिए Alt Text कैसे लिखें?
Chart और उसके मुख्य message को पहचानने के लिए short alt attribute लिखें, फिर important data, relationship या process पास के text में दें। Complex information एक long alt attribute में शायद ही अच्छी तरह फिट होती है। Visible description low vision या cognitive disability वाले लोगों की भी मदद करती है।
Line chart में topic और key trend लिखें: “Monthly support requests January के 120 से June में 210 हो गए।” Exact monthly values महत्वपूर्ण हों तो data table या paragraph जोड़ें।
Diagram में उस sequence या relationship को describe करें जिस पर page निर्भर है। हर shape, arrow color या position न बताएं, जब तक वह meaning न बदले। पठनीयता जाँच essential steps हटाए बिना long visible description आसान बनाने में मदद कर सकता है।
Alt Text की common mistakes
Bad Alt Text अक्सर बहुत लंबा या छोटा नहीं होता। वह irrelevant, repetitive या लोगों के बजाय search engine के लिए लिखा होता है।
- “IMG_2048.jpg” जैसे file name इस्तेमाल करना।
- हर description से पहले “image of” लिखना।
- Caption, heading या पास के paragraph को repeat करना।
- ऐसे product keywords भरना जो image communicate नहीं करती।
- Meaning समझाए बिना color या position बताना।
- Decorative image को spoken description देना।
- ऐसी image में empty alt लगाना जो link या button का अकेला label है।
Copied description को अतिरिक्त स्पेस हटाने का टूल से साफ करें ताकि stray line breaks और invisible formatting CMS field में न जाएं।
Publish करने से पहले Alt Text कैसे जांचें?
Image को वास्तविक page context में देखें। उसका उद्देश्य तय करें, repeated information हटाएं, image के बिना page test करें और पुष्टि करें कि replacement text वही task support करता है। फिर final HTML या CMS output देखें ताकि attribute मौजूद हो और decorative image में सही तरीके से empty हो।
- Image type पहचानें: informative, functional, decorative, text-based या complex.
- Surrounding content पढ़ें: पहले से उपलब्ध information repeat न करें।
- Replacement लिखें: purpose और useful information पर focus करें।
- Length check करें: wording redundant या overloaded हो तभी छोटा करें।
- Visual accessibility देखें: image में text या essential graphic हो तो कंट्रास्ट सिम्युलेटर इस्तेमाल करें।
- Output test करें: confirm करें कि empty alt attribute लिखा गया है, omit नहीं हुआ।
Automated checker missing attributes खोज सकता है, लेकिन words useful हैं या नहीं, यह तय नहीं कर सकता। सही description context पर निर्भर है, इसलिए human review जरूरी है।
Alt Text length quality decision है, fixed SEO target नहीं। Simple images को concise replacement, functional images को clear action, decorative images को silence और complex visual को alt attribute के बाहर details चाहिए।
Image के साथ description लिखें, फिर अक्षर गिनती टूल से unnecessary length खोजें। हर वह शब्द रखें जो किसी को page समझने या इस्तेमाल करने में मदद करे और केवल वे details हटाएं जो image के purpose को serve नहीं करतीं।