इंटरैक्टिव कंट्रोल, कीबोर्ड पर फ़ोकस करने लायक होते हैं

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

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

यह जांचने के लिए कि कस्टम कंट्रोल फ़ोकस करने लायक है या नहीं और फ़ोकस इंडिकेटर दिखाता है, अपनी साइट पर टैब करके शुरुआत करें. एक कंट्रोल से दूसरे कंट्रोल पर जाने के लिए, TAB (या SHIFT + TAB) का इस्तेमाल करें. साथ ही, ऐरो बटन के साथ-साथ, ENTER और SPACE की वैल्यू में बदलाव करने के लिए, इनका इस्तेमाल करें (कीबोर्ड ऐक्सेस की बुनियादी बातें भी देखें):

क्या आपके पास पेज पर मौजूद सभी इंटरैक्टिव कंट्रोल को ऐक्सेस करने की सुविधा है? क्या हर इंटरैक्टिव कंट्रोल पर फ़ोकस इंडिकेटर मौजूद है?

कैसे ठीक करें

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

कस्टम कंट्रोल पर फ़ोकस करने के लिए, tabindex="0" का इस्तेमाल करके नैचुरल टैब क्रम में कस्टम कंट्रोल एलिमेंट डालें (Tabindex की मदद से फ़ोकस कंट्रोल करना भी देखें). उदाहरण के लिए:

<div tabindex="0">Focus me with the TAB key</div>

आपको कस्टम कंट्रोल एलिमेंट में सही ARIA भूमिकाएं भी जोड़नी पड़ सकती हैं. पसंद के मुताबिक बनाए गए कंट्रोल में ARIA के रोल हैं देखें.

अगर आपको फ़ोकस इंंडिकेटर नहीं दिख रहा है, तो हमेशा फ़ोकस इंंडिकेटर दिखाने के लिए, :focus का इस्तेमाल करें. इस बात से कोई फ़र्क़ नहीं पड़ता कि टैब पर टैब करने के लिए माउस या कीबोर्ड का इस्तेमाल किया जाता है या नहीं, बटन का फ़ोकस इंडिकेटर हमेशा एक जैसा दिखता है.(फ़ोकस की स्टाइल भी देखें).

यह क्यों मायने रखता है

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

इस बारे में ज़्यादा जानने के लिए, सुलभता की समीक्षा करने का तरीका लेख पढ़ें.

संसाधन