Accessibility Label — co to je, základy a jak používat pro iOS a Android

Co je Accessibility Label

Accessibility Label je řetězcová vlastnost, která definuje název prvku pro asistenční technologie. Když uživatel přejížčí prstem po obrazovce s zapnutým VoiceOver, čtečka obrazovky přečte Label prvku, na kterém je zaostřeno. Bez štítku uživatel slyší pouze typ prvku: „tlačítko”, „obrázek” — bez uvedení účelu.

Podle Google I/O 2024, „Accessibility Testing” souvisí 35% kritických porušení přístupnosti v obchodních aplikacích s chybějícím nebo nesprávným Label. Accessibility Scanner na Androidu detekuje chybějící štítek jako chybu nejvyšší závažnosti.

Základní omezení: Label nesmí obsahovat typ prvku. VoiceOver a TalkBack automaticky přidávají roli (button, header, link) do oznámení. Pokud Label obsahuje „Tlačítko odeslání”, uživatel uslyší: „Tlačítko odeslání, tlačítko” — duplicita.

Label a WCAG 4.1.2: Name, Role, Value

WCAG 4.1.2 (úroveň A) vyžaduje, aby každý prvek uživatelského rozhraní měl programově zjistitelné jméno (name), roli (role) a hodnotu (value). Accessibility Label poskytuje jméno. Pokud Label chybí, je kritérium považováno za porušené a aplikace neprojde základní certifikací.

iOS: vlastnost accessibilityLabel

V iOS je accessibilityLabel děděna všemi UIView z protokolu UIAccessibility. Pokud prvek obsahuje text (UIButton s title, UILabel s text), Label se automaticky nastaví na tento text. Pro UIImageView, vlastní ovládací prvky a kontejnery je třeba Label nastavit ručně.

Příklad pro vlastní buňku tabulky:

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

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

Pro vlastní UIView lze přepsat getter accessibilityLabel:

class RatingView: UIView {
    var rating: Int = 5

    override var accessibilityLabel: String? {
        get { return "Hodnocení: \(rating) z 5" }
        set {}
    }
}

Apple HIG, 2024 doporučuje: pokud se prvek skládá z několika podprvků (např. karta produktu s názvem a cenou), spojte je do jednoho prvku přístupnosti s kompozitním Labilem. Nastavte isAccessibilityElement = true na rodiči a false na dětech.

NSAttributedString a accessibilityLabel

Pokud UILabel používá NSAttributedString, accessibilityLabel je implicitně roven .string (prostý text). Pokud potřebujete předat sémanticky jinou hodnotu (např. ikona-symbol čtená jako „ hvězda” místo symbolu ★), explicitně nastavte accessibilityLabel. VoiceOver nečte Unicode symboly smysluplně.

Android: Label pomocí contentDescription

V Androidu plní contentDescription funkci Label pro ImageView, ImageButton a vlastní View. Pro TextView a Button s vestavěným textem není třeba contentDescription nastavovat — TalkBack čte text automaticky.

Programové nastavení pomocí Kotlin:

binding.iconStar.contentDescription = "Produkt v oblíbených"

// Pro vlastní zobrazení s více prvky
binding.customCard.setContentDescription(
    "\(title) v částce \(price)")

V XML pro dekorativní prvky:

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

Vlastnost importantForAccessibility = "no" zcela vylučuje prvek ze stromu přístupnosti. V iOS je analogií isAccessibilityElement = false.

Compose: semantics a contentDescription

V Jetpack Compose se Label nastavuje pomocí modifikátoru semantics:

Image(
    painter = painterResource(R.drawable.ic_search),
    contentDescription = "Vyhledávání produktů",
    modifier = Modifier.semantics {
        contentDescription = "Vyhledávání produktů"
    }
)

V Compose je contentDescription povinným parametrem pro Image — bez něj se kód nezkompiluje (varování). To vynucuje zlepšení přístupnosti prostřednictvím návrhu API.

Label a Hint: rozdíl rolí

Accessibility Label odpovídá na otázku „Co je to za prvek?”. Hint (accessibilityHint v iOS, doplňující text v contentDescription v Androidu) — „Co se stane při interakci?”. VoiceOver je vyslovuje postupně: nejprve Label, poté Hint.

Příklad pro tlačítko smazání:

• Label: „Smazat”
• Hint: „Nevratně smaže vybranou fotografii”
• VoiceOver: „Smazat. Nevratně smaže vybranou fotografii”

Podle Deque University, 2024 správné oddělení Label a Hint zvyšuje míru úspěšného dokončení úkolů pro uživatele VoiceOver o 28%. Uživatelé s kognitivním postižením jsou zvláště závislí na Hint: s rizikem stisknutí „Smazat” bez vysvětlení 40% od akce upouští.

Kdy Hint není potřeba

• Prvek s intuitivně srozumitelnou akcí („Zpět”, „Zavřít” — Label stačí)
• Label již popisuje výsledek („Odeslat zprávu” — sloveso v samotném názvu)
• Systémové ovládací prvky (UISwitch, UIButton se systémovým typem) — jejich chování je standardní

Chyby z praxe: Label místo Hint

Častá chyba: v Label píší „Tlačítko smazání” místo „Smazat”. Typ prvku (tlačítko) je automaticky přidán VoiceOver prostřednictvím trait. Výsledkem je, že uživatel slyší: „Tlačítko smazání, tlačítko” — duplicita. Správný Label: „Smazat”, Hint: „Smaže vybranou fotografii”.

Lokalizace a nejlepší postupy

Lokalizace štítků je povinná — probíhá prostřednictvím standardních mechanismů: NSLocalizedString v iOS, zdroje řetězců @string/ v Androidu. Nikdy nenastavujte Label konkatenací v angličtině bez lokalizace.

Pravidla dobrého Label, založená na W3C WCAG 2.2:

• Začněte klíčovým slovem — „Vyhledávání produktů”, ne „Pole pro vyhledávání produktů”
• Nezahrnujte slovo „tlačítko”, „pole”, „obrázek” — role se přidává automaticky
• Používejte přirozený jazyk, srozumitelný cílovému publiku
• Vyvarujte se zkratek (kromě běžně uznávaných: „ks”, „kg”) — čtečka obrazovky je čte doslovně
• Pro vstupní prvky přidejte příklad: „Email (example@domain.com)”

Konzistence Label v rámci značky

Používejte jednotný slovník pro Label v aplikaci. Pokud je na jedné obrazovce napsáno „Oblíbené” a na druhé „Záložky”, uživatel je dezorientován. Vytvořte tabulku termínů přístupnosti — dohodněte se s designéry a lokalizátory.

Label pro prvky formuláře

Pro vstupní pole (UITextField, EditText) by se Label měl shodovat s placeholderem nebo názvem pole. Placeholder však po zadání textu často zmizí. Použijte accessibilityLabel pro trvalý název a accessibilityValue pro aktuální obsah pole — to je standard WCAG 4.1.2. Řešení: nastavte accessibilityLabel staticky (rovný názvu pole) a accessibilityValue dynamicky (rovný zadanému textu). V iOS je to automatické, ale pro vlastní pole — ručně přepsáním accessibilityValue. Zkontrolujte, že VoiceOver čte: „Email, example@domain.com, textové pole” místo „, textové pole”.

Jak testovat štítky přístupnosti

Automatizované testování je jediný způsob, jak zaručit správnost Label na všech obrazovkách. iOS poskytuje XCUIApplication s přístupem k .label, Android — AccessibilityCheckRule a setContentDescription.

Příklad testu pro iOS:

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,
        "Nalezeny duplicitní Label")
}

Příklad pro Android s Espresso:

@Test
fun testButtonHasAccessibilityLabel() {
    onView(withId(R.id.btnSubmit))
        .check(matches(
            withContentDescription(containsString("Odeslat"))
        ))
}

Ruční testování: zapněte VoiceOver (iOS) nebo TalkBack (Android) a přejeďte gestem doprava přes všechny prvky obrazovky. Každý prvek by měl obdržet smysluplné oznámení. Pokud slyšíte pouze „tlačítko” nebo „obrázek” — Label chybí.

VoiceOver rotor a rychlá navigace

Po nastavení Label může uživatel VoiceOver použít rotor pro rychlou navigaci: režimy „Tlačítka”, „Nadpisy”, „Odkazy” a další. Pokud je Label správně nastaven, VoiceOver zahrne prvek do příslušného režimu rotoru. Zkontrolujte, že všechna tlačítka jsou viditelná v režimu „Tlačítka” a všechny nadpisy v „Nadpisy”.

Label ovlivňuje také vyhledávání VoiceOver. Uživatel může zadat slovo v režimu vyhledávání a VoiceOver přesune zaměření na prvek s odpovídajícím Labelem. Proto by Label měl obsahovat klíčová slova, podle kterých bude uživatel prvek hledat.

Integrace do CI/CD pipeline

Přidejte kontrolu Label do pipeline. Na iOS použijte XCUITest s fastlane scan. Na Android — Accessibility Test Framework s pravidlem AccessibilityCheckRule, které detekuje prázdné contentDescription. To zabraňuje regresím při slučování nových obrazovek.