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

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

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

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

टैब के क्रम का आकलन करते समय, इन दो मुख्य बातों को ध्यान में रखना चाहिए:

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

नेविगेशन में अचानक होने वाले किसी भी बदलाव पर ध्यान दें. साथ ही, स्क्रीन पर न दिखने वाली किसी गतिविधि पर भी ध्यान दें. इसमें टैब करने की सुविधा की मदद से, कॉन्टेंट ऐसे कॉन्टेंट पर पहुंच सकता है जो उसे देखने के लिए सही नहीं है.

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

कैसे ठीक करें

अगर फ़ोकस का क्रम गलत लगता है, तो टैब का क्रम ज़्यादा स्वाभाविक बनाने के लिए, डीओएम में एलिमेंट को फिर से व्यवस्थित करें.

सीएसएस का इस्तेमाल करके एलिमेंट की जगह बदलें. ऐसा इसलिए, क्योंकि सहायक टेक्नोलॉजी इस्तेमाल करने वाले लोगों को बिना मतलब के नेविगेशन का अनुभव होगा. सीएसएस का इस्तेमाल करने के बजाय, एलिमेंट को DOM में किसी पिछली पोज़िशन पर ले जाएं.

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

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

संसाधन

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