Focus Order — ano ito, mga prinsipyo, at kung paano ito i-configure sa mga mobile app

Ano ang Focus Order sa aksesibilidad

Focus Order ang pagkakasunod-sunod kung saan gumagalaw ang user sa pagitan ng mga interaktibong elemento gamit ang mga alternatibong paraan ng input: keyboard (Tab), Switch Control (hakbang-hakbang), VoiceOver (galaw pakanan/kaliwa), o TalkBack. Hindi tulad ng mouse o touch screen, kung saan direktang pinipili ng user ang isang elemento, linear ang navigation ng focus — ang bawat hakbang ay naglilipat ng focus sa susunod na elemento.

Ayon sa Apple HIG, 2024, ginagamit ng VoiceOver ang pagkakasunod-sunod ng mga elemento sa accessibility tree, na binuo batay sa biswal na pagkakaayos: kaliwang itaas na sulok → kanang ibabang sulok. Kung naglalaman ang screen ng kumplikadong layout (mga column, Grid, ZStack), maaaring hindi tumugma ang tree sa biswal na pagkakasunod-sunod.

Ang prinsipyo ng WCAG 2.4.3: "Kung ang isang web page ay maaaring i-navigate nang sunud-sunod bawat seksyon at ang pagkakasunod-sunod ng focus ay nakakaapekto sa kahulugan, dapat sundin ng focus ang isang pagkakasunod-sunod na nagpapanatili sa kahulugan at sa kakayahang gumana". Pagbubukod: dynamic na content kung saan maaaring tumalon ang focus upang makaakit ng atensyon (mga babala, modal window).

Bakit mahalaga ang Focus Order para sa aksesibilidad

Ang user ng Switch Control (mga taong may motor impairments) ay awtomatikong gumagalaw sa pagitan ng mga elemento — cycle pagkatapos ng cycle. Kung nasira ang pagkakasunod-sunod, gumugugol ang user ng 3 beses na mas maraming oras upang kumpletuhin ang isang form. Ayon sa Deque University, 2024, ang tamang Focus Order ay nagbabawas ng oras sa pagpuno ng form ng 60% para sa mga user ng pantulong na teknolohiya.

Focus Order at mga modal window

Ang espesyal na atensyon ay ibinibigay sa mga modal window. Pagkatapos buksan ang isang modal window, dapat agad na ilipat ang focus sa unang interaktibong elemento sa loob ng modal (karaniwan ay ang pindutang "Isara" o "Kumpirmahin"). Pagkatapos isara — bumalik sa elementong nagbukas ng modal window. Ito ay isang kinakailangan ng WCAG 2.4.3 at kasabay nito ay isang karaniwang pagkakamali.

iOS: pamamahala ng pagkakasunod-sunod ng focus

Sa iOS, awtomatikong binuo ng VoiceOver ang pagkakasunod-sunod batay sa geometry: ang mga elemento ay pinag-uuri ayon sa Y, pagkatapos ay ayon sa X. Para sa mga screen na may kumplikadong istraktura, maaaring hindi tama ang pagkakasunod-sunod na ito — dapat mamagitan ang developer.

Ang mga pangunahing tool:

• shouldGroupAccessibilityElement — pinagsasama ang mga child element sa isang lohikal na bloke
• accessibilityElements — isang array na nagtatakda ng custom na pagkakasunod-sunod ng mga child element
• UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, element) — programatikong paglipat ng focus

Halimbawa ng pagtatakda ng custom na pagkakasunod-sunod para sa isang card ng produkto:

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

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

Para sa programatikong paglipat ng focus pagkatapos ng isang aksyon:

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

shouldGroupAccessibilityElement sa praktika

Ang property na shouldGroupAccessibilityElement ay kapaki-pakinabang para sa mga card sa mga koleksyon. Kung itatakda ang true sa parent na card, itinuturing ng VoiceOver ang buong card bilang isang elemento. Maaaring i-double tap ng user upang i-activate ang buong card o i-configure ang rotor para sa navigation sa loob nito. Inirerekomenda para sa UICollectionViewCell at UITableViewCell.

Android: mga attribute ng direksyon ng focus

Sa Android, gumagamit din ang TalkBack ng geometric na pagkakasunod-sunod, ngunit binibigyan ng prayoridad ang mga explicit na attribute na nextFocus*. Ang mga attribute na ito ay itinakda sa XML o programatically:

Halimbawa para sa form ng pagpaparehistro:

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

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

Para sa RecyclerView, dynamic ang pagkakasunod-sunod ng focus — ito ay tinutukoy ng adapter. Kung ang mga cell ay may kumplikadong istraktura, itakda ang descendantFocusability = "beforeDescendants" at tukuyin ang pagkakasunod-sunod sa node ng elemento ng listahan. Para sa Jetpack Compose, itinakda ang pagkakasunod-sunod ng focus sa pamamagitan ng Modifier.focusOrder() at FocusOrder. Prayoridad: previous (child), next (susunod), custom key.

TouchDelegate, hit area, at lugar ng focus

Kung masyadong maliit ang elemento para sa focus (mas mababa sa 44pt), palakihin ang hit area sa pamamagitan ng TouchDelegate sa iOS o minWidth/minHeight sa Android. Ayon sa Google Material Design, 2024, ang minimum na lugar ng pagpindot ay 48×48dp. Ang VoiceOver at TalkBack ay nakatutok sa bounding box ng elemento. Ang mga elementong mas maliit sa 30pt ay maaaring hindi ma-access para sa gesture focus — hindi maabot ng user ang mga ito nang pisikal gamit ang daliri.

Mga karaniwang paglabag sa WCAG 2.4.3

Tumatalon na focus — kapag pagkatapos ng isang aksyon (halimbawa, pagtanggal ng elemento) ang focus ay lumilipat sa simula ng listahan o sa system button na "Bumalik". Nawawalan ng konteksto ang user ng VoiceOver. Solusyon: ilipat ang focus nang programatically sa elementong pinakamalapit sa tinanggal na elemento.

Hindi nakikitang focus — tumatanggap ang elemento ng focus, ngunit walang biswal na indicator (hindi nakikita ng mga user ng keyboard kung nasaan sila). Sa iOS, suriin ang UIAccessibility.isVoiceOverRunning para sa mga custom na indicator. Ayon sa Deque University, 2024, ang hindi nakikitang focus ay ang pangalawang pinakakaraniwang dahilan ng pagkabigo sa audit ng aksesibilidad.

Mga modal window — nananatili ang focus sa background na content pagkatapos buksan ang isang modal window. Sa iOS, awtomatikong nakukuha ng modal view ang focus kung nakatakda ang modalPresentationStyle = .pageSheet. Sa Android, gamitin ang setFocusable(true) sa container ng dialog.

Focus trap (bitag ng focus)

Ang kabaligtaran na problema: ang focus ay nakulong sa loob ng modal window at hindi makalabas (maliban sa pagsasara). Ito ay lamang pinahihintulutan para sa mga modal window — dapat na sinasadyang isara ng user ang window. Para sa mga ordinaryong screen, ang focus trap ay isang kritikal na pagkakamali. Solusyon: siguraduhin na ang huling elemento ng modal window (ang pindutang "Isara") ay nagbabalik ng focus.

Mga custom na screen at programatikong focus

Para sa mga custom na screen (mga mapa, canvas, laro), hindi naaangkop ang awtomatikong geometric na pagkakasunod-sunod. Dapat na manu-manong buuin ng developer ang accessibility tree. Sa iOS, para dito ay minamana ang paraang UIAccessibilityContainer.

Halimbawa para sa isang custom na canvas:

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

    override var accessibilityElements: [Any]? {
        get {
            // Inuuri namin ang mga hugis ayon sa Z-index, hindi ayon sa geometry
            return shapes.sorted { $0.zIndex < $1.zIndex }
        }
        set {}
    }
}

Sa Android para sa custom na View, i-override ang onInitializeAccessibilityNodeInfo:

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

Para sa mga dynamic na listahan (chat, news feed), pagkatapos magdagdag ng elemento, tawagin ang paglipat ng focus sa unang bagong elemento. Sa iOS: UIAccessibility.post(notification: .layoutChanged, argument: newMessage). Sa Android: sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED).

AccessibilityFrame at geometry ng focus

Awtomatikong tinutukoy ng iOS ang lugar ng focus batay sa frame ng elemento. Kung ang elemento ay may transformasyon (transform, rotation), maaaring tumuon ang VoiceOver sa maling lugar. Itakda nang explicit ang accessibilityFrame sa mga coordinate ng screen: element.accessibilityFrame = UIAccessibility.convertToScreenCoordinates(element.bounds, in: element). Tinitiyak nito na itinatampok ng VoiceOver ang tamang lugar.

UIKit Dynamics at aksesibilidad

Para sa mga animated na screen (UIKit Dynamics, Lottie, SpriteKit), napakahalaga ng programatikong focus. Hindi makakagawa ang VoiceOver ng accessibility tree para sa mga dynamic na gumagalaw na elemento. Itakda ang isAccessibilityElement = false sa mga container ng animation at true lamang sa mga interaktibong elemento sa loob.

Pagsubok sa pagkakasunod-sunod ng focus

Manu-manong pagsubok: i-on ang VoiceOver (iOS) o TalkBack (Android), gumawa ng galaw pakanan sa buong pagkakasunod-sunod. Dapat sundin ng focus ang biswal na pagkakasunod-sunod — mula kaliwa pakanan, mula itaas pababa. Ang bawat interaktibong elemento ay dapat tumanggap ng focus nang eksaktong isang beses.

Automated na pagsubok ay mahirap, ngunit posible:

func testKeyboardFocusOrder() {
    let app = XCUIApplication()
    app.launch()
    app.textFields["Email"].tap()
    // Tab — lamang sa hardware keyboard
}

Para sa Android, gamitin ang 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()))
}

Ang pinaka-maaasahang paraan — UI test ng senaryo: punan ang form nang hakbang-hakbang (Email → Password → Ipadala), suriin na bawat hakbang ay nagtatagumpay. Kung nasira ang pagkakasunod-sunod ng focus, mabibigo ang senaryo kapag sinubukang makipag-ugnayan sa isang elementong nasa labas ng focus.

Xcode Accessibility Inspector para sa pag-debug

Ang tool na Accessibility Inspector sa Xcode ay nagpapakita ng buong accessibility tree. Maaari kang maglakad sa mga elemento sa pagkakasunod-sunod ng VoiceOver at makita ang eksaktong landas ng focus. Gamitin ang tab na "Audit" para sa awtomatikong paghahanap ng mga paglabag sa Focus Order.