Focus Order — bu nima, mobil ilovalarda prinsiplari va qanday sozlash

Accessibility da Focus Order nima

Focus Order — bu foydalanuvchi muqobil kiritish usullari: klaviatura (Tab), Switch Control (qadam-baqadam), VoiceOver (o$ng/Chapga jest) yoki TalkBack yordamida interaktiv elementlar o'rtasida harakatlanadigan ketma-ketlikdir. Sichqoncha yoki sensorli ekrandan farqli o'laroq, foydalanuvchi elementni to$g$ridan-to$g$ri tanlaydi, fokusli navigatsiya chiziqli — har bir qadam fokusni keyingi elementga o'tkazadi.

Apple HIG, 2024 ma'lumotlariga ko'ra, VoiceOver vizual joylashuv asosida qurilgan accessibility daraxtidagi elementlar tartibidan foydalanadi: yuqori chap burchak → pastki o$ng burchak. Agar ekran murakkab layoutni (ustunlar, Grid, ZStack) o'z ichiga olsa, daraxt vizual tartibga mos kelmasligi mumkin.

WCAG 2.4.3 printsipi: ,Agar veb-sahifani ketma-ket ko$chirish mumkin bo$lsa va fokus tartibi mazmunga ta$sir qilsa, unda fokus mazmun va boshqarish imkoniyatini saqlaydigan tartibda bo$lishi kerak". Istisno: diqqatni jalb qilish uchun fokus sakrashi mumkin bo$lgan dinamik kontent (ogohlantirishlar, modal oynalar).

Nega Focus Order accessibility uchun muhim

Switch Control foydalanuvchisi (motor buzilishlari bo$lgan odamlar) elementlar bo$ylab avtomatik ravishda harakatlanadi — tsikldan tsiklga. Agar tartib buzilgan bo$lsa, foydalanuvchi formani to$ldirishga 3 baravar ko$proq vaqt sarflaydi. Deque University, 2024 ma$lumotlariga ko$ra, to$g$ri Focus Order yordamchi texnologiyalar foydalanuvchilari uchun formani to$ldirish vaqtini 60% ga qisqartiradi.

Focus Order va modal oynalar

Modal oynalarga alohida e$tibor. Modal oyna ochilgandan so$ng, fokus darhol modal ichidagi birinchi interaktiv elementga (odatda ,Yopish" yoki ,Tasdiqlash" tugmasi) o$tishi kerak. Yopilgandan so$ng — modal oynani chaqirgan elementga qaytishi kerak. Bu WCAG 2.4.3 talabi va ayni paytda keng tarqalgan xato.

iOS: fokus tartibini boshqarish

iOS da VoiceOver avtomatik ravishda geometriya asosida tartibni quradi: elementlar Y, keyin X bo$yicha saralanadi. Murakkab tuzilishga ega ekranlar uchun bu tartib noto$g$ri bo$lishi mumkin — ishlab chiquvchi aralashishi kerak.

Asosiy vositalar:

• shouldGroupAccessibilityElement — bola elementlarni bitta mantiqiy blokga birlashtiradi
• accessibilityElements — bola elementlarning maxsus tartibini belgilaydigan massiv
• UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, element) — fokusni dasturiy ko$chirish

Tovar kartochkasi uchun maxsus tartibni belgilash namunasi:

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

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

Harakatdan so$ng fokusni dasturiy ko$chirish uchun:

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

shouldGroupAccessibilityElement amalda

shouldGroupAccessibilityElement xususiyati kolleksiyalardagi kartochkalar uchun foydali. Agar ota-kartochkada true o$rnatilgan bo$lsa, VoiceOver butun kartochkani bitta element sifatida qabul qiladi. Foydalanuvchi kartochkani to$liq faollashtirish uchun ikki marta bosishi yoki ichida navigatsiya uchun rotorni sozlashi mumkin. UICollectionViewCell va UITableViewCell uchun tavsiya etiladi.

Android: fokus yo$nalishi atributlari

Android da TalkBack ham geometrik tartibdan foydalanadi, lekin aniq nextFocus* atributlariga ustunlik beriladi. Ushbu atributlar XML da yoki dasturiy ravishda o$rnatiladi:

Ro$yxatdan o$tish formasi uchun namuna:

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

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

RecyclerView uchun fokus tartibi dinamik — adapter tomonidan belgilanadi. Agar yacheykalar murakkab tuzilishga ega bo$lsa, descendantFocusability = ,beforeDescendants" ni o$rnating va ro$yxat elementi tugunida tartibni belgilang. Jetpack Compose uchun fokus tartibi Modifier.focusOrder() va FocusOrder orqali o$rnatiladi. Prioritet: previous (bola), next (keyingi), custom key.

TouchDelegate, hit area va fokus maydoni

Agar element fokus uchun juda kichik bo$lsa (44pt dan kam), iOS da TouchDelegate orqali yoki Android da minWidth/minHeight orqali hit maydonini oshiring. Google Material Design, 2024 ma$lumotlariga ko$ra, minimal teginish maydoni — 48×48dp. VoiceOver va TalkBack elementning bounding boxiga fokuslanadi. 30pt dan kichik elementlar jest fokusi uchun mavjud bo$lmasligi mumkin — foydalanuvchi barmoq bilan ularga jismonan ura olmaydi.

WCAG 2.4.3 ning odatiy buzilishlari

Sakrovchi fokus — harakatdan so$ng (masalan, elementni o$chirish) fokus ro$yxat boshiga yoki ,Orqaga" tizim tugmasiga o$tadi. VoiceOver foydalanuvchisi kontekstni yo$qotadi. Yechim: fokusni o$chirilgan elementga eng yaqin elementga dasturiy ko$chirish.

Ko$rinmaydigan fokus — element fokus oladi, lekin vizual indikator yo$q (klaviatura foydalanuvchilari qayerda ekanliklarini ko$rmaydilar). iOS da maxsus indikatorlar uchun UIAccessibility.isVoiceOverRunning ni tekshiring. Deque University, 2024 ma$lumotlariga ko$ra, ko$rinmaydigan fokus accessibility auditidan o$tolmaslikning chastota bo$yicha ikkinchi sababidir.

Modal oynalar — modal oyna ochilgandan so$ng fokus fon kontentida qoladi. iOS da modalPresentationStyle = .pageSheet o$rnatilgan bo$lsa, modal view avtomatik ravishda fokusni oladi. Android da dialog konteynerida setFocusable(true) dan foydalaning.

Focus trap (fokus tuzog$i)

Teskari muammo: fokus modal oyna ichida qolib ketadi va chiqa olmaydi (yopishdan tashqari). Bu faqat modal oynalar uchun joiz — foydalanuvchi ongli ravishda oynani yopishi kerak. Oddiy ekranlar uchun focus trap — kritik xato. Yechim: modal oynaning oxirgi elementi (,Yopish" tugmasi) fokusni qaytarib berishiga ishonch hosil qiling.

Maxsus ekranlar va dasturiy fokus

Maxsus ekranlar (xaritalar, canvaslar, o'yinlar) uchun avtomatik geometrik tartib qo$llanilmaydi. Ishlab chiquvchi accessibility daraxtini qo$lda qurishi kerak. iOS da buning uchun UIAccessibilityContainer metodi qayta belgilanadi.

Maxsus canvas uchun namuna:

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

    override var accessibilityElements: [Any]? {
        get {
            // Shakllarni geometriya emas, balki Z-indeks bo$yicha saralaymiz
            return shapes.sorted { $0.zIndex < $1.zIndex }
        }
        set {}
    }
}

Android da maxsus View uchun onInitializeAccessibilityNodeInfo ni qayta belgilang:

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

Dinamik ro$yxatlar (chat, yangiliklar lentasi) uchun element qo$shilgandan so$ng fokusni birinchi yangi elementga ko$chirishni chaqiring. iOS da: UIAccessibility.post(notification: .layoutChanged, argument: newMessage). Android da: sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED).

AccessibilityFrame va fokus geometriyasi

iOS elementning frame asosida fokus maydonini avtomatik aniqlaydi. Agar element transformatsiyaga (transform, rotation) ega bo$lsa, VoiceOver noto$g$ri maydonga fokuslanishi mumkin. Ekran koordinatalarida accessibilityFrame ni aniq belgilang: element.accessibilityFrame = UIAccessibility.convertToScreenCoordinates(element.bounds, in: element). Bu VoiceOver ning to$g$ri maydonni yoritishini kafolatlaydi.

UIKit Dynamics va accessibility

Animatsiyalangan ekranlar (UIKit Dynamics, Lottie, SpriteKit) uchun dasturiy fokus ayniqsa muhim. VoiceOver dinamik harakatlanuvchi elementlar uchun accessibility daraxtini qura olmaydi. Animatsiya konteynerlarida isAccessibilityElement = false va faqat ichidagi interaktiv elementlarda true o$rnating.

Fokus tartibini testlash

Qo$lda testlash: VoiceOver (iOS) yoki TalkBack (Android) ni yoqing, o$ngga jest bilan butun ketma-ketlik bo$ylab o$ting. Fokus vizual tartibga — chapdan o$ngga, yuqoridan pastga amal qilishi kerak. Har bir interaktiv element fokusni aynan bir marta olishi kerak.

Avtomatlashtirilgan testlash qiyin, lekin mumkin:

func testKeyboardFocusOrder() {
    let app = XCUIApplication()
    app.launch()
    app.textFields["Email"].tap()
    // Tab — faqat apparat klaviaturasi bilan
}

Android uchun Accessibility Testing Framework dan foydalaning:

@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()))
}

Eng ishonchli usul — stsenariy UI-testi: formani bosqichma-bosqich to$ldiring (Email → Parol → Yuborish), har bir qadam muvaffaqiyatli tugashini tekshiring. Agar fokus tartibi buzilgan bo$lsa, stsenariy fokusdan tashqaridagi element bilan o$zaro aloqada bo$lishga urinishda muvaffaqiyatsiz bo$ladi.

Xcode Accessibility Inspector debag uchun

Xcode dagi Accessibility Inspector vositasi to$liq accessibility daraxtini ko$rsatadi. Siz VoiceOrder tartibida elementlar bo$ylab o$tib, aniq fokus yo$lini ko$rishingiz mumkin. Focus Order buzilishlarini avtomatik qidirish uchun ,Audit" yorlig$idan foydalaning.