सहायक टेक्नोलॉजी से ऑफ़स्क्रीन कॉन्टेंट नहीं दिखाया जाता

पक्का करें कि पेज के सिर्फ़ ज़रूरी हिस्सों को स्क्रीन रीडर और दूसरी सहायक टेक्नोलॉजी के ज़रिए दिखाया गया हो. जैसे, जो कॉन्टेंट ऑफ़स्क्रीन या सिर्फ़ प्रज़ेंटेशन है उसे सहायक टेक्नोलॉजी से छिपाया जाना चाहिए.

मैन्युअल तरीके से टेस्ट करने का तरीका

यह देखने के लिए कि ऑफ़स्क्रीन कॉन्टेंट छिपा हुआ है या नहीं, आपको स्क्रीन रीडर का इस्तेमाल करके मैन्युअल रूप से उस कॉन्टेंट की जांच करनी होगी. - Mac का इस्तेमाल करने वाले लोगों के लिए, VoiceOver इस्तेमाल करने के बारे में यह वीडियो देखें. - पीसी इस्तेमाल करने वाले लोगों के लिए, NVDA इस्तेमाल करने का यह वीडियो देखें. - Chromebook का इस्तेमाल करने वाले लोग ChromeVox, पहले से मौजूद स्क्रीन रीडर देखें.

अपने पेज पर टैब करने के लिए, TAB कुंजी का इस्तेमाल करें. स्क्रीन रीडर को, छिपे हुए कॉन्टेंट की सूचना नहीं देनी चाहिए.

कैसे ठीक करें

ऑफ़स्क्रीन कॉन्टेंट छिपाने के लिए, उस एलिमेंट को display: none या visibility: hidden पर सेट करके, टैब से उस एलिमेंट को हटाएं जिसमें वह कॉन्टेंट शामिल है.

उदाहरण के लिए:

.remove-me {
  visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>

ऑफ़स्क्रीन कॉन्टेंट दिखने की सेटिंग सही तरीके से सेट करें भी देखें.

संसाधन

ऑफ़स्क्रीन कॉन्टेंट का सोर्स कोड, सहायक टेक्नोलॉजी के ऑडिट में छिपा है