Web Erişilebilirliği: Klavyeyle Kullanılamayan Site Yarım Sitedir

Web erişilebilirliği (kısaca a11y), çoğu ekipte projenin sonuna bırakılan ve genellikle hiç sıra gelmeyen bir başlıktır. Oysa erişilebilirlik yalnızca ekran okuyucu kullanan kullanıcıları ilgilendirmez: geçici olarak kolu alçıda olan, güneş altında ekranı zor gören, eski bir cihazla bağlanan ya da sadece klavyeyi tercih eden herkesi ilgilendirir. Bu yazıda ölçülebilir fark yaratan, kısa sürede uygulanabilir adımlara odaklanıyoruz.

En hızlı test: fareyi bırakın

Erişilebilirlik denetimine başlamanın en ucuz yolu, farenizi kenara koyup siteyi yalnızca Tab, Enter, Boşluk ve ok tuşlarıyla kullanmaya çalışmaktır. Bu test hiçbir araç gerektirmez ve tipik olarak beş dakikada üç ciddi sorun ortaya çıkarır:

• Odaklanılan öğe görünmüyor — nerede olduğunuzu bilemiyorsunuz.
• Bir açılır pencere açılıyor ama odak içine girmiyor, ya da kapanınca odak kayboluyor.
• Menü div ile yapıldığı için Tab sırasına hiç girmiyor.

Bu üç sorun, klavye kullanan bir ziyaretçi için siteyi pratikte kullanılamaz hâle getirir.

Semantik HTML: en yüksek getirili adım

Erişilebilirlikte en büyük kazanç, doğru etiketi kullanmaktan gelir. <div onclick> ile yapılan bir düğme görsel olarak düğmeye benzer ama klavyeyle odaklanılamaz, Enter ile tetiklenmez ve ekran okuyucuya "düğme" olarak bildirilmez. <button> ise bunların hepsini ücretsiz getirir.

Aynı mantık form alanları için de geçerlidir: her girdinin bir <label> etiketiyle ilişkilendirilmesi hem ekran okuyucu için hem de tıklama alanını büyüttüğü için herkes açısından iyileştirmedir. Hata mesajlarının ilgili alana bağlanması da kritik bir ayrıntıdır — form doğrulamanın hem istemcide hem sunucuda yapılması gerektiğini anlatan yazımızdaki mantık burada arayüz katmanına uzanır: kullanıcı hatanın hangi alanda olduğunu duyabilmelidir.

ARIA: az kullanın, doğru kullanın

ARIA öznitelikleri, semantik HTML'in yetmediği durumlar için tasarlanmıştır — yanlış kullanıldığında ise durumu kötüleştirir. Pratik kural şudur: bir öğeye role="button" yazmak yerine gerçekten <button> kullanın. ARIA'ya asıl ihtiyaç, sekmeli arayüzler, açılır menüler ve canlı bölgeler gibi HTML'de doğrudan karşılığı olmayan bileşenlerde ortaya çıkar.

Görsel katman: kontrast ve odak

Metin ile arka plan arasındaki kontrast oranının normal metinde en az 4.5:1 olması beklenir. Bu, çoğu sitede en sık ihlal edilen kuraldır — özellikle açık gri üzerine biraz daha koyu gri kullanan "zarif" tasarımlarda. İkinci yaygın hata, odak göstergesinin (outline) estetik gerekçesiyle tamamen kaldırılmasıdır. Görünümü beğenmiyorsanız gizlemek yerine değiştirin; kaldırmak, klavye kullanıcısının yolunu kapatır.

Rengin tek başına bilgi taşımaması da temel bir kuraldır: yalnızca kırmızıya boyanmış bir alan, renk körlüğü olan kullanıcı için hiçbir şey söylemez. Renkle birlikte metin veya simge kullanın.

Otomatik araçlar ne kadar yardımcı olur?

Tarayıcıdaki denetim araçları ve otomatik test eklentileri faydalıdır ama sınırları vardır: tipik olarak sorunların üçte birini yakalarlar. Kontrast, eksik alt metni ve etiketsiz form alanı gibi kuralları iyi denetlerler; buna karşılık "odak sırası mantıklı mı", "bu alt metin gerçekten anlamlı mı" gibi soruları yanıtlayamazlar.

Pratik yaklaşım, otomatik denetimi dağıtım hattına eklemek (bkz. CI/CD kurgusu) ve buna klavye testi ile ekran okuyucu denemesini eklemektir. Ayrıntılı kural referansı için MDN erişilebilirlik dokümantasyonu güncel ve kapsamlıdır.

Yan fayda: performans ve görünürlük

Erişilebilirlik çalışmasının sık gözden kaçan bir getirisi, arama motoru görünürlüğüyle örtüşmesidir. Anlamlı başlık hiyerarşisi, açıklayıcı bağlantı metinleri ve görsellerin alt metinleri, hem ekran okuyucunun hem tarayıcı botunun aynı sinyalleri okumasını sağlar. Bu örtüşme, teknik SEO kontrol listemizdeki birçok maddeyle doğrudan aynıdır — iki iş, tek çalışmayla ilerler. Aynı sinyallerin yapay zekâ motorlarındaki karşılığı için GEO optimizasyonu yazımıza bakabilirsiniz.

Nereden başlamalı?

Tüm siteyi bir seferde düzeltmeye çalışmak işi durdurur. İşleyen sıra şudur: önce en çok kullanılan üç akışı (giriş, arama, satın alma veya form gönderimi) klavyeyle uçtan uca gezin ve çıkan sorunları düzeltin. Ardından bileşen kütüphanenizdeki düğme, form alanı ve modal bileşenlerini düzeltin — bunlar tek tek sayfaları değil, tüm siteyi birden iyileştirir.

Sonuç

Web erişilebilirliği, ayrı bir proje olarak ele alındığında hiç başlamayan, günlük geliştirme akışına gömüldüğünde ise şaşırtıcı derecede ucuz olan bir kalite başlığıdır. Doğru HTML etiketini kullanmak, odak göstergesini korumak, kontrastı ölçmek ve rengi tek bilgi taşıyıcısı yapmamak — bu dört alışkanlık sorunların büyük kısmını baştan engeller. Bugün beş dakikanızı ayırın: en çok kullanılan sayfanızı yalnızca klavyeyle gezin. Bulacağınız ilk sorun, muhtemelen aylardır orada duruyordur.