Accessibility Label — bu nədir, əsasları və iOS və Android üçün necə istifadə edilir

Accessibility Label nədir

Accessibility Label — köməkçi texnologiyalar üçün elementin adını təyin edən mətn xassəsidir. İstifadəçi VoiceOver aktiv olduqda barmağı ilə ekranı sürüşdürdükdə, ekran oxuyucusu fokusda olan elementin Labelini oxuyur. Etiket olmadan istifadəçi yalnız elementin növünü eşidir: “düymə”, “şəkil” — təyinatı göstərilmədən.

Google I/O 2024, “Accessibility Testing” məlumatlarna görə, mağaza tətbiqlərində kritik əlçatanlıq pozuntularının 35%-i Label-in olmaması və ya səhv olması ilə bağlıdır. Android-də Accessibility Scanner etiketin olmamasını ən yüksək ciddilikdə xəta kimi qeyd edir.

Prinsipial məhdudiyyət: Label elementin növünü ehtiva etməməlidir. VoiceOver və TalkBack avtomatik olaraq elanda rol (button, header, link) əlavə edir. Labeldə “Göndərmə düyməsi” varsa, istifadəçi eşidəcək: “Göndərmə düyməsi, düymə” — təkrarlama.

Label və WCAG 4.1.2: Name, Role, Value

WCAG 4.1.2 (A səviyyəsi) istifadəçi interfeysinin hər bir elementinin proqramlı şəkildə müəyyən edilə bilən ad (name), rol (role) və dəyər (value) olmasını tələb edir. Accessibility Label adı təmin edir. Label yoxdursa, meyar pozulmuş sayılır və tətbiq əsas sertifikatlaşdırmadan keçmir.

iOS: accessibilityLabel xassəsi

iOS-da accessibilityLabel UIAccessibility protokolundan bütün UIView-lər tərəfindən miras alınır. Element mətn ehtiva edərsə (title ilə UIButton, text ilə UILabel), Label avtomatik olaraq bu mətnə təyin edilir. UIImageView, xüsusi idarəetmələr və konteynerlər üçün Labeli əl ilə təyin etmək lazımdır.

Cədvəlin xüsusi hücrəsi üçün nümunə:

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

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

Xüsusi UIView-lər üçün accessibilityLabel getterini ləğv etmək olar:

class RatingView: UIView {
    var rating: Int = 5

    override var accessibilityLabel: String? {
        get { return "Qiymətləndirmə: \(rating) 5-dən" }
        set {}
    }
}

Apple HIG, 2024 məsləhət görür: əgər element bir neçə alt elementdən ibarətdirsə (məsələn, adı və qiyməti olan məhsul kartı), onları kompozit Label ilə bir əlçatanlıq elementinə birləşdirin. Valideynda isAccessibilityElement = true, uşaqlarda isə false təyin edin.

NSAttributedString və accessibilityLabel

UILabel NSAttributedString istifadə edərsə, accessibilityLabel standart olaraq .string-ə (düz mətn) bərabərdir. Semantik olaraq fərqli bir dəyər ötürmək lazımdırsa (məsələn, ★ simvolu əvəzinə “Ulduz” kimi oxunan işarə-simvol), accessibilityLabel-i aşkar şəkildə təyin edin. VoiceOver Unicode simvollarını mənalı şəkildə oxumur.

Android: contentDescription vasitəsilə Label

Android-də contentDescription ImageView, ImageButton və xüsusi View-lər üçün Label funksiyasını yerinə yetirir. Daxili mətni olan TextView və Button üçün contentDescription təyin etmək tələb olunmur — TalkBack mətni avtomatik oxuyur.

Kotlin vasitəsilə proqramlı təyinetmə:

binding.iconStar.contentDescription = "Məhsul seçilmişlərdə"

// Xüsusi View üçün çoxsaylı elementlərlə
binding.customCard.setContentDescription(
    "\(title) \(price) məbləğində")

Dekorativ elementlər üçün XML-də:

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

importantForAccessibility = "no" xassəsi elementi əlçatanlıq ağacından tamamilə çıxarır. iOS-da analoqu isAccessibilityElement = false-dir.

Compose: semantics və contentDescription

Jetpack Compose-da Label semantics modifikatoru vasitəsilə təyin edilir:

Image(
    painter = painterResource(R.drawable.ic_search),
    contentDescription = "Məhsul axtarışı",
    modifier = Modifier.semantics {
        contentDescription = "Məhsul axtarışı"
    }
)

Compose-da contentDescription Image üçün məcburi parametrdir — onsuz kod tərtib edilməyəcək (xəbərdarlıq). Bu, API dizaynı vasitəsilə əlçatanlığı məcburən yaxşılaşdırır.

Label və Hint: rolların fərqi

Accessibility Label “Bu element nədir?” sualına cavab verir. Hint (iOS-da accessibilityHint, Android-də contentDescription-da əlavə mətn) — “Qarşılıqlı təsir zamanı nə baş verəcək?”. VoiceOver onları ardıcıl olaraq səsləndirir: əvvəlcə Label, sonra Hint.

Silme düyməsi üçün nümunə:

• Label: “Sil”
• Hint: “Seçilmiş şəkli geri qaytarılmayacaq şəkildə siləcək”
• VoiceOver: “Sil. Seçilmiş şəkli geri qaytarılmayacaq şəkildə siləcək”

Deque University, 2024-ə görə, Label və Hint-in düzgün ayrılması VoiceOver istifadəçiləri üçün tapşırıqların yerinə yetirilmə dərəcəsini 28% artırır. Koqnitiv pozuntuları olan istifadəçilər xüsusilə Hint-dən asılıdır: izahatsız “Sil” düyməsini basmaq riski ilə 40% hərəkətdən imtina edir.

Hint nə vaxt lazım deyil

• İntuitiv başa düşülən hərəkəti olan element (“Geri”, “Bağla” — Label kifayətdir)
• Label artıq nəticəni təsvir edir (“Mesaj göndər” — fel adın özündədir)
• Sistem idarəetmələri (UISwitch, sistem tipli UIButton) — davranışı standartdır

Təcrübədən səhvlər: Hint əvəzinə Label

Tez-tez rast gəlinən səhv: Labeldə “Silinmə düyməsi” “Sil” əvəzinə yazılır. Elementin növü (düymə) VoiceOver tərəfindən trait vasitəsilə avtomatik əlavə edilir. Nəticədə istifadəçi eşidir: “Silinmə düyməsi, düymə” — təkrarlama. Düzgün Label: “Sil”, Hint: “Seçilmiş şəkli siləcək”.

Lokallaşdırma və ən yaxşı təcrübələr

Etiketlərin lokallaşdırılması məcburidir — standart mexanizmlər vasitəsilə həyata keçirilir: iOS-da NSLocalizedString, Android-də @string/ sətir resursları. Heç vaxt Label-i lokallaşdırmadan İngilis dilində birləşdirmə yolu ilə təyin etməyin.

W3C WCAG 2.2-yə əsaslanan yaxşı Label qaydaları:

• Açar sözlə başlayın — “Məhsul axtarışı”, “Məhsul axtarışı üçün sahə” yox
• “düymə”, “sahə”, “şəkil” sözlərini daxil etməyin — rol avtomatik əlavə edilir
• Hədəf auditoriyası üçün başa düşülən təbii dildən istifadə edin
• İxtisarlardan qaçın (ümumi qəbul edilmişlər istisna olmaqla: “ad.”, “kq.”) — ekran oxuyucusu onları hərfi oxuyur
• Giriş elementlər üçün nümunə əlavə edin: “Email (example@domain.com)”

Brend çərçivəsində Label-in ardıcıllığı

Tətbiqdə Label üçün vahid lüğətdən istifadə edin. Bir ekranda “Seçilmişlər”, digərində “Əlfəcinlər” yazılıbsa, istifadəçi çaşır. Əlçatanlıq terminlər cədvəli yaradın — dizaynerlər və lokallaşdırıcılarla razılaşdırın.

Forma elementlər üçün Label

Giriş sahələri üçün (UITextField, EditText) Label placeholder və ya sahənin başlığı ilə üst-üstə düşməlidir. Lakin placeholder mətn daxil edildikdən sonra tez-tez yox olur. Daimi ad üçün accessibilityLabel, sahənin cari məzmunu üçün accessibilityValue istifadə edin — bu WCAG 4.1.2 standartıdır. Həll yolu: accessibilityLabel-i statik olaraq (sahənin başlığına bərabər), accessibilityValue-i dinamik olaraq (daxil edilmiş mətnə bərabər) təyin edin. iOS-da bu avtomatikdir, lakin xüsusi sahələr üçün — accessibilityValue-ni ləğv etməklə əl ilə. VoiceOver-in “, mətn sahəsi” əvəzinə “Email, example@domain.com, mətn sahəsi” oxuduğunu yoxlayın.

Əlçatanlıq etiketlərini necə test etməli

Avtomatlaşdırılmış test — Label-in bütün ekranlarda düzgünlüyünü təmin etməyin yeganə yoludur. iOS .label-ə giriş ilə XCUIApplication təmin edir, Android isə AccessibilityCheckRule və setContentDescription.

iOS üçün test nümunəsi:

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,
        "Təkrarlanan Label-lər tapıldı")
}

Espresso ilə Android üçün nümunə:

@Test
fun testButtonHasAccessibilityLabel() {
    onView(withId(R.id.btnSubmit))
        .check(matches(
            withContentDescription(containsString("Göndər"))
        ))
}

Əl ilə test: VoiceOver (iOS) və ya TalkBack-i (Android) aktivləşdirin və barmaq hərəkəti ilə ekranın bütün elementlərindən keçin. Hər bir element mənalı bəyanat almalıdır. Yalnız “düymə” və ya “şəkil” eşidirsinizsə — Label yoxdur.

VoiceOver Rotoru və sürətli naviqasiya

Label konfiqurasiya edildikdən sonra VoiceOver istifadəçisi sürətli naviqasiya üçün rotordan istifadə edə bilər: “Düymələr”, “Başlıqlar”, “Keçidlər” və digər rejimlər. Label düzgün təyin edilərsə, VoiceOver elementi müvafiq rotor rejiminə daxil edir. Bütün düymələrin “Düymələr” rejimində, bütün başlıqların “Başlıqlar” rejimində göründüyünü yoxlayın.

Label VoiceOver axtarışına da təsir edir. İstifadəçi axtarış rejimində söz daxil edə bilər və VoiceOver uyğun Label olan elementə fokusu köçürür. Buna görə Labeldə istifadəçinin elementi axtaracağı açar sözlər olmalıdır.

CI/CD pipeline-a inteqrasiya

Label yoxlamasını pipeline-a əlavə edin. iOS-da fastlane scan ilə XCUITest istifadə edin. Android-də boş contentDescription aşkarlayan AccessibilityCheckRule qaydası ilə Accessibility Test Framework istifadə edin. Bu, yeni ekranlar birləşdirilərkən reqressiyaların qarşısını alır.