Focus Order — bu nədir, prinsipləri və mobil tətbiqlərdə necə qurulur

Əlçatanlıqda Focus Order nədir

Focus Order — istifadəçinin alternativ giriş üsulları: klaviatura (Tab), Switch Control (addım-addım), VoiceOver (sağa/sola jest) və ya TalkBack vasitəsilə interaktiv elementlər arasında hərəkət etdiyi ardıcıllıqdır. Siçan və ya toxunma ekranından fərqli olaraq, istifadəçi birbaşa elementi seçir, fokus naviqasiyası xəttidir — hər addım fokusu növbəti elementə aparır.

Apple HIG, 2024-ə görə, VoiceOver vizual yerləşmə əsasında qurulan əlçatanlıq ağacındakı elementlərin sırasını istifadə edir: sol yuxarı künc → sağ aşağı künc. Ekran mürəkkəb düzən (sütunlar, Grid, ZStack) ehtiva edərsə, ağac vizual sıraya uyğun olmaya bilər.

WCAG 2.4.3 prinsipi: “Əgər veb-səhifəni bölmələr üzrə ardıcıl olaraq gəzmək olarsa və fokus sırası məna daşıyırsa, fokus mənanı və idarəolunma qabiliyyətini qoruyan ardıcıllıqla izləməlidir”. İstisna: fokusun diqqəti cəlb etmək üçün sıçraya biləcəyi dinamik məzmun (xəbərdarlıqlar, modal pəncərələr).

Focus Order əlçatanlıq üçün niyə vacibdir

Switch Control istifadəçisi (motor pozuntuları olan şəxslər) elementlər arasında avtomatik — dövrədən dövrəyə hərəkət edir. Sıra pozulubsa, istifadəçi formanı doldurmağa 3 dəfə çox vaxt sərf edir. Deque University, 2024-ə görə, düzgün Focus Order köməkçi texnologiyalar istifadəçiləri üçün formanın doldurulma müddətini 60% azaldır.

Focus Order və modal pəncərələr

Modal pəncərələrə xüsusi diqqət yetirilməlidir. Modal pəncərə açıldıqdan sonra fokus dərhal modalın içindəki ilk interaktiv elementə (adətən “Bağla” və ya “Təsdiqlə” düyməsi) keçməlidir. Bağlandıqdan sonra — modal pəncərəni çağıran elementə qayıtmalıdır. Bu, WCAG 2.4.3 tələbidir və eyni zamanda geniş yayılmış səhvdir.

iOS: fokus sırasının idarə edilməsi

iOS-da VoiceOver avtomatik olaraq həndəsə əsasında sıra qurur: elementlər Y-ə, sonra X-ə görə sıralanır. Mürəkkəb quruluşa malik ekranlar üçün bu sıra düzgün olmaya bilər — tərtibatçı müdaxilə etməlidir.

Əsas alətlər:

• shouldGroupAccessibilityElement — uşaq elementləri bir məntiqi blokda birləşdirir
• accessibilityElements — uşaq elementlərinin xüsusi sırasını təyin edən massiv
• UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, element) — fokusun proqram yerdəyişməsi

Məhsul kartı üçün xüsusi sıranın təyin edilməsi nümunəsi:

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

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

Əməliyyatdan sonra fokusun proqram yerdəyişməsi üçün:

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

shouldGroupAccessibilityElement praktikada

shouldGroupAccessibilityElement xüsusiyyəti kolleksiyalardakı kartlar üçün faydalıdır. Ana kartda true təyin edilərsə, VoiceOver bütün kartı bir element kimi qəbul edir. İstifadəçi bütün kartı aktivləşdirmək üçün iki dəfə toxuna və ya daxildə naviqasiya üçün rotoru konfiqurasiya edə bilər. UICollectionViewCell və UITableViewCell üçün tövsiyə olunur.

Android: fokus istiqaməti atributları

Android-də TalkBack də həndəsi sıradan istifadə edir, lakin aşkar nextFocus* atributları prioritet təşkil edir. Bu atributlar XML-də və ya proqram olaraq təyin edilir:

Qeydiyyat forması üçün nümunə:

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

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

RecyclerView üçün fokus sırası dinamikdir — onu adapter müyəyyən edir. Hüceyrələr mürəkkəb quruluşa malikdirsə, descendantFocusability = “beforeDescendants” təyin edin və siyahı elementinin qovşağında sıranı göstərin. Jetpack Compose üçün fokus sırası Modifier.focusOrder() və FocusOrder vasitəsilə təyin edilir. Prioritet: previous (uşaq), next (növbəti), custom key.

TouchDelegate, hit area və fokus sahəsi

Element fokus üçün çox kiçikdirsə (44 pt-dən az), iOS-da TouchDelegate və ya Android-də minWidth/minHeight vasitəsilə hit area-nı artırın. Google Material Design, 2024-ə görə, minimum toxunma sahəsi 48×48 dp-dir. VoiceOver və TalkBack elementin bounding box-na fokuslanır. 30 pt-dən kiçik elementlər jest fokusu üçün əlçatmaz ola bilər — istifadəçi fiziki olaraq barmağı ilə onlara dəyə bilməz.

WCAG 2.4.3-ün tipik pozuntuları

Sıçrayan fokus — əməliyyatdan sonra (məsələn, elementin silinməsi) fokus siyahının əvvəlinə və ya sistem “Geri” düyməsinə keçir. VoiceOver istifadəçisi konteksti itirir. Həll: fokusu silinmiş elementə ən yaxın elementə proqram olaraq yerləşdirin.

Görünməz fokus — element fokus alır, lakin vizual göstərici yoxdur (klaviatura istifadəçiləri harada olduqlarını görmür). iOS-da xüsusi göstəricilər üçün UIAccessibility.isVoiceOverRunning yoxlayın. Deque University, 2024-ə görə, görünməz fokus əlçatanlıq auditinin uğursuz olmasının ikinci ən çox yayılmış səbəbidir.

Modal pəncərələr — modal pəncərə açıldıqdan sonra fokus fon məzmununda qalır. iOS-da modal görünüş avtomatik olaraq fokusu ələ keçirir, əgər modalPresentationStyle = .pageSheet təyin edilibsə. Android-də dialoq konteynerində setFocusable(true) istifadə edin.

Fokus tələsi (focus trap)

Əks problem: fokus modal pəncərənin içərisində ilişib qalır və çıxa bilmir (bağlama xaricində). Bu, yalnız modal pəncərələr üçün icazəlidir — istifadəçi şüurlu şəkildə pəncərəni bağlamalıdır. Adi ekranlar üçün fokus tələsi kritik səhvdir. Həll: modal pəncərənin son elementinin (“Bağla” düyməsi) fokusu geri qaytardığına əmin olun.

Xüsusi ekranlar və proqram fokusu

Xüsusi ekranlar (xəritələr, canvases, oyunlar) üçün avtomatik həndəsi sıra tətbiq olunmur. Tərtibatçı əlçatanlıq ağacını əl ilə qurmalıdır. iOS-da bunun üçün UIAccessibilityContainer metodu yenidən təyin edilir.

Xüsusi canvas üçün nümunə:

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

    override var accessibilityElements: [Any]? {
        get {
            // Fiqurları həndəsəyə görə deyil, Z-indeksinə görə çeşitləyirik
            return shapes.sorted { $0.zIndex < $1.zIndex }
        }
        set {}
    }
}

Android-də xüsusi View üçün onInitializeAccessibilityNodeInfo-ni yenidən təyin edin:

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

Dinamik siyahılar (söhbət, xəbər lent) üçün element əlavə edildikdən sonra fokusu ilk yeni elementə yerləşdirin. iOS-da: UIAccessibility.post(notification: .layoutChanged, argument: newMessage). Android-də: sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED).

AccessibilityFrame və fokus həndəsəsi

iOS elementin çərçivəsi əsasında fokus sahəsini avtomatik müəyyən edir. Element transformasiyaya (transform, rotation) malikdirsə, VoiceOver səhv sahəyə fokuslana bilər. Ekran koordinatlarında accessibilityFrame-i açıq şəkildə təyin edin: element.accessibilityFrame = UIAccessibility.convertToScreenCoordinates(element.bounds, in: element). Bu, VoiceOver-in düzgün sahəni vurğulamasına zəmanət verir.

UIKit Dynamics və əlçatanlıq

Animasiyalı ekranlar (UIKit Dynamics, Lottie, SpriteKit) üçün proqram fokusu xüsusilə vacibdir. VoiceOver dinamik hərəkət edən elementlər üçün əlçatanlıq ağacı qura bilməz. Animasiya konteynerlərində isAccessibilityElement = false və yalnız daxildəki interaktiv elementlərdə true təyin edin.

Fokus sırasının test edilməsi

Əl ilə test: VoiceOver (iOS) və ya TalkBack (Android) yandırın, bütün ardıcıllıqla sağa jest edin. Fokus vizual sıraya — soldan sağa, yuxarıdan aşağı uyğun olmalıdır. Hər bir interaktiv element fokusu dəqiq bir dəfə almalıdır.

Avtomatlaşdırılmış test çətindir, lakin mümkündür:

func testKeyboardFocusOrder() {
    let app = XCUIApplication()
    app.launch()
    app.textFields["Email"].tap()
    // Tab — yalnız aparatura klaviaturası ilə
}

Android üçün Accessibility Testing Framework istifadə edin:

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

Ən etibarlı metod — UI ssenari testi: formanı addım-addım doldurun (Email → Şifrə → Göndər), hər addımın uğurla başa çatdığını yoxlayın. Fokus sırası pozulubsa, ssenari fokusdan kənar elementlə qarşılıqlı əlaqə cəhdində uğursuz olacaq.

Xcode Accessibility Inspector debug üçün

Xcode-də Accessibility Inspector aləti tam əlçatanlıq ağacını göstərir. VoiceOver sırası ilə elementlərdən keçə və dəqiq fokus yolunu görə bilərsiniz. “Audit” vərəqindən Focus Order pozuntularını avtomatik axtarmaq üçün istifadə edin.