Focus Order — یہ کیا ہے، اصول اور موبائل ایپس میں اسے کیسے ترتیب دیا جائے

accessibility میں Focus Order کیا ہے

Focus Order وہ ترتیب ہے جس میں صارف متبادل ان پٹ طریقوں: کی بورڈ (Tab)، Switch Control (قدم بہ قدم)، VoiceOver (دائیں/بائیں سوائپ) یا TalkBack کا استعمال کرتے ہوئے انٹرایکٹو عناصر کے درمیان منتقل ہوتا ہے۔ ماؤس یا ٹچ اسکرین کے برعکس، جہاں صارف براہ راست کسی عنصر کو منتخب کرتا ہے، فوکس نیویگیشن لکیری ہوتی ہے — ہر قدم فوکس کو اگلے عنصر پر لے جاتا ہے۔

Apple HIG، 2024 کے مطابق، VoiceOver accessibility درخت میں عناصر کی ترتیب استعمال کرتا ہے، جو بصری جگہ کی بنیاد پر بنایا جاتا ہے: اوپر بائیں کونے → نیچے دائیں کونے۔ اگر اسکرین میں پیچیدہ ترتیب (کالم، Grid، ZStack) ہے، تو درخت بصری ترتیب سے مطابقت نہیں رکھتا۔

WCAG 2.4.3 کا اصول: «اگر کسی ویب صفحہ کو حصوں کے ذریعے ترتیب وار نیویگیٹ کیا جا سکتا ہے اور فوکس ترتیب معنی کو متاثر کرتی ہے، تو فوکس کو ایسی ترتیب کی پیروی کرنی چاہیے جو معنی اور آپریبلٹی کو محفوظ رکھے»۔ استثنا: متحرک مواد جہاں توجہ مبذول کرنے کے لیے فوکس چھلانگ لگا سکتا ہے (انتباہات، موڈل ونڈوز)۔

Focus Order accessibility کے لیے کیوں اہم ہے

ایک 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 کے مطابق، غیر مرئی فوکس accessibility آڈٹ میں ناکامی کی دوسری سب سے عام وجہ ہے۔

موڈل — موڈل کھولنے کے بعد فوکس پس منظر کے مواد پر رہتا ہے۔ iOS میں، موڈل ویو خود بخود فوکس حاصل کرتا ہے اگر modalPresentationStyle = .pageSheet سیٹ ہو۔ Android میں، ڈائیلاگ کنٹینر پر setFocusable(true) استعمال کریں۔

فوکس ٹریپ

الٹا مسئلہ: فوکس موڈل کے اندر پھنس جاتا ہے اور باہر نہیں نکل سکتا (بند کرنے کے علاوہ)۔ یہ صرف موڈل ونڈوز کے لیے قابل قبول ہے — صارف کو جان بوجھ کر ونڈو بند کرنی چاہیے۔ عام اسکرینوں کے لیے، فوکس ٹریپ ایک سنگین غلطی ہے۔ حل: یقینی بنائیں کہ موڈل کا آخری عنصر («بند کریں» بٹن) فوکس واپس بھیجتا ہے۔

کسٹم اسکرینز اور پروگرامیٹک فوکس

کسٹم اسکرینز (نقشے، کینوس، گیمز) کے لیے خودکار ہندسی ترتیب قابل اطلاق نہیں ہے۔ ڈویلپر کو دستی طور پر accessibility درخت بنانا ہوگا۔ 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 اور accessibility

متحرک اسکرینوں (UIKit Dynamics, Lottie, SpriteKit) کے لیے، پروگرامیٹک فوکس خاص طور پر اہم ہے۔ VoiceOver متحرک طور پر حرکت کرنے والے عناصر کے لیے accessibility درخت نہیں بنا سکتا۔ اینیمیشن کنٹینرز پر 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 کا آلہ مکمل accessibility درخت دکھاتا ہے۔ آپ VoiceOver ترتیب میں عناصر کے ذریعے چل سکتے ہیں اور عین فوکس راستہ دیکھ سکتے ہیں۔ Focus Order کی خلاف ورزیوں کا خودکار پتہ لگانے کے لیے «Audit» ٹیب استعمال کریں۔