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

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

मैन्युअल तरीके से जांच करने का तरीका

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

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

कैसे ठीक करें

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

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

.remove-me {
  visibility: hidden;
}

<button class="remove-me">Can't reach me with the TAB key!</button>

ऑफ़स्क्रीन कॉन्टेंट की विज़िबिलिटी को सही तरीके से सेट करना लेख भी पढ़ें.

संसाधन

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