Content Description: nima, prinsiplari va accessibility uchun qanday sozlanadi

Accessibility’da Content Description nima

Content Description — interfeys elementining vizual kontentning matnli ko‘rinishini yordamchi texnologiyalarga uzatuvchi satr xususiyati. Screen reader (iOS’da VoiceOver, Android’da TalkBack) elementni vizual tanib olishga urinish o‘rniga tavsifni o‘qiydi. Tavsif matn qatlami bo‘lmagan tasvirlarga, ikonkalarga, grafiklarga, moslashtirilgan boshqaruv elementlariga va har qanday matnli bo‘lmagan elementlarga qo‘llanadi.

Google Material Design, 2024 ma’lumotlariga ko‘ra, contentDescription bo‘lmagan elementlar WCAG 1.1.1 (Matnli bo‘lmagan kontent) qoidasini buzadi. Accessibility Scanner tekshiruvi shuni ko‘rsatadiki, do‘kon ilovalaridagi ikonkalarning 40% gacha tavsifga ega emas. VoiceOver foydalanuvchisi aniqliksiz faqat “tasvir” yoki “tugma” eshitadi — bunday interfeys navigatsiya uchun yaroqsiz bo‘ladi.

Content Description elementning ko‘rinadigan matnini almashtirmaydi. Agar tugma “Yuborish” matnli yorlig‘ini o‘z ichiga olsa, qo‘shimcha tavsif kerak emas — screen reader matnni o‘qiydi. Tasvirlar, ikonkalar va kiritish maydonlari uchun tavsif majburiydir.

Accessibility Scanner (Android) va Xcode Accessibility Inspector (iOS) vositalari tavsiflar mavjudligini avtomatik tekshiradi. Chiqarishdan oldin har bir ekranda ushbu tekshiruvlarni o‘tkazish tavsiya etiladi.

Content Description nima uchun kerak: foydalanuvchi stsenariylari

Ko‘rish nuqsoni bo‘lgan foydalanuvchi interfeysni tushunish uchun VoiceOver’ga tayanadi. Agar savat ikonkasining tavsifi bo‘lmasa, u faqat “tugma” eshitadi. Tugma nima qilishini bilish uchun uni ko‘r-ko‘rona bosishi kerak — qaytarib bo‘lmaydigan harakat xavfi. “Mahsulotni savatdan o‘chirish” tavsifi bu muammoni bir soniyada hal qiladi.

Vaqtinchalik cheklovlari bo‘lgan foydalanuvchi (ko‘chada yorqin quyosh, singan ekran) ham VoiceOver’dan foydalanadi. Apple Accessibility Report, 2023 ma’lumotlariga ko‘ra, VoiceOver foydalanuvchilarining taxminan 20% doimiy ko‘rish nuqsonlariga ega emas — ular bu funksiyani vaziyatga qarab yoqadilar.

WCAG 1.1.1: Matnli bo‘lmagan kontent

WCAG 1.1.1 (A darajasi) mezoni har qanday matnli bo‘lmagan kontentning matnli alternativaga ega bo‘lishini talab qiladi. Istisno: dekorativ bo‘lgan, faqat vizual dizayn uchun ishlatiladigan yoki ma’lumot tashimaydigan kontent. Dekorativlik testi: elementni olib tashlasak, sahifaning ma‘nosi o‘zgaradimi? Agar yo‘q bo‘lsa — uni screen reader’dan yashirish mumkin.

Content Description Label’dan qanday farq qiladi

Accessibility Label (iOS’da accessibilityLabel) — fokus vaqtida screen reader tomonidan talaffuz qilinadigan element nomi. Content Description (iOS’da accessibilityHint) — nomdan keyin o‘qiladigan va harakat natijasi haqida ma’lumot beradigan qo‘shimcha tushuntirish.

Farq “Savat” tugmasi misolida yaxshi ko‘rinadi. Label: “Savat”. Description: “Buyurtma berish ekranini ochadi”. VoiceOver aytadi: “Savat. Buyurtma berish ekranini ochadi”. Agar faqat Label o‘rnatilsa, foydalanuvchi bosgandan keyin nima bo‘lishini bilmaydi.

Jadval: Label’ga qarshi Description

Qoida: Label “Bu nima?” degan savolga javob beradi, Description — “Nima bo‘ladi?”. Android’da contentDescription ikkala rolni ham bajarishi mumkin, lekin amalda ularni ajratish yaxshiroq: “[nom], [tushuntirish]” konkatensiyasidan foydalaning.

Qachon Description Label’dan muhimroq

Murakkab harakatlar (o‘chirish uchun surish, kontekst menyusi uchun uzoq bosish) uchun accessibilityHint majburiydir. VoiceOver foydalanuvchisi tavsiflanmagan yashirin harakatlar haqida bilmaydi. Element hintida ko‘rsating: “O‘chirish uchun chapga suring”.

iOS: accessibilityHint atributi

iOS platformasida accessibilityHint UIView yoki NSObjectning xuddi shu nomdagi xususiyati orqali o‘rnatiladi. Qiymat — 80 belgigacha satr. VoiceOver hintni label’dan keyin o‘qiydi, agar batafsil tavsiflar rejimi yoqilgan bo‘lsa (VoiceOver sozlamalarida — “Verbosity”).

Moslashtirilgan tugma uchun hint o‘rnatish namunasi:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "Saralanganlarga qo‘shish"
        self.accessibilityHint = "Mahsulotni saralanganlar ro‘yxatiga saqlaydi"
    }
}

Matnli kontenti bo‘lmagan UIImageView uchun isAccessibilityElement = true va accessibilityHint ni o‘rnatish majburiydir:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "Oxirgi chorakdagi savdo grafigi"

VoiceOver o‘qiydi: “Oxirgi chorakdagi savdo grafigi”. Hint bo‘sh bo‘lsa — faqat “tasvir”. Apple HIG, 2024 hintda “bosing” yoki “teging” kabi fe’llarni ishlatmaslikni tavsiya qiladi — VoiceOver avtomatik ravishda harakat yo‘riqnomasini qo‘shadi.

SwiftUI: accessibilityHint modifikatori

SwiftUI’da hint chain modifikator orqali o‘rnatiladi:

Image(systemName: "trash")
    .accessibilityLabel("O‘chirish")
    .accessibilityHint("Tanlangan elementni qaytarib bo‘lmaydigan darajada o‘chiradi")

SwiftUI murakkab view’lar uchun modifikatorlarni avtomatik birlashtiradi. Agar Image Button ichida joylashgan bo‘lsa, SwiftUI tugmaning labelini asosiy accessibilityLabel sifatida ishlatadi.

Android: contentDescription xususiyati

Android’da contentDescription XML belgilashda yoki dasturiy ravishda setContentDescription() orqali o‘rnatiladi. TalkBack elementga fokuslanganda tavsifni o‘qiydi.

XML’da namuna:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="Mahsulotlarni qidirish" />

Dinamik elementlar uchun dasturiy o‘rnatish:

binding.iconSearch.contentDescription =
    "Qidirish. Filtrlar bilan qidirish ekranini ochadi"

Dekorativ tasvirlar (ajratgichlar, fonlar, dekorativ ikonkalar) uchun contentDescription = "@null" yoki setContentDescription(null) o‘rnating — TalkBack bunday elementni o‘tkazib yuboradi. XML’da: android:contentDescription="@null". Bo‘sh satr "" ishlamaydi — TalkBack baribir “tasvir” deydi.

Android: ImageButton va CheckBox uchun muhim tafsilotlar

ImageButton uchun doim contentDescription o‘rnating — TalkBack tasvirdagi matnni ko‘rmaydi. CheckBox uchun tavsif dinamik o‘zgarishi kerak: “Tanlangan” / “Tanlanmagan” statik tavsif o‘rniga. Holat tinglovchisida setContentDescription dan foydalaning.

Tavsiflarni yozish qoidalari

Axborotlilik — tavsif ma’noni uzatishi kerak, tashqi ko‘rinishni emas. “Belgili ko‘k ikonka” emas, balki “Mahsulot savatga qo‘shildi”. Screen reader ranglar bilan qiziqmaydi — u natija bilan qiziqadi.

Qisqalik — optimal uzunlik 2–4 so‘z (80 belgigacha). Uzun tavsiflar navigatsiyani sekinlashtiradi: VoiceOver ketma-ket o‘qiydi, har bir so‘z foydalanuvchining bir soniyasi. Apple WWDC 2023, “Accessibility by Design” ma’lumotlariga ko‘ra, 5 soniyadan uzoq o‘qiladigan ibora kognitiv oqimni to‘xtatadi.

Noyoblik — bir ekranda bir xil tavsifga ega ikkita element bo‘lmasligi kerak. Foydalanuvchi birinchi va ikkinchi elementga fokuslanish qanday natijaga olib kelishini farqlay olmaydi. Agar bir nechta “Sotib olish” tugmasi bo‘lsa — identifikator qo‘shing: “iPhone 15 sotib olish”, “iPhone 15 Pro sotib olish”.

Mahalliylashtirish — Content Description ilova qo‘llab-quvvatlaydigan barcha tillarga tarjima qilinadi. Tavsifni mahalliylashtirish xatosi App Store’da Accessibility Review dan o‘ta olmaslikning tez-tez uchraydigan sabablaridan biridir.

Tavsif uzunligi: tadqiqotlar

Nielsen Norman Group, 2024 tadqiqoti shuni ko‘rsatdiki, screen reader uchun optimal tavsif uzunligi 3–5 so‘z (50 belgigacha). Uzunroq tavsiflar navigatsiya tezligini 30% kamaytiradi, chunki foydalanuvchi keyingi qadamdan oldin o‘qish tugashini kutishi kerak.

Foydalanishdagi odatiy xatolar

Ortiqchalik — tavsif ko‘rinadigan matnni takrorlaydi. Agar tugma “Yuborish” matnini o‘z ichiga olsa, accessibilityHint = “Yuborish tugmasi” o‘rnatmang. VoiceOver matnni avtomatik o‘qiydi, hint esa keraksiz shovqin qo‘shadi.

Label bilan adashtirish — matnli tugmalar uchun label o‘rniga contentDescription ishlatish. iOS’da accessibilityLabel tugma matni bilan mos kelishi kerak (yoki matn ko‘rinadigan bo‘lsa bo‘sh bo‘lishi kerak), hint esa faqat harakatni tushuntiradi. Google Testing Blog, 2024 ma’lumotlariga ko‘ra, Play Store’da tekshirilgan ilovalarning 23% takrorlanuvchi tavsiflarga ega.

Dinamikani e’tiborsiz qoldirish — holat o‘zgarganda tavsif yangilanmaydi. Masalan, “Wi-Fi” kaliti tavsifi yoqilgandan keyin ham “Wi-Fi-ni yoqish” bo‘lib qoladi. To‘g‘risi: holatni kuzatish orqali tavsifni dinamik ravishda “Wi-Fi-ni o‘chirish” ga o‘zgartirish.

Render sikllari va regressiyalar

Dizayn yangilanishidan so‘ng (ikonkalarni o‘zgartirish, elementlarni qayta joylashtirish) Content Description ko‘pincha yo‘qoladi. Sabab: dizayner tasvirni o‘zgartiradi, dasturchi yangi aktivning foydalanish qulayligi xususiyatlarini tekshirmaydi. Yechim: foydalanish qulayligi tekshiruvini code review’ning majburiy qadamiga aylantirish — “Content Description yangilanganmi?” bandi bilan tekshirish ro‘yxati qo‘shing.

Content Description qanday tekshiriladi

• iOS’da: Xcode → Accessibility Inspector — elementni tanlang, Label va Hint maydonlarini tekshiring
• Android’da: Play Store’dan Accessibility Scanner o‘rnating — ekraningizda ishga tushiring
• Ikkala platformada: VoiceOver/TalkBack ni yoqing va butun ekran bo‘ylab harakatlar bilan o‘ting
• Barcha ImageView uchun contentDescription ni tekshiradigan UI test yozing

iOS uchun UI test namunasi

func testContentDescriptionExists() {
    let app = XCUIApplication()
    app.launch()
    let image = app.images["chart-sales"]
    XCTAssertNotNil(image.label)
    XCTAssertGreaterThan(image.label.count, 0)
}