पेज पर विज़ुअल का क्रम, DOM ऑर्डर के मुताबिक होना चाहिए

लॉजिकल टैब ऑर्डर को लागू करना, अपने उपयोगकर्ताओं को आसान कीबोर्ड नेविगेशन अनुभव देने का एक अहम हिस्सा है. स्क्रीन रीडर और अन्य सहायक टेक्नोलॉजी, पेज पर डीओएम के हिसाब से नेविगेट करती हैं. जानकारी सही होनी चाहिए.

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

यह देखने के लिए कि आपके ऐप्लिकेशन का टैब क्रम तार्किक है या नहीं, अपने पेज पर टैब करके देखें. आम तौर पर, पेज के पढ़ने के क्रम के हिसाब से फ़ोकस किया जाना चाहिए. पेज पर बाईं से दाईं ओर ऊपर से नीचे की ओर जाते हुए.

अपने टैब के क्रम का आकलन करते समय, इन दो मुख्य बातों को ध्यान में रखना ज़रूरी है:

  • क्या डीओएम में मौजूद एलिमेंट को लॉजिकल ऑर्डर में व्यवस्थित किया गया है?
  • क्या नेविगेशन से ऑफ़स्क्रीन कॉन्टेंट सही तरीके से छिपाया गया है?

नेविगेशन में किसी भी रुकावट पर ध्यान दें, जो परेशान करने वाली लगती है. किसी ऑफ़स्क्रीन जंप पर भी टैबिंग की सुविधा का इस्तेमाल करके, आप ऐसे कॉन्टेंट पर पहुंच सकते हैं जो लोगों को साफ़ तौर पर नहीं दिखता.

कीबोर्ड ऐक्सेस करने की बुनियादी बातें में ज़्यादा जानें.

कैसे ठीक करें

अगर फ़ोकस का क्रम गलत लगता है, तो आपको DOM में एलिमेंट को फिर से व्यवस्थित करना चाहिए. इससे, टैब का क्रम ज़्यादा स्वाभाविक बन जाता है.

अगर आपने एलिमेंट को विज़ुअल तौर पर बदलने के लिए सीएसएस का इस्तेमाल किया है, तो सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों को बेतुका नेविगेशन दिखेगा. सीएसएस का इस्तेमाल करने के बजाय, एलिमेंट को डीओएम में पहले वाली पोज़िशन पर ले जाएं.

अगर ऑफ़स्क्रीन कॉन्टेंट को अब भी कीबोर्ड कंट्रोल से ऐक्सेस किया जा सकता है, तो tabindex="-1" का इस्तेमाल करके उसे हटाएं.

इस बारे में ज़्यादा जानने के लिए, Tabindex की मदद से फ़ोकस कंट्रोल करना लेख पढ़ें.

संसाधन

पेज पर विज़ुअल ऑर्डर का सोर्स कोड, DOM ऑर्डर का पालन करता है ऑडिट