Focus Order — यह क्या है, सिद्धांत और मोबाइल ऐप्स में कैसे कॉन्फ़िगर करें

एक्सेसिबिलिटी में Focus Order क्या है

Focus Order वह क्रम है जिसमें उपयोगकर्ता वैकल्पिक इनपुट विधियों का उपयोग करके इंटरैक्टिव तत्वों के बी� जाता है: कीबोर्ड (Tab), Switch Control (कदम दर कदम), VoiceOver (दाएं/बाएं स्वाइप) या TalkBack। माउस या टच स्क्रीन के विपरीत, जहां उपयोगकर्ता सीधे तत्व का चयन करता है, फ़ोकस नेविगेशन रैखिक है — प्रत्येक कदम फ़ोकस को अगले तत्व पर ले जाता है।

Apple HIG, 2024 के अनुसार, VoiceOver एक्सेसिबिलिटी ट्री में तत्वों के क्रम का उपयोग करता है, जो दृश्य स्थान के आधार पर बनाया जाता है: ऊपरी बाएं कोने → निचला दायां कोना। यदि स्क्रीन में जटिल लेआउट (कॉलम, Grid, ZStack) है, तो ट्री दृश्य क्रम से मेल नहीं खा सकता है।

WCAG 2.4.3 सिद्धांत: “यदि किसी वेब पेज को अनुभागों के माध्यम से क्रमिक रूप से नेविगेट किया जा सकता है और फ़ोकस क्रम अर्थ को प्रभावित करता है, तो फ़ोकस को ऐसे क्रम में चलना चाहिए जो अर्थ और संचालन क्षमता को संरक्षित करता है”। अपवाद: गतिशील सामग्री जहां फ़ोकस ध्यान आकर्षित करने के लिए कूद सकता है (चेतावनियाँ, मोडल विंडो)।

Focus Order एक्सेसिबिलिटी के लिए क्यों महत्वपूर्ण है

Switch Control उपयोगकर्ता (मोटर विकलांगता वाले लोग) स्वचालित रूप से तत्वों के बीच जाता है — चक्र दर चक्र। यदि क्रम टूट गया है, तो उपयोगकर्ता फॉर्म पूरा करने में 3 गुना अधिक समय लगाता है। Deque University, 2024 के अनुसार, सही Focus Order सहायक तकनीक उपयोगकर्ताओं के लिए फॉर्म पूरा करने का समय 60% कम कर देता है।

Focus Order और मोडल विंडो

विशेष ध्यान — मोडल विंडो। मोडल खोलने के बाद, फ़ोकस को तुरंत मोडल के अंदर पहले इंटरैक्टिव तत्व पर जाना चाहिए (आमतौर पर “बंद करें” या “पुष्टि करें” बटन)। बंद करने के बाद — उस तत्व पर वापस आना चाहिए जिसने मोडल को ट्रिगर किया। यह WCAG 2.4.3 की आवश्यकता है और साथ ही एक सामान्य गलती है।

iOS: फ़ोकस क्रम प्रबंधन

iOS में, VoiceOver ज्यामिति के आधार पर स्वचालित रूप से क्रम बनाता है: तत्वों को Y द्वारा, फिर X द्वारा क्रमबद्ध किया जाता है। जटिल संरचना वाली स्क्रीन के लिए, यह क्रम गलत हो सकता है — डेवलपर को हस्तक्षेप करना चाहिए।

मुख्य उपकरण:

• shouldGroupAccessibilityElement — चाइल्ड तत्वों को एक तार्किक ब्लॉक में समूहित करता है
• accessibilityElements — चाइल्ड तत्वों का कस्टम क्रम परिभाषित करने वाली ऐरे
• UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, element) — प्रोग्रामेटिक फ़ोकस संचलन

उत्पाद कार्ड के लिए कस्टम क्रम सेट करने का उदाहरण:

class ProductCardView: UIView {
    let titleLabel = UILabel()
    let priceLabel = UILabel()
    let buyButton = UIButton()

    override var accessibilityElements: [Any]? {
        get {
            return [titleLabel!, priceLabel!, buyButton!]
        }
        set {}
    }
}

क्रिया के बाद प्रोग्रामेटिक फ़ोकस संचलन के लिए:

UIAccessibility.post(
    notification: .layoutChanged,
    argument: newlyAddedItem
)

व्यवहार में shouldGroupAccessibilityElement

shouldGroupAccessibilityElement गुण संग्रह में कार्ड के लिए उपयोगी है। यदि पैरेंट कार्ड पर true सेट किया जाता है, तो VoiceOver पूरे कार्ड को एक तत्व के रूप में देखता है। उपयोगकर्ता पूरे कार्ड को सक्रिय करने के लिए डबल-टैप कर सकता है, या आंतरिक नेविगेशन के लिए रोटर कॉन्फ़िगर कर सकता है। UICollectionViewCell और UITableViewCell के लिए अनुशंसित।

Android: फ़ोकस दिशा विशेषताएँ

Android में, TalkBack भी ज्यामितीय क्रम का उपयोग करता है, लेकिन स्पष्ट nextFocus* विशेषताओं को प्राथमिकता दी जाती है। ये विशेषताएँ XML में या प्रोग्रामेटिक रूप से सेट की जाती हैं:

पंजीकरण फॉर्म के लिए उदाहरण:

<EditText
    android:id="@+id/field_email"
    android:nextFocusDown="@+id/field_password" />

<EditText
    android:id="@+id/field_password"
    android:nextFocusDown="@+id/btn_submit" />

RecyclerView के लिए, फ़ोकस क्रम गतिशील है — एडॉप्टर द्वारा निर्धारित। यदि कोशिकाओं में जटिल संरचना है, तो descendantFocusability = “beforeDescendants” सेट करें और सूची आइटम नोड में क्रम परिभाषित करें। Jetpack Compose के लिए, फ़ोकस क्रम Modifier.focusOrder() और FocusOrder के माध्यम से सेट किया जाता है। प्राथमिकता: previous (चाइल्ड), next (अगला), कस्टम कुंजी।

TouchDelegate, हिट क्षेत्र और फ़ोकस क्षेत्र

यदि कोई तत्व फ़ोकस के लिए बहुत छोटा है (44pt से कम), तो iOS में TouchDelegate या Android में minWidth/minHeight के माध्यम से हिट क्षेत्र बढ़ाएँ। Google Material Design, 2024 के अनुसार, न्यूनतम स्पर्श क्षेत्र 48×48dp है। VoiceOver और TalkBack तत्व के बाउंडिंग बॉक्स पर फ़ोकस करते हैं। 30pt से छोटे तत्व जेस्चर फ़ोकस के लिए अप्राप्य हो सकते हैं — उपयोगकर्ता शारीरिक रूप से उन्हें टैप नहीं कर सकता।

WCAG 2.4.3 के सामान्य उल्लंघन

कूदता फ़ोकस — जब किसी क्रिया (जैसे, तत्व हटाना) के बाद फ़ोकस सूची की शुरुआत या सिस्टम “वापस” बटन पर चला जाता है। VoiceOver उपयोगकर्ता संदर्भ खो देता है। समाधान: हटाए गए तत्व के निकटतम तत्व पर प्रोग्रामेटिक रूप से फ़ोकस ले जाएँ।

अदृश्य फ़ोकस — एक तत्व फ़ोकस प्राप्त करता है लेकिन कोई दृश्य संकेतक नहीं है (कीबोर्ड उपयोगकर्ता नहीं देख सकते कि वे कहाँ हैं)। iOS में, कस्टम संकेतकों के लिए UIAccessibility.isVoiceOverRunning जांचें। Deque University, 2024 के अनुसार, अदृश्य फ़ोकस एक्सेसिबिलिटी ऑडिट में विफलता का दूसरा सबसे आम कारण है।

मोडल — मोडल खोलने के बाद फ़ोकस पृष्ठभूमि सामग्री पर बना रहता है। iOS में, मोडल व्यू स्वचालित रूप से फ़ोकस कैप्चर करता है यदि modalPresentationStyle = .pageSheet सेट है। Android में, डायलॉग कंटेनर पर setFocusable(true) का उपयोग करें।

फ़ोकस ट्रैप

उलटी समस्या: फ़ोकस मोडल के अंदर फंस जाता है और बाहर नहीं निकल सकता (बंद करने के अलावा)। यह केवल मोडल विंडो के लिए स्वीकार्य है — उपयोगकर्ता को जानबूझकर विंडो बंद करनी चाहिए। सामान्य स्क्रीन के लिए, फ़ोकस ट्रैप एक गंभीर त्रुटि है। समाधान: सुनिश्चित करें कि मोडल का अंतिम तत्व (“बंद करें” बटन) फ़ोकस वापस भेजता है।

कस्टम स्क्रीन और प्रोग्रामेटिक फ़ोकस

कस्टम स्क्रीन (मानचित्र, कैनवास, गेम) के लिए स्वचालित ज्यामितीय क्रम लागू नहीं होता। डेवलपर को मैन्युअल रूप से एक्सेसिबिलिटी ट्री बनाना होगा। iOS में, इसके लिए UIAccessibilityContainer विधि को ओवरराइड किया जाता है।

कस्टम कैनवास के लिए उदाहरण:

class CanvasView: UIView {
    var shapes: [ShapeView] = []

    override var accessibilityElements: [Any]? {
        get {
            // आकृतियों को Z-इंडेक्स द्वारा क्रमित करें, ज्यामिति द्वारा नहीं
            return shapes.sorted { $0.zIndex < $1.zIndex }
        }
        set {}
    }
}

Android में, कस्टम View के लिए onInitializeAccessibilityNodeInfo ओवरराइड करें:

override fun onInitializeAccessibilityNodeInfo(
    info: AccessibilityNodeInfo
) {
    super.onInitializeAccessibilityNodeInfo(info)
    info.addChild(firstElement)
    info.addChild(secondElement)
    info.isFocusable = true
}

गतिशील सूचियों (चैट, समाचार फ़ीड) के लिए, तत्व जोड़ने के बाद फ़ोकस को पहले नए तत्व पर ले जाएँ। iOS में: UIAccessibility.post(notification: .layoutChanged, argument: newMessage)। Android में: sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED)।

AccessibilityFrame और फ़ोकस ज्यामिति

iOS तत्व के फ्रेम के आधार पर स्वचालित रूप से फ़ोकस क्षेत्र निर्धारित करता है। यदि तत्व में परिवर्तन (transform, rotation) है, तो VoiceOver गलत क्षेत्र पर फ़ोकस कर सकता है। स्क्रीन निर्देशांक में स्पष्ट रूप से accessibilityFrame सेट करें: element.accessibilityFrame = UIAccessibility.convertToScreenCoordinates(element.bounds, in: element)। यह सुनिश्चित करता है कि VoiceOver सही क्षेत्र को हाइलाइट करे।

UIKit Dynamics और एक्सेसिबिलिटी

एनिमेटेड स्क्रीन (UIKit Dynamics, Lottie, SpriteKit) के लिए, प्रोग्रामेटिक फ़ोकस विशेष रूप से महत्वपूर्ण है। VoiceOver गतिशील रूप से चलने वाले तत्वों के लिए एक्सेसिबिलिटी ट्री नहीं बना सकता। एनिमेशन कंटेनर पर isAccessibilityElement = false और अंदर के केवल इंटरैक्टिव तत्वों पर true सेट करें।

फ़ोकस क्रम का परीक्षण

मैन्युअल परीक्षण: VoiceOver (iOS) या TalkBack (Android) चालू करें, पूरे अनुक्रम में दाएं स्वाइप करें। फ़ोकस को दृश्य क्रम का पालन करना चाहिए — बाएं से दाएं, ऊपर से नीचे। प्रत्येक इंटरैक्टिव तत्व को ठीक एक बार फ़ोकस प्राप्त करना चाहिए।

स्वचालित परीक्षण चुनौतीपूर्ण है लेकिन संभव है:

func testKeyboardFocusOrder() {
    let app = XCUIApplication()
    app.launch()
    app.textFields["Email"].tap()
    // Tab — केवल हार्डवेयर कीबोर्ड के साथ
}

Android के लिए, Accessibility Testing Framework का उपयोग करें:

@Test
fun testFocusOrder() {
    onView(withId(R.id.fieldEmail))
        .check(matches(isFocusable()))
    onView(withId(R.id.fieldEmail))
        .perform(focus())
    onView(withId(R.id.fieldPassword))
        .check(matches(isFocused()))
}

सबसे विश्वसनीय तरीका एक UI परिदृश्य परीक्षण है: फॉर्म को चरण दर चरण भरें (ईमेल → पासवर्ड → सबमिट), जाँच करें कि प्रत्येक चरण सफलतापूर्वक पूरा होता है। यदि फ़ोकस क्रम टूट गया है, तो फ़ोकस से बाहर के तत्व के साथ बातचीत करने का प्रयास करने पर परिदृश्य विफल हो जाएगा।

डीबगिंग के लिए Xcode Accessibility Inspector

Xcode में Accessibility Inspector उपकरण पूरा एक्सेसिबिलिटी ट्री दिखाता है। आप VoiceOver क्रम में तत्वों के माध्यम से चल सकते हैं और सटीक फ़ोकस पथ देख सकते हैं। Focus Order उल्लंघनों के स्वचालित पता लगाने के लिए “Audit” टैब का उपयोग करें।