Accessibility Label — nedir, temelleri ve iOS ile Android için nasıl kullanılır

Accessibility Label Nedir

Accessibility Label, yardımcı teknolojiler için bir öğenin adını tanımlayan bir dize özelliğidir. Kullanıcı VoiceOver açıkken ekranda parmağını kaydırdığında, ekran okuyucu odaklanılan öğenin Etiketini okur. Etiket olmadan kullanıcı yalnızca öğe türünü duyar: “düğme”, “görsel” — amacı belirtilmeden.

Google I/O 2024, “Accessibility Testing”'e göre, mağaza uygulamalarındaki kritik erişilebilirlik ihlallerinin %35'i etiketlerin eksikliği veya yanlışlığıyla ilgilidir. Android'deki Accessibility Scanner, eksik etiketi en yüksek önem derecesine sahip bir hata olarak algılar.

Temel bir sınırlama: Etiket, öğe türünü içermemelidir. VoiceOver ve TalkBack, duyuruya otomatik olarak rolü (düğme, başlık, bağlantı) ekler. Etiket “Gönder düğmesi” içeriyorsa, kullanıcı şunu duyar: “Gönder düğmesi, düğme” — yineleme.

Label ve WCAG 4.1.2: Ad, Rol, Değer

WCAG 4.1.2 (Seviye A), her kullanıcı arayüzü öğesinin programlama yoluyla belirlenebilir bir ada, role ve değere sahip olmasını gerektirir. Accessibility Label adı sağlar. Etiket eksikse, kriter ihlal edilmiş sayılır ve uygulama temel sertifikasyonu geçemez.

iOS: accessibilityLabel özelliği

iOS'ta accessibilityLabel, UIAccessibility protokolünden tüm UIView'ler tarafından devralınır. Bir öğe metin içeriyorsa (başlıklı UIButton, metinli UILabel), Etiket otomatik olarak bu metne ayarlanır. UIImageView, özel kontroller ve kapsayıcılar için Etiketin manuel olarak ayarlanması gerekir.

Özel bir tablo hücresi örneği:

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

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

Özel UIView için accessibilityLabel alıcısını geçersiz kılabilirsiniz:

class RatingView: UIView {
    var rating: Int = 5

    override var accessibilityLabel: String? {
        get { return "Değerlendirme: \(rating) / 5" }
        set {}
    }
}

Apple HIG, 2024 şunu önerir: bir öğe birden çok alt öğeden oluşuyorsa (örn. adı ve fiyatı olan bir ürün kartı), bunları bileşik bir Etikete sahip tek bir erişilebilirlik öğesinde birleştirin. Öğe ebeveynde isAccessibilityElement = true ve çocuklarda false olarak ayarlayın.

NSAttributedString ve accessibilityLabel

UILabel NSAttributedString kullanırsa, accessibilityLabel varsayılan olarak .string'e (düz metin) eşittir. Anlamsal olarak farklı bir değer iletmeniz gerekiyorsa (örn. bir sembol simgesi ★ karakteri yerine “Yıldız” olarak okunur), accessibilityLabel'ı açıkça ayarlayın. VoiceOver, Unicode karakterlerini anlamlı bir şekilde okumaz.

Android: contentDescription ile Label

Android'de contentDescription, ImageView, ImageButton ve özel View'ler için Etiket görevi görür. Yerleşik metne sahip TextView ve Button için contentDescription ayarlamak gerekmez — TalkBack metni otomatik olarak okur.

Kotlin ile programlama yoluyla ayarlama:

binding.iconStar.contentDescription = "Favorilerdeki ürün"

// Birden çok öğeli özel View için
binding.customCard.setContentDescription(
    "\(title) şu fiyata: \(price)")

Dekoratif öğeler için XML'de:

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

importantForAccessibility = “no” özelliği, öğeyi erişilebilirlik ağacından tamamen çıkarır. iOS'ta eşdeğeri isAccessibilityElement = false'tur.

Compose: semantics ve contentDescription

Jetpack Compose'da Etiket, semantics değiştiricisi aracılığıyla ayarlanır:

Image(
    painter = painterResource(R.drawable.ic_search),
    contentDescription = "Ürün ara",
    modifier = Modifier.semantics {
        contentDescription = "Ürün ara"
    }
)

Compose'da contentDescription, Image için zorunlu bir parametredir — onsuz kod derlenmez (uyarı). Bu, API tasarımı yoluyla erişilebilirliği zorla iyileştirir.

Label ve Hint: rol farkı

Accessibility Label “Bu öğe nedir?” sorusunu yanıtlar. Hint (iOS'ta accessibilityHint, Android'de contentDescription içinde ek metin) — “Etkileşimde ne olacak?” VoiceOver bunları sırayla okur: önce Label, sonra Hint.

Sil düğmesi örneği:

• Label: “Sil”
• Hint: “Seçilen fotoğrafı kalıcı olarak siler”
• VoiceOver: “Sil. Seçilen fotoğrafı kalıcı olarak siler”

Deque University, 2024'e göre, Label ve Hint'in doğru ayrımı, VoiceOver kullanıcıları için görev tamamlama oranını %28 artırır. Bilişsel engelli kullanıcılar özellikle Hint'e bağımlıdır: açıklama olmadan “Sil”e basma konusunda emin olmadıklarında, %40'ı eylemi reddeder.

Hint'in gerekli olmadığı durumlar

• Sezgisel olarak anlaşılabilir eyleme sahip öğe (“Geri”, “Kapat” — Label yeterlidir)
• Label zaten sonucu tanımlıyor (“Mesaj gönder” — adın kendisinde fiil)
• Sistem kontrolleri (UISwitch, sistem türünde UIButton) — davranışları standarttır

Yaygın hatalar: Hint yerine Label

Sık yapılan bir hata: Label'da “Sil” yerine “Sil düğmesi” yazmak. Öğe türü (Düğme), VoiceOver tarafından bir özellik aracılığıyla otomatik olarak eklenir. Sonuç olarak kullanıcı şunu duyar: “Sil düğmesi, düğme” — yineleme. Doğru Label: “Sil”, Hint: “Seçilen fotoğrafı siler”.

Yerelleştirme ve en iyi uygulamalar

Etiket yerelleştirmesi zorunludur — standart mekanizmalar aracılığıyla yapılır: iOS'ta NSLocalizedString, Android'de dize kaynakları @string/. Yerelleştirme olmadan asla İngilizce birleştirme ile Etiket ayarlamayın.

W3C WCAG 2.2 tabanlı iyi Etiket kuralları:

• Anahtar kelimeyle başlayın — “Ürün ara”, “Ürün arama alanı” değil
• “düğme”, “alan”, “görsel” kelimelerini eklemeyin — rol otomatik olarak eklenir
• Hedef kitlenin anlayabileceği doğal bir dil kullanın
• Kısaltmalardan kaçının (yaygın olarak kabul edilenler hariç: “ad.”, “kg”) — ekran okuyucu bunları harfiyen okur
• Giriş öğeleri için bir örnek ekleyin: “E-posta (ornek@alan.com)”

Marka genelinde Etiket tutarlılığı

Uygulama genelinde Etiketler için tek bir sözlük kullanın. Bir ekranda “Favoriler” ve diğerinde “Yer İmleri” yazıyorsa, kullanıcının kafası karışır. Bir erişilebilirlik terminoloji tablosu oluşturun — tasarımcılar ve yerelleştiricilerle koordine edin.

Form öğeleri için Etiketler

Giriş alanları (UITextField, EditText) için Etiket, yer tutucu veya alan etiketiyle eşleşmelidir. Ancak, metin girdikten sonra yer tutucu genellikle kaybolur. Kalıcı ad için accessibilityLabel ve geçerli alan içeriği için accessibilityValue kullanın — bu WCAG 4.1.2 standardıdır. Çözüm: accessibilityLabel'ı statik olarak (alan etiketine eşit) ve accessibilityValue'yı dinamik olarak (girilen metne eşit) ayarlayın. iOS'ta bu otomatiktir, ancak özel alanlar için accessibilityValue'yı geçersiz kılarak manuel olarak yapılır. VoiceOver'ın “, metin alanı” yerine “E-posta, ornek@alan.com, metin alanı” okuduğunu doğrulayın.

Erişilebilirlik etiketleri nasıl test edilir

Otomatik testler, tüm ekranlarda Etiketlerin doğruluğunu garanti etmenin tek yoludur. iOS, .label'e erişimli XCUIApplication sağlar, Android — AccessibilityCheckRule ve setContentDescription.

iOS için test örneği:

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,
        "Yinelenen Etiketler bulundu")
}

Espresso ile Android için örnek:

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

Manuel test: VoiceOver (iOS) veya TalkBack (Android) etkinleştirin ve ekrandaki tüm öğeleri sağa kaydırın. Her öğe anlamlı bir duyuru almalıdır. Yalnızca “düğme” veya “görsel” duyuyorsanız — Etiket eksiktir.

VoiceOver rotoru ve hızlı gezinme

Etiketi ayarladıktan sonra VoiceOver kullanıcıları hızlı gezinme için rotoru kullanabilir: “Düğmeler”, “Başlıklar”, “Bağlantılar” ve diğer modlar. Etiket doğru ayarlanmışsa, VoiceOver öğeyi ilgili rotor moduna dahil eder. Tüm düğmelerin “Düğmeler” modunda, tüm başlıkların “Başlıklar” modunda göründüğünü doğrulayın.

Etiket ayrıca VoiceOver aramasını da etkiler. Kullanıcı arama modunda bir kelime yazabilir ve VoiceOver, eşleşen Etikete sahip öğeye odaklanır. Bu nedenle, Etiketler kullanıcının arayacağı anahtar kelimeleri içermelidir.

CI/CD hattına entegrasyon

Etiket denetimini hatta ekleyin. iOS'ta fastlane scan ile XCUITest kullanın. Android'de boş contentDescription'ları algılayan AccessibilityCheckRule kuralıyla Accessibility Test Framework'ü kullanın. Bu, yeni ekranlar birleştirilirken gerilemeleri önler.