Content Description: nedir, ilkeleri ve erişilebilirlik için nasıl ayarlanır

Erişilebilirlikte Content Description Nedir

Content Description, görsel içeriğin metinsel temsilini yardımcı teknolojilere sağlayan bir kullanıcı arayüzü öğesinin dize özelliğidir. Bir ekran okuyucu (iOS'ta VoiceOver, Android'de TalkBack), öğeyi görsel olarak tanımaya çalışmak yerine açıklamayı sesli olarak okur. Açıklamalar, metin katmanı olmayan resimlere, simgelere, grafiklere, özel denetimlere ve metinsel olmayan tüm öğelere uygulanır.

Google Material Design, 2024'e göre, contentDescription'ı olmayan öğeler WCAG 1.1.1 (Non-text Content) ihlalidir. Accessibility Scanner kontrolleri, alışveriş uygulamalarındaki simgelerin %40'a kadarının açıklamasının olmadığını göstermektedir. Bir VoiceOver kullanıcısı, belirtme olmadan yalnızca “resim” veya “düğme” duyar — böyle bir arayüz gezinme için kullanılamaz hale gelir.

Content Description, bir öğenin görünür metninin yerini almaz. Bir düğme “Gönder” metin etiketi içeriyorsa, ek bir açıklama ayarlamaya gerek yoktur — ekran okuyucu metni okuyacaktır. Resimler, simgeler ve giriş alanları için açıklama zorunludur.

Accessibility Scanner (Android) ve Xcode Accessibility Inspector (iOS) araçları otomatik olarak açıklamaların varlığını kontrol eder. Yayınlamadan önce her ekranda bu kontrollerin çalıştırılması önerilir.

Content Description Neden Önemlidir: Kullanıcı Senaryoları

Görme engelli bir kullanıcı, arayüzü anlamak için VoiceOver'a güvenir. Bir alışveriş sepeti simgesinin açıklaması yoksa, yalnızca “düğme” duyar. Düğmenin ne yaptığını öğrenmek için körü körüne dokunması gerekir — geri dönüşü olmayan bir eylem riski. “Sepetten öğeyi kaldır” gibi bir açıklama bu sorunu bir saniyede çözer.

Geçici kısıtlamaları olan bir kullanıcı (dışarıda parlak güneş, kırık ekran) da VoiceOver'ı kullanır. Apple Accessibility Report, 2023'e göre, VoiceOver kullanıcılarının yaklaşık %20'sinin kalıcı görme bozukluğu yoktur — özelliği durumsal olarak açarlar.

WCAG 1.1.1: Metinsel Olmayan İçerik

WCAG 1.1.1 (Seviye A) kriteri, tüm metinsel olmayan içeriğin bir metin alternatifine sahip olmasını gerektirir. İstisna: dekoratif olan, yalnızca görsel sunum için kullanılan veya bilgi aktarmayan içerik. Dekoratiflik testi: öğeyi kaldırırsanız, sayfanın anlamı değişir mi? Değilse — ekran okuyucudan gizlenebilir.

Content Description ile Label Arasındaki Fark

Accessibility Label (iOS'ta accessibilityLabel), odaklandığında ekran okuyucunun söylediği öğe adıdır. Content Description (iOS'ta accessibilityHint), addan sonra okunan ve bir eylemin sonucunu bildiren ek açıklamadır.

Fark, bir “Sepet” düğmesi örneğinde açıktır. Label: “Sepet.” Description: “Ödeme ekranını açar.” VoiceOver: “Sepet. Ödeme ekranını açar.” Yalnızca Label ayarlanmışsa, kullanıcı dokunduktan sonra ne olacağını bilemez.

Tablo: Label ve Description Karşılaştırması

Kural: Label “Bu nedir?” sorusunu yanıtlar, Description “Ne olacak?” sorusunu yanıtlar. Android'de contentDescription her iki rolü de oynayabilir, ancak pratikte bunları ayırmak daha iyidir: “[ad], [açıklama]” birleştirmesini kullanın.

Description Ne Zaman Label'dan Daha Önemlidir

Karmaşık hareketler (silmek için kaydırma, bağlam menüsü için uzun basma) için accessibilityHint zorunludur. Bir VoiceOver kullanıcısı, tanımlanmadıkça gizli hareketleri bilmez. Öğenin hint'inde “Silmek için sola kaydırın” belirtin.

iOS: accessibilityHint Özniteliği

iOS platformunda, accessibilityHint, UIView veya NSObject'in aynı adlı özelliği aracılığıyla ayarlanır. Değer, 80 karaktere kadar bir dizedir. VoiceOver, ayrıntılı açıklama modu etkinleştirildiğinde (VoiceOver ayarlarında “Verbosity”), etiketten sonra hint'i okur.

Özel bir düğme için hint ayarlama örneği:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "Favorilere ekle"
        self.accessibilityHint = "Öğeyi favori listesine kaydeder"
    }
}

Metin içeriği olmayan UIImageView için isAccessibilityElement = true ve accessibilityHint ayarlamak zorunludur:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "Son çeyreğin satış grafiği"

VoiceOver okur: “Son çeyreğin satış grafiği”. Hint boşsa — yalnızca “resim”. Apple HIG, 2024, hint'lerde “dokun” veya “bas” gibi fiillerin kullanılmamasını önerir — VoiceOver otomatik olarak bir hareket talimatı ekler.

SwiftUI: accessibilityHint Değiştiricisi

SwiftUI'da hint, bir zincir değiştirici aracılığıyla ayarlanır:

Image(systemName: "trash")
    .accessibilityLabel("Sil")
    .accessibilityHint("Seçili öğeyi kalıcı olarak siler")

SwiftUI, bileşik görünümler için değiştiricileri otomatik olarak birleştirir. Bir Image, Button'un içindeyse, SwiftUI düğme etiketini birincil accessibilityLabel olarak kullanır.

Android: contentDescription Özelliği

Android'de contentDescription, XML işaretlemesinde veya programlı olarak setContentDescription() aracılığıyla ayarlanır. TalkBack, öğe odak aldığında açıklamayı okur.

XML örneği:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="Ürünleri ara" />

Dinamik öğeler için programlı ayarlama:

binding.iconSearch.contentDescription =
    "Ara. Filtrelerle arama ekranını açar"

Dekoratif resimler (ayırıcılar, arka planlar, dekoratif simgeler) için contentDescription = "@null" veya setContentDescription(null) ayarlayın — TalkBack bu öğeleri atlar. XML'de: android:contentDescription="@null". Boş dize "" çalışmaz — TalkBack yine de “resim” okur.

Android: ImageButton ve CheckBox İçin Önemli Detaylar

ImageButton için her zaman contentDescription ayarlayın — TalkBack resimlerdeki metni görmez. CheckBox için açıklama dinamik olarak değişmelidir: statik bir açıklama yerine “Seçildi” / “Seçilmedi”. Durum dinleyicisinde setContentDescription kullanın.

Açıklama Yazma Kuralları

Bilgilendiricilik — açıklama anlamı iletmeli, görünümü değil. “Onay işaretli mavi simge” değil, “Öğe sepete eklendi”. Bir ekran okuyucu renklerle ilgilenmez — sonuçla ilgilenir.

Kısalık — optimum uzunluk 2–4 kelimedir (80 karaktere kadar). Uzun açıklamalar gezinmeyi yavaşlatır: VoiceOver sırayla okur, her kelime kullanıcının zamanının bir saniyesidir. Apple WWDC 2023, “Accessibility by Design”'a göre, okunması 5 saniyeden uzun süren bir ifade bilişsel akışı kesintiye uğratır.

Benzersizlik — aynı ekranda aynı açıklamaya sahip iki öğe olmamalıdır. Kullanıcı, ilk öğeye karşı ikinci öğeye odaklanmanın hangi sonucu tetikleyeceğini ayırt edemez. Birden fazla “Satın Al” düğmesi varsa, bir tanımlayıcı ekleyin: “iPhone 15 Satın Al”, “iPhone 15 Pro Satın Al”.

Yerelleştirme — Content Description, uygulamanın desteklediği tüm dillere çevrilmelidir. Açıklamalardaki yerelleştirme hatası, App Store'da bir Accessibility Review'nin başarısız olmasının yaygın nedenlerinden biridir.

Açıklama Uzunluğu: Araştırma

Nielsen Norman Group, 2024 araştırması, ekran okuyucular için optimum açıklama uzunluğunun 3–5 kelime (50 karaktere kadar) olduğunu göstermiştir. Daha uzun açıklamalar, kullanıcının bir sonraki adımdan önce okumanın bitmesini beklemesi gerektiğinden gezinme hızını %30 azaltır.

Kullanımda Yaygın Hatalar

Gereksiz tekrar — açıklama görünür metni çiftler. Bir düğme “Gönder” metni içeriyorsa, accessibilityHint = “Gönder düğmesi” ayarlamayın. VoiceOver metni otomatik olarak okur ve hint gereksiz gürültü ekler.

Label ile Karıştırma — metin düğmeleri için etiket yerine contentDescription kullanmak. iOS'ta accessibilityLabel, düğme metniyle eşleşmeli (veya metin zaten görünüyorsa boş olmalı) ve hint yalnızca eylemi açıklamalıdır. Google Testing Blog, 2024'e göre, Play Store'da incelenen uygulamaların %23'ünde yinelenen açıklamalar bulunmaktadır.

Dinamiği Göz Ardı Etme — durum değiştiğinde açıklama güncellenmez. Örneğin, bir “Wi-Fi” anahtarının açıklaması, açıldıktan sonra bile “Wi-Fi'yi Etkinleştir” olarak kalır. Doğru yaklaşım: durumu gözlemleyerek açıklamayı dinamik olarak “Wi-Fi'yi Devre Dışı Bırak” olarak değiştirmek.

İşleme Döngüleri ve Gerilemeler

Bir tasarım güncellemesinden (simge değişiklikleri, öğe yeniden düzenlemesi) sonra, Content Description genellikle kaybolur. Sebep: tasarımcı bir resmi değiştirir ve geliştirici yeni varlığın erişilebilirlik özelliklerini kontrol etmez. Çözüm: kod incelemesinde erişilebilirlik kontrolünü zorunlu bir adım haline getirin — bir kontrol listesi öğesi ekleyin: “Content Description güncellendi mi?”

Content Description Nasıl Kontrol Edilir

• iOS'ta: Xcode → Accessibility Inspector — öğeyi seçin, Label ve Hint alanlarını kontrol edin
• Android'de: Play Store'dan Accessibility Scanner yükleyin — ekranınızda çalıştırın
• Her iki platformda: VoiceOver/TalkBack'i etkinleştirin ve hareketlerle tüm ekranda gezinin
• Tüm ImageView'ler için contentDescription kontrol eden bir UI testi yazın

iOS İçin UI Testi Örneği

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