मोडल के भीतर फ़ोकस को रोकना

Modal खुला होने पर keyboard का focus उसके अंदर ही रहना चाहिए। यदि Tab पीछे के पृष्ठ पर चला जाता है, तो दृष्टिहीन उपयोगकर्ता ऐसी सामग्री में भटक जाते हैं जिसे वे देख नहीं सकते।

showModal() से खोला गया वास्तविक dialog आपके लिए focus को अपने-आप रोककर रखता है। यही उसे div की तुलना में प्राथमिकता देने का एक बड़ा कारण है।

यदि आप div से custom modal बनाते हैं, तो आपको स्वयं trap focus करना होगा, क्योंकि Tab को पृष्ठ पर बाहर जाने से रोकने वाली कोई व्यवस्था अपने-आप नहीं होती।

सबसे पहले, खुलते समय focus को अंदर modal में भेजें—आमतौर पर पहले नियंत्रण या शीर्षक पर—ताकि उपयोगकर्ता सही स्थान से शुरुआत करे।

Modal के focusable आइटम इकट्ठा करें: लिंक, बटन, inputs और tabindex वाली हर चीज़। चक्र बनाने के लिए आपको पहला और आखिरी तत्व चाहिए।

जब last तत्व पर Tab दबाया जाए, तो focus को पहले तत्व पर वापस भेजें। इससे उपयोगकर्ता बाहर जाने के बजाय उसी दायरे में घूमता रहता है।

पहले तत्व पर Shift+Tab को भी संभालें: focus को आखिरी तत्व पर भेजें, ताकि पीछे की ओर Tab करने पर भी वह सीमित रहे।

सीमाओं पर आपको preventDefault() कॉल करना होगा, वरना आपका कोड उसे दूसरी जगह भेजने से पहले ब्राउज़र focus को बाहर ले जाएगा।

पहला और आखिरी तत्व चुनते समय disabled या छिपे हुए तत्वों को छोड़ दें, क्योंकि वे वास्तव में focus प्राप्त नहीं कर सकते।

Focus को रोकना, पीछे के पृष्ठ को inert बनाने के साथ किया जाना चाहिए, ताकि modal खुले होने पर गलती से किया गया क्लिक या स्क्रीन रीडर भी वहां न पहुंच सके।

पूरे modal में Tab दबाते जाएं और देखें कि focus ring बिना बाहर निकले चक्र पूरा करती है। यह पूरा चक्र साबित करता है कि रोकथाम सही काम कर रही है। ✅

आपने सीखा कि खुलते ही focus को अंदर ले जाना है और दोनों सीमाओं पर उसका चक्र बनाना है, ताकि keyboard उपयोगकर्ता modal के अंदर तब तक रहें जब तक वे उसे बंद करना न चुनें। 🎯