# इमेज में वैकल्पिक टेक्स्ट होना चाहिए

<https://www.fixreports.com/hi/issues/image-alt>

WCAG 1.1.1 Non-text Content · लेवल A

इमेज में टेक्स्ट विकल्प नहीं है, इसलिए स्क्रीन रीडर इस्तेमाल करने वालों को पता नहीं चलता कि उनमें क्या दिखाया गया है।

## यह नियम क्या जाँचता है
सुनिश्चित करता है कि <img> एलिमेंट में वैकल्पिक टेक्स्ट हो या उनका role none या presentation हो.

## यह क्यों ज़रूरी है
WCAG 1.1.1 अर्थपूर्ण इमेज के लिए टेक्स्ट विकल्प मांगता है। इसके बिना स्क्रीन रीडर इस्तेमाल करने वाला व्यक्ति यह नहीं जान सकता कि फ़ोटो में कौन-सा प्रोडक्ट है।

## इसे कैसे ठीक करें
### किसी भी वेबसाइट पर
1. अपने CMS या टेम्पलेट में हर इमेज के alt टेक्स्ट में छोटा और सटीक विवरण जोड़ें।
2. वह बताएं जो ग्राहक के लिए मायने रखता है: प्रोडक्ट का नाम, रंग और दिखाया गया एंगल (जैसे “ऑलिव रंग का कैनवस टोट बैग, सामने से”)।
3. सजावटी इमेज में खाली alt एट्रिब्यूट (alt="") होना चाहिए, ताकि स्क्रीन रीडर उन्हें छोड़ दें।

### Shopify पर
1. Shopify admin में Products > [product] > Media खोलें, हर इमेज पर क्लिक करें और “Alt text” भरें। सेक्शन की इमेज के लिए Online Store > Themes > Customize खोलें और सेक्शन सेटिंग्स में इमेज का alt टेक्स्ट सेट करें।
2. वह बताएं जो ग्राहक के लिए मायने रखता है: प्रोडक्ट का नाम, रंग और दिखाया गया एंगल (जैसे “ऑलिव रंग का कैनवस टोट बैग, सामने से”)।
3. सजावटी इमेज में खाली alt एट्रिब्यूट (alt="") होना चाहिए, ताकि स्क्रीन रीडर उन्हें छोड़ दें।

### WooCommerce और WordPress पर
1. WordPress में Media > Library खोलें, हर इमेज चुनें और “Alternative Text” भरें। प्रोडक्ट गैलरी की इमेज के लिए भी यही फ़ील्ड इस्तेमाल होता है।
2. वह बताएं जो ग्राहक के लिए मायने रखता है: प्रोडक्ट का नाम, रंग और दिखाया गया एंगल (जैसे “ऑलिव रंग का कैनवस टोट बैग, सामने से”)।
3. सजावटी इमेज में खाली alt एट्रिब्यूट (alt="") होना चाहिए, ताकि स्क्रीन रीडर उन्हें छोड़ दें।

## सुधार की जांच कैसे करें
- प्रभावित पेजों को दोबारा स्कैन करें।
- स्क्रीन रीडर (Mac पर VoiceOver: Cmd+F5) से सुनें कि प्रोडक्ट इमेज कैसे पढ़ी जाती हैं।

## स्रोत
- axe-core नियम का डॉक्यूमेंटेशन (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- WCAG 1.1.1 की व्याख्या (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content