हर चार्ट को पाठ्य विकल्प चाहिए

स्क्रीन रीडर के लिए चार्ट अक्सर एक मौन चित्र होता है। अंतर्दृष्टि चित्र में छिपी रहती है, इसलिए जब तक आप उसे शब्दों में स्पष्ट न करें, दृष्टिबाधित उपयोगकर्ताओं को कुछ नहीं मिलता।

किसी को पहले ग्रिडलाइन और अक्षों के बारे में सुनने की ज़रूरत नहीं है। निष्कर्ष से शुरुआत करें: यह चार्ट पाठक को वास्तव में क्या बताता है?

अगर आपका चार्ट एक चित्र है, तो उसके alt attribute में chart लिखने के बजाय निष्कर्ष बताना चाहिए। 📊

छोटा alt मुख्य बात बताता है। जब डेटा समृद्ध हो, तो पूरी जानकारी के लिए उसके पास लंबा विवरण भी दें।

SVG चार्ट डिफ़ॉल्ट रूप से चित्र नहीं होते। role="img" के साथ एक नाम जोड़ें, ताकि सहायक तकनीक पूरे ग्राफ़िक को एक नामित इकाई माने।

SVG की पहली child के रूप में रखा गया title element भी उसका नाम बताता है। स्क्रीन रीडर के बीच बेहतर समर्थन के लिए इसे aria-labelledby से संदर्भित करें।

अधिकांश चार्ट किसी रुझान या तुलना को दिखाने के लिए होते हैं। इसे सरल शब्दों में लिखें: बढ़ता हुआ, घटता हुआ, स्थिर या बाकी सभी से बहुत ऊँचा एक बार।

ऊँचे और नीचे बिंदुओं को उनके नाम और मान सहित बताएँ। यह एक वाक्य अक्सर श्रोता के लिए पूरे चार्ट का अर्थ स्पष्ट कर देता है।

‘बहुत’ जैसे अस्पष्ट शब्द किसी की मदद नहीं करते। वास्तविक आँकड़े शामिल करें, ताकि श्रोता डेटा के बारे में उसी तरह विचार कर सके जैसे कोई देखने वाला पाठक करता है।

चार्ट के ठीक नीचे एक छोटा-सा पाठ-सारांश दिखाई देने वाले कैप्शन के रूप में रखें। देखने वाले उपयोगकर्ता भी इसे सरसरी तौर पर पढ़ते हैं, इसलिए यह कभी व्यर्थ प्रयास नहीं होता। ✨

किसी संख्या के पास लगी छोटी सजावटी चमक कोई नया अर्थ नहीं जोड़ती। इसे aria-hidden से छिपाएँ, ताकि सुनकर उपयोग करने के अनुभव में अनावश्यक अव्यवस्था न हो।

आपने सीखा कि हर चार्ट के लिए ऐसा पाठ-वैकल्पिक वर्णन आवश्यक है जो मुख्य जानकारी बताए, वास्तविक संख्याओं के साथ चरम बिंदुओं के नाम दे और पूरी तरह सजावटी ग्राफ़िक्स को छिपा दे। 🎯