Bir web sayfasının görünmeyen haritası: Ekran okuyucu neyi izler?

Soyut bir web sayfasının yapısal bölümlerinden kulaklık ve Braille ekrana uzanan ışıklı yolları gösteren kavramsal illüstrasyon.

Bir tren seferi aramak için açtığınız sayfayı düşünün. Ekranda büyük bir başlık, kalkış saatleri, bir harita ve “Bilet al” düğmesi var. Görerek kullanan biri bunların ilişkisini renk, konum ve yazı büyüklüğünden çıkarabilir. Ekran okuyucu kullanan kişi ise sayfada sırayla ilerleyebilir veya başlıklar ve bağlantılar arasında dolaşabilir. Bu iki yolun anlaşılır olması, sayfanın yalnızca nasıl göründüğüne değil, içeriğin kodda nasıl tanımlandığına bağlıdır.

Büyük yazı her zaman başlık değildir

Bir tasarımcı “Sefer saatleri” sözünü kocaman ve kalın gösterebilir. Fakat bu söz sıradan bir metin öğesi olarak yazılmışsa, ekran okuyucunun başlıklar listesinde yer almayabilir. W3C Web Erişilebilirliği Girişimi’nin başlık kılavuzu, başlık öğelerinin sayfanın düzenini ilettiğini ve yardımcı teknolojilerin bunları sayfa içinde gezinmek için kullanabildiğini açıklıyor. Yazının ana adı birinci düzey başlık, onun altındaki “Gidiş” ve “Dönüş” bölümleri ikinci düzey başlık olabilir. “Gidiş” altında “Aktarmalar” gibi gerçek bir alt bölüm varsa bir alt düzey anlam kazanır.

Başlık düzeyleri görsel boyut seçeneği değildir; hangi bölümün hangisine bağlı olduğunu anlatır. Bu yüzden görünümü ayarlamak için başlık düzeyini atlamak kafa karıştırabilir. W3C, örneğin ikinci düzey başlığın hemen ardından dördüncü düzeye geçmekten kaçınmayı öneriyor. Her kalın sözcüğü de başlığa dönüştürmek gerekmez. Başlıklar, okurun atlayıp gidebileceği gerçek bölümleri işaretlesin. Sefer sayfasında yalnızca kalkış saatini arayan biri böylece önce ilgili bölüme geçebilir, tüm üst menüyü ve tanıtım metnini baştan dinlemek zorunda kalmaz.

Sayfanın bölgeleri ve bağlantıları

Başlıklar içerideki bölümleri ayırırken sayfanın daha geniş parçaları da tanımlanabilir. Üst bilgi, gezinme menüsü ve ana içerik için uygun HTML öğeleri kullanıldığında tarayıcı ve yardımcı teknoloji bunları ayırt edebilir. W3C’nin sayfa bölgeleri kılavuzu, ana içerik için “main”, gezinme menüsü için “nav” kullanımını gösteriyor. Aynı sayfada birden fazla gezinme menüsü varsa bunlara açıklayıcı adlar vermek, “ana menü” ile “sayfa içindekiler” menüsünü ayırmaya yardım eder. Ama sayfadaki her kutuyu ayrı bir bölgeye çevirmek yol bulmayı kolaylaştırmaz; bölge, gerçekten ayrı bir görev taşımalı.

Bağlantının adı da hedefi anlatmalıdır. Tek başına “Buraya tıklayın” veya aynı sayfada tekrarlanan “Devamını oku” bağlantıları, bir bağlantı listesinden seçim yapan kişiye yeterince ipucu vermeyebilir. “25 Ekim tren saatlerini görüntüle” daha belirli bir hedef söyler. WCAG 2.2’nin bağlantı amacı açıklaması, amacın bağlantı metninden ya da programca belirlenebilen bağlamından anlaşılmasını ister. Bu nedenle her “Devamını oku” bağlantısı otomatik olarak kurala aykırı değildir; yanında hangi habere ait olduğu uygun biçimde ilişkilendirilmiş olabilir. Yine de bağlantı tek başına okunduğunda açık olması, kullanımı kolaylaştırır.

Görsellerde de aynı bağlam sorusu vardır. Sefer değişikliğini yalnızca kırmızı bir uyarı simgesi bildiriyorsa alternatif metin bu işlevi aktarmalıdır. Kalkış istasyonunu gösteren bir şema bilgi taşıyorsa kısa bir açıklama gerekir; karmaşık ayrıntılar için yakınında daha uzun metin bulunabilir. Sırf sayfayı süsleyen bir tren fotoğrafıysa boş alternatif metin daha uygundur. W3C’nin görseller kılavuzu, bilgilendirici, süsleyici ve işlevsel görselleri bu amaçlarına göre ayırıyor. Her görsele “tren resmi” yazmak, bilginin ne olduğunu anlatmayabilir; gereksiz görsel açıklamaları da okuma akışını uzatır.

Bu yapıyı kontrol etmek için önce sayfayı görsel sıradan bağımsız düşünün. Başlıklar listesinde “Sefer saatleri” bulunuyor mu? Ana içeriğe geçildiğinde aranan bilgiye ulaşılabiliyor mu? Bağlantılar kendi başına veya uygun bağlamıyla hedefini söylüyor mu? Görsel kapatıldığında eksilen bilgi metinde var mı? Ardından sayfayı klavyeyle ve gerçek bir ekran okuyucuyla deneyin. Doğru HTML iyi bir başlangıçtır; ancak yalnızca kodu görmek, bütün etkileşimlerin kullanılabildiğini kanıtlamaz. Okurun seferi bulup doğru bağlantıya gidebildiği akışı baştan sona sınamak gerekir.

Metin ve kavramsal kapak görseli yapay zekâ desteğiyle hazırlanmıştır. Kaynak bağlantıları 25 Ekim 2026’da kontrol edilmiştir.

Tags
What do you think?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İlginizi çekebilir