Accessibility Label — mi ez, alapok és hogyan használható iOS és Android rendszerekhez

Mi az Accessibility Label

Accessibility Label egy szöveges tulajdonság, amely meghatározza az elem nevét a segédtechnológiák számára. Amikor a felhasználó az ujját húzza a képernyőn bekapcsolt VoiceOver mellett, a képernyőolvasó felolvassa annak az elemnek a Labeljét, amelyen a fókusz van. Címke nélkül a felhasználó csak az elem típusát hallja: „gomb”, „kép” — a rendeltetés megjelölése nélkül.

A Google I/O 2024, „Accessibility Testing” szerint a bolti alkalmazásokban előforduló kritikus akadálymentesítési jogsértések 35%-a a Label hiányával vagy helytelenségével függ össze. Az Android Accessibility Scanner a címke hiányát a legmagasabb súlyosságú hibaként érzékeli.

Alapvető korlátozás: A Label nem tartalmazhatja az elem típusát. A VoiceOver és TalkBack automatikusan hozzáadja a szerepet (button, header, link) a bejelentéshez. Ha a Label „Küldés gomb”-ot tartalmaz, a felhasználó ezt hallja: „Küldés gomb, gomb” — ismétlődés.

Label és WCAG 4.1.2: Name, Role, Value

WCAG 4.1.2 (A szint) megköveteli, hogy a felhasználói felület minden eleme rendelkezzen programozottan meghatározható névvel (name), szerepkörrel (role) és értékkel (value). Az Accessibility Label biztosítja a nevet. Ha a Label hiányzik, a kritérium megsértettnek minősül, és az alkalmazás nem megy át az alapvető tanúsítványozáson.

iOS: accessibilityLabel tulajdonság

iOS-ben az accessibilityLabel-et az UIAccessibility protokollból minden UIView örökli. Ha az elem szöveget tartalmaz (UIButton title-lel, UILabel text-tel), akkor a Label automatikusan erre a szövegre állítódik. UIImageView, egyéni vezérlők és tárolók esetén a Label-t kézzel kell beállítani.

Példa egy egyéni táblázatcellához:

class CustomTableViewCell: UITableViewCell {
    let titleLabel = UILabel()
    let priceLabel = UILabel()

    override func awakeFromNib() {
        super.awakeFromNib()
        self.isAccessibilityElement = true
        self.accessibilityLabel =
            "\(titleLabel.text ?? "") - \(priceLabel.text ?? "")"
    }
}

Egyéni UIView esetén felülírható az accessibilityLabel getter:

class RatingView: UIView {
    var rating: Int = 5

    override var accessibilityLabel: String? {
        get { return "Értékelés: \(rating) / 5" }
        set {}
    }
}

Apple HIG, 2024 azt javasolja: ha az elem több al-elemből áll (például termékkártya névvel és árral), egyesítse őket egyetlen akadálymentesítési elemmé összetett Label segítségével. Állítsa be az isAccessibilityElement = true értéket a szülőn és false értéket a gyermekeken.

NSAttributedString és accessibilityLabel

Ha a UILabel NSAttributedString-t használ, az accessibilityLabel alapértelmezetten megegyezik a .string-gel (egyszerű szöveg). Ha szemantikailag más értéket kell átadnia (például egy ikon-szimbólum, amely „Csillag”-ként olvasandó a ★ szimbólum helyett), állítsa be explicit módon az accessibilityLabel-t. A VoiceOver nem olvassa értelmesen a Unicode szimbólumokat.

Android: Label contentDescription segítségével

Android-ben a contentDescription tölti be a Label funkcióját ImageView, ImageButton és egyéni View-k esetén. Beépített szöveggel rendelkező TextView és Button esetén nem szükséges contentDescription-t beállítani — a TalkBack automatikusan felolvassa a szöveget.

Programozott beállítás Kotlin segítségével:

binding.iconStar.contentDescription = "Termék a kedvencekben"

// Egyéni nézethez több elemmel
binding.customCard.setContentDescription(
    "\(title) \(price) összegben")

XML-ben dekoratív elemekhez:

<ImageView
    android:contentDescription="@null"
    android:src="@drawable/divider"
    android:importantForAccessibility="no" />

Az importantForAccessibility = "no" tulajdonság teljesen kizárja az elemet az akadálymentesítési fából. iOS-ben ennek megfelelője az isAccessibilityElement = false.

Compose: semantics és contentDescription

Jetpack Compose-ban a Label a semantics módosító segítségével állítható be:

Image(
    painter = painterResource(R.drawable.ic_search),
    contentDescription = "Termék keresése",
    modifier = Modifier.semantics {
        contentDescription = "Termék keresése"
    }
)

A Compose-ban a contentDescription egy kötelező paraméter az Image számára — nélküle a kód nem fordul le (figyelmeztetés). Ez kényszeríti az akadálymentesítés javítását az API tervezésén keresztül.

Label és Hint: a szerepek különbsége

Accessibility Label arra a kérdésre válaszol, hogy „Mi ez az elem?”. Hint (accessibilityHint iOS-ben, kiegészítő szöveg a contentDescription-ben Android-ben) — „Mi történik az interakció során?”. A VoiceOver egymás után mondja ki őket: először a Label-t, majd a Hint-et.

Példa a törlőgombhoz:

• Label: „Törlés”
• Hint: „Visszavonhatatlanul törli a kiválasztott fényképet”
• VoiceOver: „Törlés. Visszavonhatatlanul törli a kiválasztott fényképet”

A Deque University, 2024 szerint a Label és Hint helyes szétválasztása 28%-kal növeli a feladatok sikeres elvégzésének arányát a VoiceOver felhasználók számára. A kognitív zavarokkal küzdő felhasználók különösen függenek a Hint-től: kockáztatva, hogy magyarázat nélkül megnyomják a „Törlés” gombot, 40% lemond a műveletről.

Mikor nem szükséges a Hint

• Elem intuitívan érthető művelettel („Vissza”, „Bezárás” — a Label elegendő)
• A Label már leírja az eredményt („Üzenet küldése” — ige magában a névben)
• Rendszervezérlők (UISwitch, UIButton rendszertípussal) — viselkedésük szabványos

Gyakorlati hibák: Label a Hint helyett

Gyakori hiba: a Label-be „Törlőgomb” írnak a „Törlés” helyett. Az elem típusát (gomb) a VoiceOver automatikusan hozzáadja a trait-en keresztül. Ennek eredményeként a felhasználó ezt hallja: „Törlőgomb, gomb” — ismétlődés. Helyes Label: „Törlés”, Hint: „Törli a kiválasztott fényképet”.

Lokalizáció és legjobb gyakorlatok

A címkék lokalizációja kötelező — a szabványos mechanizmusokon keresztül történik: NSLocalizedString iOS-ben, @string/ string-erőforrások Android-ben. Soha ne állítsa be a Label-t angol nyelvű összefűzéssel lokalizáció nélkül.

A jó Label szabályai, a W3C WCAG 2.2 alapján:

• Kezdje kulcsszóval — „Termék keresése”, nem „ mező a termék kereséséhez”
• Ne tartalmazza a „gomb”, „mező”, „kép” szavakat — a szerep automatikusan hozzáadódik
• Használjon természetes nyelvet, amely érthető a célközönség számára
• Kerülje a rövidítéseket (kivéve az általánosan elfogadottakat: „db”, „kg”) — a képernyőolvasó szó szerint olvassa őket
• Beviteli elemekhez adjon példát: „Email (example@domain.com)”

A Label konzisztenciája a márkán belül

Használjon egységes szójegyzéket a Label számára az alkalmazásban. Ha az egyik képernyőn „Kedvencek”, a másikon „Könyvjelzők” szerepel, a felhasználó dezorientált lesz. Hozzon létre egy akadálymentesítési kifejezéstáblázatot — egyeztessen a tervezőkkel és lokalizátorokkal.

Label űrlapelemekhez

Beviteli mezőkhöz (UITextField, EditText) a Label-nek meg kell egyeznie a helykitöltő szöveggel vagy a mező címével. A helykitöltő szöveg azonban gyakran eltűnik a szöveg beírása után. Használja az accessibilityLabel-t az állandó névhez és az accessibilityValue-t a mező aktuális tartalmához — ez a WCAG 4.1.2 szabvány. Megoldás: állítsa be az accessibilityLabel-t statikusan (megegyezően a mező címével), az accessibilityValue-t pedig dinamikusan (megegyezően a beírt szöveggel). iOS-ben ez automatikus, de egyéni mezőkhöz — kézzel, az accessibilityValue felülírásával. Ellenőrizze, hogy a VoiceOver „Email, example@domain.com, szövegmező”-t olvasson a „, szövegmező” helyett.

Hogyan teszteljük az akadálymentesítési címkéket

Az automatizált tesztelés az egyetlen mód a Label helyességének garantálására minden képernyőn. Az iOS XCUIApplication-t biztosít .label hozzáféréssel, az Android pedig AccessibilityCheckRule-t és setContentDescription-t.

Példa teszt iOS-re:

func testLabelsAreUnique() {
    let app = XCUIApplication()
    app.launch()
    let allButtons = app.buttons.allElementsBoundByIndex
    let labels = allButtons.compactMap { $0.label }
    let uniqueLabels = Set(labels)
    XCTAssertEqual(labels.count, uniqueLabels.count,
        "Ismétlődő Label-ek találhatók")
}

Példa Android-hoz Espresso-val:

@Test
fun testButtonHasAccessibilityLabel() {
    onView(withId(R.id.btnSubmit))
        .check(matches(
            withContentDescription(containsString("Küldés"))
        ))
}

Kézi tesztelés: kapcsolja be a VoiceOver-t (iOS) vagy a TalkBack-et (Android), és húzza az ujját jobbra a képernyő összes elemén. Minden elemnek értelmes bejelentést kell kapnia. Ha csak „gomb” vagy „kép” hall — a Label hiányzik.

VoiceOver rotor és gyors navigáció

A Label beállítása után a VoiceOver felhasználó használhatja a rotort a gyors navigációhoz: „Gombok”, „Fejlécek”, „Linkek” és egyéb módok. Ha a Label helyesen van beállítva, a VoiceOver beszámítja az elemet a megfelelő rotor módba. Ellenőrizze, hogy az összes gomb látható-e a „Gombok” módban és az összes fejléc a „Fejlécek” módban.

A Label a VoiceOver keresésre is hatással van. A felhasználó beírhat egy szót a kereső módban, és a VoiceOver áthelyezi a fókuszt a megfelelő Label-lel rendelkező elemre. Ezért a Label-nek tartalmaznia kell azokat a kulcsszavakat, amelyek alapján a felhasználó keresni fogja az elemet.

Integráció a CI/CD pipeline-ba

Adja hozzá a Label ellenőrzést a pipeline-hoz. iOS-en használja a XCUITest-et fastlane scan-nel. Android-on — Accessibility Test Framework-et az AccessibilityCheckRule szabállyal, amely érzékeli az üres contentDescription-eket. Ez megakadályozza a regressziókat új képernyők összevonásakor.