Accessibility Label — bu nima, asoslar va iOS va Android üçün qanday foydalanish

Accessibility Label nima

Accessibility Label — bu yordamchi texnologiyalar üçün element nomini belgilaydigan matn xususiyati. Foydalanuvchi VoiceOver yoqilgan holda barmog‘ini ekran bo‘ylab siljitganda, ekran o‘quvchisi fokusdagi elementning Labelini o‘qiydi. Yorliqsiz foydalanuvchi faqat element turini eshitadi: “tugma”, “tasvir” — maqsadi ko‘rsatilmagan holda.

Google I/O 2024, “Accessibility Testing” ma‘lumotiga ko‘ra, do‘kon ilovalaridagi tanqidiy foydalanish imkoniyati buzilishlarining 35% Labelning yo‘qligi yoki noto‘g‘riligi bilan bog‘liq. Android dagi Accessibility Scanner yorliq yo‘qligini eng yuqori jiddiylikdagi xato sifatida aniqlaydi.

Prinsipial cheklov: Label element turini o‘z ichiga olmasligi kerak. VoiceOver va TalkBack e’londa avtomatik ravishda rol (button, header, link) qo‘shadi. Agar Labelda “Yuborish tugmasi” bo‘lsa, foydalanuvchi eshitadi: “Yuborish tugmasi, tugma” — takrorlash.

Label va WCAG 4.1.2: Name, Role, Value

WCAG 4.1.2 (A darajasi) foydalanuvchi interfeysining har bir elementi dasturiy ravishda aniqlanadigan nom (name), rol (role) va qiymat (value) ga ega bo‘lishini talab qiladi. Accessibility Label nomni ta’minlaydi. Agar Label bo‘lmasa, mezon buzilgan hisoblanadi va ilova asosiy sertifikatsiyadan o‘tolmaydi.

iOS: accessibilityLabel xususiyati

iOS da accessibilityLabel barcha UIView lar tomonidan UIAccessibility protokolidan meros qilib olinadi. Agar element matnni o‘z ichiga olgan bo‘lsa (title bilan UIButton, text bilan UILabel), Label avtomatik ravishda shu matnga o‘rnatiladi. UIImageView, maxsus boshqaruv elementlari va konteynerlar üçün Labelni qo‘lda o‘rnatish kerak.

Maxsus jadval katakchasi üçün namuna:

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

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

Maxsus UIView lar üçün accessibilityLabel getterini qayta belgilash mumkin:

class RatingView: UIView {
    var rating: Int = 5

    override var accessibilityLabel: String? {
        get { return "Baholash: \(rating) 5 dan" }
        set {}
    }
}

Apple HIG, 2024 maslahat beradi: agar element bir nechta pastki elementlardan iborat bo‘lsa (masalan, nomi va narxi bilan mahsulot kartasi), ularni kompozit Label bilan bitta foydalanish imkoniyati elementiga birlashtiring. Ota-onada isAccessibilityElement = true, bolalarda esa false o‘rnating.

NSAttributedString va accessibilityLabel

UILabel NSAttributedString dan foydalansa, accessibilityLabel standart holda .string (tekst matn) ga teng. Agar semantik jihatdan boshqacha qiymatni uzatish kerak bo‘lsa (masalan, ★ belgisi o‘rniga “Yulduz” deb o‘qiladigan belgi-ikonka), accessibilityLabel ni aniq o‘rnating. VoiceOver Unicode belgilarini mazmunli o‘qimaydi.

Android: contentDescription orqali Label

Android da contentDescription ImageView, ImageButton va maxsus View lar üçün Label vazifasini bajaradi. Ichki matnli TextView va Button üçün contentDescription o‘rnatish shart emas — TalkBack matnni avtomatik o‘qiydi.

Kotlin orqali dasturiy o‘rnatish:

binding.iconStar.contentDescription = "Mahsulot sevimlilarda"

// Maxsus View uchun bir nechta elementlar bilan
binding.customCard.setContentDescription(
    "\(title) \(price) miqdorida")

Dekorativ elementlar üçün XML da:

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

importantForAccessibility = "no" xususiyati elementni foydalanish imkoniyati daraxtidan butunlay chiqarib tashlaydi. iOS da analogi isAccessibilityElement = false.

Compose: semantics va contentDescription

Jetpack Compose da Label semantics modifikatori orqali o‘rnatiladi:

Image(
    painter = painterResource(R.drawable.ic_search),
    contentDescription = "Mahsulot qidiruvi",
    modifier = Modifier.semantics {
        contentDescription = "Mahsulot qidiruvi"
    }
)

Compose da contentDescription Image üçün majburiy parametrdir — usiz kod kompilyatsiya qilinmaydi (ogohlantirish). Bu API dizayni orqali foydalanish imkoniyatini majburan yaxshilaydi.

Label va Hint: rollar farqi

Accessibility Label “Bu qanday element?” degan savolga javob beradi. Hint (iOS da accessibilityHint, Android da contentDescription dagi qo‘shimcha matn) — “O‘zaro ta’sir qilganda nima bo‘ladi?”. VoiceOver ularni ketma-ket aytadi: avval Label, keyin Hint.

O‘chirish tugmasi üçün namuna:

• Label: “O‘chirish”
• Hint: “Tanlangan fotosuratni qaytarib bo‘lmaydigan darajada o‘chiradi”
• VoiceOver: “O‘chirish. Tanlangan fotosuratni qaytarib bo‘lmaydigan darajada o‘chiradi”

Deque University, 2024 ma‘lumotiga ko‘ra, Label va Hintni to‘g‘ri ajratish VoiceOver foydalanuvchilari üçün vazifalarni bajarish tezligini 28% ga oshiradi. Kognitiv buzilishlari bo‘lgan foydalanuvchilar ayniqsa Hintga bog‘liq: tushuntirishsiz “O‘chirish” tugmasini bosish xavfi bilan 40% harakatdan voz kechadi.

Hint qachon kerak emas

• Intuitiv tushunarli harakatga ega element (“Orqaga”, “Yopish” — Label yetarli)
• Label allaqachon natijani tavsiflaydi (“Xabar yuborish” — fe’l nomning o‘zida)
• Tizim boshqaruv elementlari (UISwitch, tizim tipidagi UIButton) — ularning xatti-harakati standart

Amaliyotdagi xatolar: Hint o‘rnida Label

Tez-tez uchraydigan xato: Labelda “O‘chirish tugmasi” “O‘chirish” o‘rniga yoziladi. Element turi (tugma) VoiceOver tomonidan trait orqali avtomatik qo‘shiladi. Natijada foydalanuvchi eshitadi: “O‘chirish tugmasi, tugma” — takrorlash. To‘g‘ri Label: “O‘chirish”, Hint: “Tanlangan fotosuratni o‘chiradi”.

Mahalliylashtirish va eng yaxshi amaliyotlar

Yorliqlarni mahalliylashtirish majburiy — standart mexanizmlar orqali amalga oshiriladi: iOS da NSLocalizedString, Android da @string/ matn resurslari. Hech qachon Labelni mahalliylashtirmasdan ingliz tilida birlashtirish orqali o‘rnatmang.

W3C WCAG 2.2 ga asoslangan yaxshi Label qoidalari:

• Kalit so‘z bilan boshlang — “Mahsulot qidiruvi”, “Mahsulot qidiruvi üçün maydon” emas
• “tugma”, “maydon”, “tasvir” so‘zlarini qo‘shmang — rol avtomatik qo‘shiladi
• Maqsadli auditoriya üçün tushunarli tabiiy tildan foydalaning
• Qisqartmalardan saqlaning (umumiy qabul qilinganlardan tashqari: “dona”, “kg”) — ekran o‘quvchisi ularni to‘g‘ridan-to‘g‘ri o‘qiydi
• Kiritish elementlari üçün misol qo‘shing: “Email (example@domain.com)”

Brend doirasida Labelning izchilligi

Ilovada Label üçün yagona lug‘atdan foydalaning. Agar bir ekranda “Sevimlilar”, boshqasida “Xatcho‘plar” yozilgan bo‘lsa, foydalanuvchi chalg‘iydi. Foydalanish imkoniyati atamalari jadvalini yarating — dizaynerlar va mahalliylashtiruvchilar bilan kelishib oling.

Forma elementlari üçün Label

Kiritish maydonlari üçün (UITextField, EditText) Label placeholder yoki maydon sarlavhasi bilan mos kelishi kerak. Biroq placeholder matn kiritilgandan so‘ng ko‘pincha yo‘qoladi. Doimiy nom üçün accessibilityLabel va maydonning joriy tarkibi üçün accessibilityValue dan foydalaning — bu WCAG 4.1.2 standarti. Yechim: accessibilityLabel ni statik (maydon sarlavhasiga teng), accessibilityValue ni dinamik (kiritilgan matnga teng) qilib o‘rnating. iOS da bu avtomatik, ammo maxsus maydonlar üçün — accessibilityValue ni qayta belgilash orqali qo‘lda. VoiceOver “, matn maydoni” o‘rniga “Email, example@domain.com, matn maydoni” deb o‘qishini tekshiring.

Foydalanish imkoniyati yorliqlarini qanday test qilish

Avtomatlashtirilgan test — Labelning barcha ekranlarda to‘g‘riligini kafolatlashning yagona usuli. iOS .label ga kirish bilan XCUIApplication ni taqdim etadi, Android esa AccessibilityCheckRule va setContentDescription ni.

iOS üçün test namunasi:

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,
        "Takrorlanuvchi Label lar topildi")
}

Espresso bilan Android üçün namuna:

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

Qo‘lda test: VoiceOver (iOS) yoki TalkBack (Android) ni yoqing va barmoq harakati bilan ekranning barcha elementlaridan o‘ting. Har bir element mazmunli e’lon olishi kerak. Agar faqat “tugma” yoki “tasvir” eshitsangiz — Label yo‘q.

VoiceOver rotori va tezkor navigatsiya

Label sozlangandan so‘ng, VoiceOver foydalanuvchisi tezkor navigatsiya üçün rotordan foydalanishi mumkin: “Tugmalar”, “Sarlavhalar”, “Havolalar” va boshqa rejimlar. Agar Label to‘g‘ri o‘rnatilgan bo‘lsa, VoiceOver elementni tegishli rotor rejimiga kiritadi. Barcha tugmalar “Tugmalar” rejimida, barcha sarlavhalar “Sarlavhalar” rejimida ko‘rinishini tekshiring.

Label VoiceOver qidiruviga ham ta’sir qiladi. Foydalanuvchi qidiruv rejimida so‘z kiritishi mumkin va VoiceOver mos Labelga ega elementga fokusni siljitadi. Shuning uchun Labelda foydalanuvchi elementni qidiradigan kalit so‘zlar bo‘lishi kerak.

CI/CD pipeline ga integratsiya

Label tekshiruvini pipeline ga qo‘shing. iOS da fastlane scan bilan XCUITest dan foydalaning. Android da bo‘sh contentDescription larni aniqlaydigan AccessibilityCheckRule qoidasi bilan Accessibility Test Framework dan foydalaning. Bu yangi ekranlar birlashtirilganda regressiyalarning oldini oladi.