- Konu sahibi
- #1
Ekran okuyucu, sayfayı görsel olarak taramaz; tarayıcının HTML’den oluşturduğu erişilebilirlik ağacını okuyarak algılar. Bu ağaçta öğelerin adı, rolü, durumu, değeri ve belge içindeki sırası bulunur. Bu nedenle ekranda güzel görünen bir tasarım, anlamlı HTML yapısı yoksa ekran okuyucu kullanıcısına başlıksız, düzensiz veya işlevsiz görünebilir.
Tarayıcı önce HTML DOM ağacını oluşturur, ardından kullanıcı arayüzü açısından anlamlı öğeleri erişilebilirlik ağacına aktarır. Ekran okuyucu bu ağaç üzerinden başlıkları, bağlantıları, düğmeleri, formları ve içerik bölgelerini kullanıcıya bildirir.
Bir öğenin algılanma biçimini genellikle şu bilgiler belirler:
Örneğin
Aşağıdaki küçük belge, ekran okuyucunun anlamlı bir sırayla okuyabileceği en küçük örneklerden biridir:
Belgeyi
Bir alanın etiketi okunmuyorsa önce
Aynı içeriğin farklı HTML biçimleri farklı sonuçlara yol açar:
Bu tablo yalnızca etiket seçimini özetler. CSS ile bir öğeyi başlık gibi göstermek, onu ekran okuyucuya başlık yapmaz. Benzer şekilde
Görsel sıralamayı CSS ile değiştirip DOM sırasını değiştirmemek, başlık seviyelerini yalnızca yazı boyutuna göre seçmek, bağlantı metnini “buraya tıklayın” yapmak ve ikon düğmelerine erişilebilir ad vermemek sık görülür. Ayrıca ekran okuyucunun okuyacağı metni CSS ile gizlemek, içeriğin tamamen erişilebilir olacağı anlamına gelmez; kullanılan gizleme yöntemi içeriğin erişilebilirlik ağacında kalıp kalmayacağını etkiler.
Hayır. CSS’nin görsel düzenini doğrudan okumaz; tarayıcının HTML, stil ve etkileşim sonucunda oluşturduğu erişilebilirlik bilgilerini kullanır. CSS ile görünen bir öğe HTML’de anlamsızsa ekran okuyucu bunu doğru rolde sunmayabilir.
Genellikle tutmaz. Önce yerleşik HTML öğelerini kullanın. ARIA; özel bir bileşenin rolünü, durumunu veya ilişkisini açıklamak gerektiğinde tamamlayıcı olarak kullanılmalıdır.
Erişilebilirlik ağacı nasıl oluşur?
Tarayıcı önce HTML DOM ağacını oluşturur, ardından kullanıcı arayüzü açısından anlamlı öğeleri erişilebilirlik ağacına aktarır. Ekran okuyucu bu ağaç üzerinden başlıkları, bağlantıları, düğmeleri, formları ve içerik bölgelerini kullanıcıya bildirir.
Bir öğenin algılanma biçimini genellikle şu bilgiler belirler:
- Rol: Öğenin başlık, düğme, bağlantı, kutu veya gezinme bölgesi olması.
- İsim: Kullanıcıya okunan görünen metin, etiket veya alternatif metin.
- Durum: Bir açılır listenin açık olması, onay kutusunun işaretli olması veya düğmenin devre dışı bırakılması.
- Sıra: Okuma sırası ile klavye odak sırası ayrı kavramlardır. DOM sırası okuma akışını etkiler; Tab çoğunlukla bağlantı ve form kontrolü gibi odaklanabilir öğeleri dolaşır, her paragrafı okumaz.
- İlişki: Bir form alanının etiketi, bir başlığın bölümle ilişkisi veya hata mesajının ilgili alana bağlanması.
Örneğin
<button>Kaydet</button> doğrudan düğme rolü ve “Kaydet” adı sağlar. Aynı metin yalnızca tıklama olayı eklenmiş bir div içinde bulunursa, tarayıcı bunu kendiliğinden düğme olarak kabul etmeyebilir.Somut bir sayfa örneği
Aşağıdaki küçük belge, ekran okuyucunun anlamlı bir sırayla okuyabileceği en küçük örneklerden biridir:
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Hesap özeti</title>
</head>
<body>
<header>
<h1>Hesap özeti</h1>
<nav aria-label="Ana menü">
<a href="/">Ana sayfa</a>
<a href="/ayarlar">Ayarlar</a>
</nav>
</header>
<main>
<h2>İletişim bilgileri</h2>
<form>
<label for="email">E-posta</label>
<input id="email" name="email" type="email">
<button type="button">Kaydet</button>
</form>
</main>
</body>
</html>Belgeyi
.html uzantısıyla kaydedip tarayıcıda açtığınızda ekran okuyucu; önce “Hesap özeti” başlığını, ardından “Ana menü” bölgesini ve bağlantıları, sonra “İletişim bilgileri” başlığını, “E-posta” alanını ve “Kaydet” düğmesini algılayabilir. Bu örnekte düğmeye kayıt işlevi bağlanmamıştır; amaç alanların adını ve rolünü incelemektir. Ekran okuyucu kullanıcısı başlık veya bölge kısayollarıyla doğrudan ilgili yere atlayabilir, bu sıranın tamamını dinlemek zorunda değildir. Gerçekte okunacak tam ifade kullanılan tarayıcıya ve ekran okuyucuya göre değişebilir; ancak rol, ad ve sıra ilişkisi bu HTML yapısından gelir.Bir alanın etiketi okunmuyorsa önce
label öğesinin for değeriyle ilgili girişin id değerinin eşleştiğini kontrol edin. Düğme yerine tıklanabilir div kullanılmışsa sorun yalnızca metin eklemekle çözülmez; klavye davranışı, odaklanma ve düğme rolü de eksik kalabilir.Öğeleri ekran okuyucu açısından değerlendirme
Aynı içeriğin farklı HTML biçimleri farklı sonuçlara yol açar:
| İçerik | Tercih edilen HTML | Ekran okuyucuya katkısı |
|---|---|---|
| Sayfa başlığı | h1 | Başlık listesinde ve okuma akışında görünür. |
| İşlem | button | Düğme rolü ve klavye etkileşimi sağlanır. |
| Hedefe geçiş | <a href="..."> | Bağlantı olarak duyurulur. |
| Dekoratif görsel | alt="" | Gereksiz görsel açıklaması okunmaz. |
Bu tablo yalnızca etiket seçimini özetler. CSS ile bir öğeyi başlık gibi göstermek, onu ekran okuyucuya başlık yapmaz. Benzer şekilde
display:none veya hidden kullanılan içerik genellikle erişilebilirlik ağacından çıkarılır; bu özellikleri yalnızca gerçekten gizlenmesi gereken içerikte kullanın.Uygulanabilir kontrol adımları
- Sayfanın ana içeriğini
main, gezinmeyinav, başlıklarıh1–h6ve bölümleri uygun başlıklarla işaretleyin. - Sayfayı yalnızca klavyeyle dolaşın. Odak sırası görsel sırayla uyuşmuyorsa DOM sırasını ve gereksiz
tabindexdeğerlerini düzeltin. - Her form alanına açık bir
labelbağlayın; hata veya yardım metnini ilgili alanla ilişkilendirin. - Görsellerde bilgi taşıyan kısa bir
altmetni kullanın, yalnızca dekoratif görsellerde boşaltdeğeri verin. - Dinamik içerik değiştiğinde odak kayboluyor veya güncelleme duyulmuyorsa ilgili bileşenin durumunu ve uygun ARIA ilişkilerini test edin. ARIA, eksik veya hatalı HTML anlamını otomatik olarak düzeltmez.
Sık yapılan hatalar
Görsel sıralamayı CSS ile değiştirip DOM sırasını değiştirmemek, başlık seviyelerini yalnızca yazı boyutuna göre seçmek, bağlantı metnini “buraya tıklayın” yapmak ve ikon düğmelerine erişilebilir ad vermemek sık görülür. Ayrıca ekran okuyucunun okuyacağı metni CSS ile gizlemek, içeriğin tamamen erişilebilir olacağı anlamına gelmez; kullanılan gizleme yöntemi içeriğin erişilebilirlik ağacında kalıp kalmayacağını etkiler.
Kaynaklar
Sık sorulan sorular
Ekran okuyucu CSS dosyasını okur mu?
Hayır. CSS’nin görsel düzenini doğrudan okumaz; tarayıcının HTML, stil ve etkileşim sonucunda oluşturduğu erişilebilirlik bilgilerini kullanır. CSS ile görünen bir öğe HTML’de anlamsızsa ekran okuyucu bunu doğru rolde sunmayabilir.
ARIA kullanmak semantik HTML’nin yerini tutar mı?
Genellikle tutmaz. Önce yerleşik HTML öğelerini kullanın. ARIA; özel bir bileşenin rolünü, durumunu veya ilişkisini açıklamak gerektiğinde tamamlayıcı olarak kullanılmalıdır.
