स्क्रीन रीडर टेक्स्ट प्रीव्यू क्या है?

Screen Reader Text Preview दिखाता है कि सहायक तकनीक आपकी HTML सामग्री को कैसे पढ़ती है। यह हर तत्व का एक्सेसिबल नाम, रोल और रीडिंग ऑर्डर सामने लाता है, ताकि असली उपयोगकर्ताओं के सामने आने से पहले ही आप छूटे हुए लेबल, टूटी हुई हेडिंग संरचना और ARIA समस्याओं को पकड़ सकें।

टूल आपके HTML को उसी तरह पार्स करता है जैसे स्क्रीन रीडर अपनी एक्सेसिबिलिटी ट्री बनाता है: यह दृश्य लेआउट हटाता है, aria-label और aria-labelledby को सुलझाता है, छवियों के alt टेक्स्ट उठाता है और परिणाम को रैखिक पठन क्रम में सपाट करता है। समस्या पैनल बिना सुलभ नाम वाले लिंक, हेडिंग स्तर की छलाँग, alt के बिना छवियाँ और बिना लेबल वाले फ़ॉर्म फ़ील्ड को चिन्हित करता है।

उपयोग कैसे करें

1. विश्लेषण के लिए अपनी HTML सामग्री पेस्ट करें या URL दर्ज करें।
2. लीनियराइज़्ड रीडिंग ऑर्डर और एलिमेंट एक्सेसिबिलिटी ट्री की समीक्षा करें।
3. चिह्नित समस्याओं को ठीक करें और जब तक रीडिंग फ़्लो स्पष्ट न हो जाए, दोबारा टेस्ट करें।

कब उपयोग करें

• लैंडिंग पेज लाइव करने से पहले, जो WCAG AA ऑडिट पास करना चाहिए।
• NVDA या VoiceOver के यूज़र ने नेविगेशन मेनू को भ्रामक बताया हो, तब कारण समझने के लिए।
• तृतीय-पक्ष विजेट अपडेट के बाद HTML की जाँच कर एक्सेसिबिलिटी में आई गिरावट पकड़ने के लिए।

परिणाम

एक डेवलपर नेविगेशन मेनू पेस्ट करता है। टूल बताता है कि 3 लिंक्स में एक्सेसिबल नाम नहीं हैं और हेडिंग ऑर्डर h1 से सीधे h4 पर जंप करता है, जिससे स्क्रीन रीडर उपयोगकर्ताओं को भ्रम होता है।

अक्सर पूछे जाने वाले प्रश्न

क्या यह असली स्क्रीन रीडर परीक्षण की जगह ले सकता है?

नहीं। NVDA, JAWS और VoiceOver की लाइव क्षेत्र, टेबल हेडर, गतिशील कंटेंट पढ़ने की अपनी-अपनी आदतें होती हैं। टूल से स्पष्ट समस्याएँ (छूटे लेबल, टूटा हेडिंग क्रम) पहले निकाल लीजिए, फिर असली स्क्रीन रीडर में समय लगाना ज़्यादा कारगर रहेगा।

मेरी सजावटी आइकन समस्या के रूप में क्यों दिख रही है?

स्क्रीन रीडर डिफ़ॉल्ट रूप से हर img की घोषणा करते हैं। अगर आइकन विशुद्ध सजावट है, तो उसे खाली alt और aria-hidden="true" दें, टूल उसे पठन क्रम में छोड़ देगा। alt="आइकन" या alt="सजावट" लिखना कुछ न लिखने से बुरा है।

सही हेडिंग क्रम क्या है?

हर पेज पर बस एक h1, और नीचे जाते समय स्तर छोड़ना मना है (h2 के बाद h4 नहीं आ सकता)। ऊपर लौटना ठीक है। स्क्रीन रीडर के यूज़र हेडिंग्स के बीच कूद-कूद कर नेविगेट करते हैं, टूटा पदानुक्रम पेज को भूलभुलैया जैसा बना देता है।

क्या हर इंटरैक्टिव तत्व पर aria-label चाहिए?

नहीं। दृश्य टेक्स्ट वाले बटन को aria-label की ज़रूरत नहीं, वही टेक्स्ट स्वतः सुलभ नाम बन जाता है। aria-label केवल तब जोड़ें जब दृश्य टेक्स्ट नहीं है (केवल आइकन वाला बटन) या टेक्स्ट वर्णनात्मक नहीं है (एक ही पंक्ति में कई "और पढ़ें")।

क्या पूरा पेज चिपका सकते हैं?

हाँ, पूरा HTML स्रोत चिपकाइए। टूल script, style और meta टैग को नज़रअंदाज़ करके body पर ध्यान देता है। बहुत बड़े पेजों के लिए सेक्शन-दर-सेक्शन जाँच करना बेहतर है ताकि समस्याओं की सूची पढ़ने योग्य बनी रहे।

संबंधित उपकरण