Accessibility Trait: lényeg, milyen típusok vannak és hogyan működnek a fejlesztésben

Mi az Accessibility Trait

Accessibility Trait — egy flag, amely egy UIView elemen kerül beállításra a VoiceOver számára történő szemantikus szerep jelzésére. A trait az Apple akadálymentesítési triász három komponensének egyike: Label (név), Hint (leírás), Trait (szerep). Az iOS a UIAccessibilityTraits (UInt64) bitmaszkot használja, ahol minden bit egy adott szerepnek felel meg. A VoiceOver a Label és Hint után olvassa a szerepet: „Gomb Küldés. Megnyitja az űrlapot“ — a „Gomb“ a UIAccessibilityTraitButton trait-nek köszönhetően került hozzáadásra.

Alapértelmezés szerint a UIButton UIAccessibilityTraitButton-t, a UILabel — UIAccessibilityTraitStaticText-t, a UIImageView — UIAccessibilityTraitImage-t kap. Egyéni vezérlők használatakor a fejlesztő köteles manuálisan beállítani a traitet. Az Apple Human Interface Guidelines, 2024, ezt „az akadálymentesítés biztosításának egyik legkritikusabb lépésének“ nevezi.

Megfelelő trait nélkül a felhasználó nem tudja, melyik gesztust alkalmazza: egyetlen érintés (gomb aktiválása), dupla érintés (nagyítás) vagy húzás gesztus (kapcsoló). A trait dönti el, hogy a VoiceOver milyen gesztusokat aktivál az elemen.

A UIAccessibilityTraits technikai megvalósítása

A UIAccessibilityTraits — egy typealias UInt64. Minden trait egy konstans, ahol pontosan egy bit van beállítva. Például UIAccessibilityTraitButton = 0x0000000000000001, UIAccessibilityTraitLink = 0x0000000000000002, UIAccessibilityTraitHeader = 0x0000000000000008. A kombináció bitenkénti VAGY segítségével érhető el: 0x0001 | 0x0008 = 0x0009. A VoiceOver elemzi a maszkot és meghatározza a viselkedést.

Az iOS traitek fő típusai

Az iOS több mint 15 trait konstanst biztosít. Tekintsük át a főbbeket, amelyek az esetek 90%-ában használatosak:

A konstansok elérhetők a UIKit-ben iOS 3.0 óta. iOS 14+-ban a SwiftUI-ban a .accessibilityAddTraits() módosítón keresztül került hozzáadásra a UIAccessibilityTraits támogatása.

Ritka, de hasznos traitek

UIAccessibilityTraitAdjustable — állítható értékekhez (csúszkák, választók, hangerőcsúszkák). A VoiceOver lehetővé teszi a felfelé/lefelé húzást az érték megváltoztatásához az accessibilityIncrement és accessibilityDecrement által meghatározott lépéssel. UIAccessibilityTraitUpdatesFrequently — gyakran változó értékű elemekhez (időzítő, betöltésjelző). A VoiceOver nem olvassa az értéket minden változáskor, hanem szünetet tart. UIAccessibilityTraitAllowsDirectInteraction — olyan elemekhez, amelyekkel a felhasználó közvetlenül interakcióba léphet (billentyűzet, rajzeszköz), a VoiceOver gesztusok kihagyásával.

Traitek kombinálása

Egy elem egyszerre több trait-tel rendelkezhet — a kombináció biten-kénti VAGY (|) segítségével adható meg. Példa: egy gomb, amely jelenleg ki van választva — Button | Selected. A VoiceOver kimondja: „Kiválasztva. Ár szerint szűrve. Gomb“.

Traitek beállítása kódban:

filterButton.accessibilityTraits.insert(.button)
filterButton.accessibilityTraits.insert(.selected)

// Vagy maszkon keresztül:
filterButton.accessibilityTraits = [.button, .selected]

Egyéni UIView-ekhez, ahol a trait nincs alapértelmezés szerint beállítva:

class CustomToggle: UIControl {
    override var accessibilityTraits: UIAccessibilityTraits {
        get {
            if isOn {
                return [.button, .selected]
            } else {
                return .button
            }
        }
        set {}
    }
}

Kombinálási szabály: legfeljebb 3-4 trait elemenként. A túlzott traitek (pl. Button + Link + Header) a VoiceOver bejelentést túl hosszúvá és zavaróvá teszik. Az Apple szerint „minden további tulajdonság növeli a felhasználó kognitív terhelését“.

SwiftUI: trait módosítók

SwiftUI-ban a traitek a .accessibilityAddTraits() és .accessibilityRemoveTraits() módosítókon keresztül állíthatók be. Példa: Text(„Fejléc“).font(.largeTitle).accessibilityAddTraits(.isHeader). A .isHeader módosító hozzáadja a UIAccessibilityTraitHeader-t. A SwiftUI traitek listája: .isButton, .isHeader, .isLink, .isSelected, .isImage, .isSearchField, .isKeyboardKey, .isStaticText, .isSummaryElement, .isToggle, .playsSound, .startsMediaSession, .updatesFrequently, .allowsDirectInteraction, .causesPageTurn, .isModal, .tabBar.

Tipikus hibák a trait kiválasztásakor

StaticText a Button helyett — egy egyéni vezérlő, amely vizuálisan gombnak tűnik, alapértelmezés szerint StaticText traitet kap. A VoiceOver nem kínál aktiváló gesztust, a felhasználó nem tudja „megnyomni“ az elemet. Megoldás: explicit módon állítsa be a .button-t.

Image trait nélkül — egy UIImageView bekapcsolt akadálymentesítéssel Image traitet kap, még akkor is, ha valójában egy gomb a fénykép nagyításához. Rendelje hozzá a .button-t és a „Fénykép nagyítása“ Label-t. A WWDC 2023, „Deliver an Exceptional Accessibility Experience“ szerint az új alkalmazásverziókban az akadálymentesítési regressziók 40%-át pontosan a trait eltérés okozza.

Header minden elemen — a Header trait a képernyő strukturális fejléceihez készült. Ha minden UILabel-t fejléccé tesz, a VoiceOver rotor „Fejlécek“ módja használhatatlanná válik — minden szónál megáll.

Hogyan javítsuk: ellenőrző lista

• Minden interaktív egyéni elem Button, Link vagy Adjustable traitet kap
• A szekció fejlécek Header traitet kapnak (nem StaticText)
• A kép-gombok a kiválasztott állapotban Button + Selected traitet kapnak
• Gesztus nélküli elemek — StaticText vagy Image (csak olvasás)

Regressziós hibák UIButton UIControl-ra cserélésekor

A trait elvesztésének gyakori oka — refaktorálás: a fejlesztő UIButton-t cserél UIControl-ra egyéni megjelenítéshez. A UIButton automatikusan megkapja a Button traitet, a UIControl — nem. Refaktorálás után explicit módon be kell állítani az accessibilityTraits = .button-t. Adjon hozzá egy ellenőrzést a kód-áttekintéshez: „Ha UIButton-t cserélt UIControl-ra — ellenőrizze a traitet“.

Traitek és dinamikus állapotok

A változó állapotú elemekhez (pl. like gomb) a trait-nek dinamikusan kell változnia. „Nem like-olva“ állapotban — Button, „like-olva“ állapotban — Button + Selected + Image (ha van ikon). A VoiceOver megváltoztatja a bejelentést: „Tetszik. Gomb“ vs „Kiválasztva. Tetszik. Gomb“. Használja az accessibilityValue tulajdonságot az állapot átadásához, ha a Selected trait nem elegendő. Vonatkozik a feliratkozás, kedvencek, szűrők és kapcsolók gombjaira.

Android analóg: role és className

Az Android-ban nincs közvetlen analógja a traiteknek. A bitmaszk helyett a következők használatosak:

• className — az AccessibilityNodeInfo.className értéke (android.widget.Button, android.widget.TextView)
• role — attribútum XML-ben (a szerepet a View típusa határozza meg)
• stateDescription — a Selected analógja: állapotleírás hozzáadása (bekapcsolva/kikapcsolva)

Egyéni View-khoz Android-ban felül kell írni az onInitializeAccessibilityNodeInfo metódust:

class CustomButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null
) : View(context, attrs) {

    override fun onInitializeAccessibilityNodeInfo(
        info: AccessibilityNodeInfo
    ) {
        super.onInitializeAccessibilityNodeInfo(info)
        info.className = "android.widget.Button"
        info.isClickable = true
    }
}

A Flutter fejlesztőknek a semanticsRole paramétert kell használniuk a Semantics widgetben: button, header, image, link, textField és mások. Ezen kívül elérhetők a semanticsLabel és semanticsHint — az iOS triász Label + Hint + Trait teljes analógja.

Web analógok: WAI-ARIA role

A mobilalkalmazások webes verzióihoz (PWA, WebView) a WAI-ARIA role attribútumot használják: role="button", role="heading", role="link". Ez az accessibilityTraits közvetlen analógja. Hibrid alkalmazásokban ellenőrizze, hogy a WebView átadja-e az ARIA szerepeket a natív akadálymentesítési rétegnek. Ehhez használja az UIAccessibilityContainerDataTable protokollt iOS-ben vagy a setAccessibilityDelegate-t Android-ban. Az engedélyezett JavaScript-tel rendelkező WebView nem biztos, hogy megfelelően adja át az ARIA szerepeket — tesztelje külön.

AccessibilityNodeInfo: kiegészítő műveletek

Android-ban egyéni műveletek adhatók az AccessibilityNodeInfo-hoz: AccessibilityNodeInfo.AccessibilityAction.ACTION_CLICK és ACTION_LONG_CLICK. Ez a Button trait analógja további gesztusokkal. Csúszkákhoz használja az ACTION_SET_PROGRESS-t — az Adjustable analógja. Spinner és DatePicker esetén — ACTION_SET_SELECTION, ACTION_SET_DATE és ACTION_SET_TIME.

Traitek ellenőrzése és tesztelése

Xcode Accessibility Inspector — a fő eszköz iOS-hez: válassza ki az elemet és nézze meg a Traits mezőt. Megjeleníti a beállított traitek listáját. A VoiceOver rotor „Elemek“ módban lehetővé teszi a képernyő összes vezérlőjének végigjárását.

Automatizált teszt Swift-ben a trait ellenőrzésére:

func testSubmitButtonTrait() {
    let app = XCUIApplication()
    app.launch()
    let submitButton = app.buttons["Küldés"]
    XCTAssertTrue(submitButton.isEnabled)
    // Az XCUIElement nem biztosít közvetlen hozzáférést a traitekhez
    // Ellenőrzés gesztus aktiválásával
    submitButton.tap()
    XCTAssertTrue(app.staticTexts["Űrlap elküldve"].exists)
}

Kézi ellenőrzés VoiceOver-en keresztül: kapcsolja be a VoiceOver-t, húzza az ujját az elemhez, érintse meg kétszer — az elemnek aktiválódnia kell, ha Button. Ha az elem nem reagál a dupla érintésre, a trait helytelen. Használja a Rotor gesztust a módok közötti váltáshoz („Fejlécek“, „Linkek“, „Gombok“) — minden mód csak a megfelelő trait-tel rendelkező elemeket jeleníti meg.

Traitek unit tesztelése iOS-ben

iOS 14 előtt a unit teszteknek nem volt közvetlen hozzáférésük az accessibilityTraits-hez. iOS 14-től kezdve a tulajdonság elérhető: XCTAssertEqual(customButton.accessibilityTraits, .button). Használja ezt a moduláris tesztekben az egyéni vezérlők ellenőrzéséhez. Ajánlott minden új egyéni UIView-t tesztelni a trait helyességére, különösen refaktorálás vagy a szülőosztály megváltoztatása után.