Erişilebilir web tasarımı, yayın sonrası bir denetim maddesi değil; klavye dolaşması, odak halkası, etiket ve metin alternatifinin tasarım kararlarına bağlanmasıdır. Bu rehber, bu dört işi somut örneklerle sayfa düzenine yerleştirmenize yardımcı olur. Amaç, fare kullanmayan ziyaretçinin de aynı görevi tamamlayabilmesidir.
Erişilebilir web tasarımı, renk paleti oturduktan sonra açılan bir denetim listesi değildir. Klavye ile ilerleme, odak halkasının kaybolmaması, form etiketleri ve metin alternatifi; ızgara, boşluk ve tipografi kadar erken verilen tasarım kararlarıdır.
Bu rehber, erişilebilirliği sonradan yama olarak değil; odak, etiket, alternatif ve dolaşma sırası olarak ele alır. Fare ile net görünen bir akış, yalnızca Tab tuşuyla ilerleyen biri için de aynı görevi tamamlatmalıdır.
Erişilebilir web tasarımı neden tasarım işidir
Denetim raporu geldiğinde “odak görünmüyor”, “menü klavyeyle açılmıyor”, “ikonun adı yok” gibi maddeler birikirse sorun teknik değil, tasarımın eksik tanımlanmış olmasıdır. Bu işler arayüz yerleşimine, bileşen davranışına ve içerik yazımına bağlıdır.
Tasarım masasında dört nesneyi birlikte kararlaştırın:
- Dolaşma sırası: Tab ile gidilen yol, görsel hiyerarşiyle aynı mı?
- Odak: Aktif öğe her yerde görünür ve üstte kalan çubukların altında kaybolmuyor mu?
- Etiket: Düğme, bağlantı ve alanın görünür adı, yardımcı teknolojinin okuduğu adla uyumlu mu?
- Alternatif: Bilgi taşıyan görsel, ikon veya grafik yazıya çevrilebiliyor mu?
Bu dört nesne, geçici sakatlık, motor kısıt, klavye tercihi veya ekran okuyucu kullanımında aynı görevin tamamlanmasını sağlar. Yeni bir web tasarım işinde bunları “son sprint’in kalitesi” diye ayırmak, sonra kırık odak ve boş alternatif yığını üretir.
Klavye dolaşmasını görsel sırayla hizalayın
Klavye kullanıcısı sayfayı gözle taramaz; odak noktasını izler. Odak soldan sağa, yukarıdan aşağıya ve önce asıl işe giden yolda ilerlemelidir. Görselde solda duran bir arama kutusu, Tab sırasında en sona düşüyorsa tasarım ile davranış kopmuştur.
Dolaşma sırasını çizerken şu kuralları tasarım kararı kabul edin:
- Yalnızca etkileşimli öğeler Tab alır: bağlantı, düğme, form alanı, açılır menü, sekme.
- Sıradan metin, kartın tüm yüzeyi veya dekoratif kutu odaklanmaz.
- Görsel sıra ile DOM sırası aynıdır. Pozitif tabindex ile sırayı “düzeltmek” geçici yamadır.
- Tekrarlayan üst menüden sonra asıl içeriğe atlayan bir bağlantı, uzun başlıklarda ilk işe yarar adımlardandır.
Kartı bütünüyle tıklanır yapmak sık düşülen bir tuzaktır. Kartın tamamı dev bir bağlantıysa Tab her kartta durur, içerideki “incele” ve “karşılaştır” ayrı ayrı okunmaz. Daha sade çözüm: kart görsel bir çerçevedir; tek bir net bağlantı veya düğme odaklanır. Böylece sıra kısa, isim açıktır.
Özel bileşen, menü ve odak tuzağı
Hazır bir açılır menü, tarih seçici veya özel select farede düzgün görünebilir. Klavye için ayrı bir durum makinesi gerekir: Enter veya Space açar, ok tuşları seçenekleri dolaşır, Escape kapatır ve odak tetikleyiciye döner. Bunlar “mikro animasyon” değil, etkileşim sözleşmesidir.
Modal ve çekmece hariç odak tuzağı kurulmaz. Bir diyalog açıldığında odak içeriye alınır, Tab diyalog içinde döner, kapanınca odak açan kontrole iade edilir. Arka plandaki sayfa hâlâ Tab alıyorsa kullanıcı kaybolur. Bu davranış, kurumsal web tasarım işlerindeki teklif formu, çerez paneli veya dil seçici için de geçerlidir.
Yapışkan üst çubuk, odaklanan bağlantıyı örter. Tasarımda çubuk yüksekliği kadar iç boşluk veya kaydırma payı bırakın. Odak “var” ama görünmüyorsa, klavye kullanıcısı için o kontrol yoktur.
Odak halkasını görünür ve tutarlı tutun
Varsayılan odak çerçevesini kaldırmak, farede “daha temiz” bir görünüm vaat eder; klavyede ise aktif öğeyi siler. Çerçeveyi kaldıracaksanız yerine en az o kadar belirgin, markaya uyumlu bir odak halkası koyun. Hover rengi odak yerine geçmez: hover fareye bağlıdır, odak klavyeyedir.
Odak halkası için tasarım notu kısa tutulabilir:
- Halka, hem açık hem koyu zemin üzerinde ayrışır.
- Kalınlık ve ofset, ince bir çizginin kaybolmasını engeller.
- Aynı dil site genelinde kullanılır; bir sayfada halka, diğerinde hiç iz olmaması güveni bozar.
- Odak, yuvarlatılmış köşe veya gölge yüzünden kırpılmaz.
KepezWeb işlerinde odak halkasını “geliştirici detayı” diye bırakmamak gerekir. Düğme, bağlantı, sekme, kart içi kontrol ve form alanı aynı ailenin parçasıdır. Bileşen kütüphanesinde hover, active ve focus ayrı çizilir; focus “active’in soluk hali” değildir.
Koyu bölüm, görsel üstü yazı ve yarı saydam katman odak için ayrı risk taşır. Kahraman alanındaki açık renk düğme, koyu fotoğraf üstünde farede okunur; odak halkası fotoğrafa karışırsa klavye kullanıcısı kaybolur. Odak rengi, o bloğun zeminine göre ayrı kararlanır.
Metin alternatifi: ne zaman yazar, ne zaman boş bırakırsınız
Metin alternatifi, görselin işini yazıya çevirmektir. Her görsele uzun bir cümle yazmak değildir. Soru şudur: Bu görsel olmadan sayfa aynı bilgiyi verir mi?
- Bilgi veren görsel: Ürün, ekip, ofis, infografik, grafik. Alternatif, görselin taşıdığı bilgiyi kısaca söyler. “Görsel1.jpg” veya “ürün fotoğrafı” bilgi değildir.
- Dekoratif görsel: Atmosfer, doku, boşluğu dolduran desen. Boş alternatif verilir; ekran okuyucu atlar.
- Metni tekrarlayan görsel: Yanında aynı başlık zaten yazıyorsa görseli tekrar okutmak gürültüdür.
- İşlevli ikon: Büyüteç, sepet, kapat, paylaş. Görsel değil, kontrolün adı yazılır: “Ara”, “Sepet”, “Kapat”.
Karmaşık bir grafik tek cümleye sığmaz. Kısa alternatif konuyu adlandırır; asıl veri tabloda veya hemen altındaki özette durur. “Satışların yükseldiğini gösteren grafik” yetmez; hangi dönem, hangi karşılaştırma varsa yazıya alınır.
Bağlantı içindeki görsel ayrı bir tuzak üretir. Logo ana sayfaya gidiyorsa alternatif marka adıdır, “logo” değildir. Ürün görseli bağlantıysa alternatif ürünü tekrar etmez; bağlantının amacı “ürün detayına git” ise bunu görünür metin veya erişilebilir ad karşılar. Aynı mantık, teknik SEO denetimi sırasında da işe yarar: boş veya tekrarlayan alternatif hem yardımcı teknolojiyi hem de görselin bağlamını zayıflatır.
İkon düğme ve yalnızca görsel olan çağrı
Metinsiz ikon, farede “anlaşılır” olabilir. Klavye ve ekran okuyucu için görünür bir ad yoksa kontrol sessizdir. Kalp, üç nokta, ok ve kapat ikonlarının yanında ya kısa bir metin ya da tutarlı bir erişilebilir ad bulunur. Ad, görünür etiketle çelişmez: ekranda “Gönder” yazan düğme, arkada “Formu ilet” diye okunmamalıdır.
Arka plan görseli CSS ile geliyorsa alt niteliği yoktur. Bilgi o görsele gömülüyüzse bilgiyi HTML metnine alın. Kampanya tarihi, fiyat veya uyarı yalnızca görselde duruyorsa o içerik, görseli göremeyen için yok hükmündedir. Fiyat veya süre gibi değişken vaatleri görsele gömmeyin; metin katmanında tutun.
Etiket, erişilebilir isim ve atlama bağlantısı
Görünür etiket, erişilebilir adın kaynağıdır. Yer tutucu metin etiket yerine geçmez. “Adınız” yazan yer tutucu, alan dolduğunda kaybolur; hata anında kullanıcı ne sorduğunuzu göremez. Etiket dışarıda durur, alanla programatik bağ kurulur, hata metni alanı tarif eder.
Aria öznitelikleri, semantik HTML’in yerini tutmaz. Düğme bir düğmedir, bağlantı bir bağlantıdır. Tıklanır bir div üzerine sonradan klavye ve ad eklemek, baştan doğru öğeyi seçmekten pahalıdır. Aria’yı, gerçekten özel bir bileşende boşluğu kapatmak için kullanın.
Atlama bağlantısı (“içeriğe geç”) ilk odaklanabilir öğedir, odaklandığında görünür. Görünmez bırakılan ve odaklandığında da belirmeyen bir atlama bağlantısı yok hükmündedir. Uzun kurumsal sayfalarda bu küçük kontrol, her seferinde tüm menüyü dolaşma yükünü keser.
Dil, başlık hiyerarşisi ve landmark’lar da dolaşmayı taşır. Tek bir h2 yığını veya üç tane “ana içerik” bölgesi, klavye kadar ekran okuyucu başlık listesini de bozar. Başlık, görsel büyüklük değil yapısal işarettir; büyük yazı başlık öğesi olmayabilir, küçük bir etiket de gerçek başlık olabilir.
Tasarım masasında kontrol edilecekler
Aşağıdaki karşılaştırma, işi sonradan yamamak için hangi kararın nerede verileceğini özetler.
| Karar | Tasarımda bağlamak | Sonradan yama |
|---|---|---|
| Dolaşma sırası | Görsel hiyerarşi ile DOM sırası aynı çizilir | tabindex ve gizli odak ile sıra zorlanır |
| Odak halkası | Hover’dan ayrı, tüm bileşenlerde görünür | Çerçeve silinir, sonra tek sayfada geri eklenir |
| Metin alternatifi | Görselin işi (bilgi / süs / kontrol) yazılır | Dosya adı veya boş “görsel” metni yapıştırılır |
| Etiket ve ad | Görünür metin ile erişilebilir ad eşleşir | Yalnızca yer tutucu veya ikon bırakılır |
| Pencere ve menü | Açma, kapama, odak iadesi sözleşmesi vardır | Fareyle kapanır, Escape ve Tab çalışmaz |
Kontrolü farenin fişini çekerek yapın. Ana görevi yalnızca klavyeyle bitirin: menüden hizmete geçmek, formu göndermek, bir karttaki asıl bağlantıyı açmak, modalı kapatmak. Bir noktada odak kayboluyor, sıra geriye zıplıyor veya isim sessiz kalıyorsa eksik olan “erişilebilirlik eklentisi” değil, o bileşenin tasarım sözleşmesidir.
Fare ile tamamlanan her görev, klavye ile de aynı sırada ve aynı isimle tamamlanabilmelidir.
Sıkça Sorulan Sorular
Erişilebilirlik yalnızca kalıcı engeli olan kullanıcılar için midir?
Hayır. Kırık kol, parlak güneş, bozuk fare veya yalnızca klavye alışkanlığı aynı boşlukları ortaya çıkarır. Tasarım bu boşlukları peşinen kapatırsa görev, tek bir giriş yöntemine kilitlenmez.
Odak çerçevesini kaldırmak markayı bozar mı?
Çerçeveyi iz bırakmadan silmek bozar; markaya uygun, tutarlı bir odak halkası bozmaz. Hover stilini odak diye kullanmak yetmez. Halka, koyu ve açık zeminlerde ayrı ayrı kontrol edilir.
Her görsele alternatif metin yazılmalı mı?
Hayır. Bilgi veren görsele kısa ve doğru alternatif yazılır. Dekoratif görsel boş bırakılır. İkon düğmede ise görsel tarifi değil, kontrolün adı verilir.
Aria kullanmak sayfayı erişilebilir yapar mı?
Tek başına hayır. Doğru HTML öğesi, görünür etiket, klavye sırası ve odak görünürlüğü asıl işi görür. Aria, özel bileşende kalan boşluğu kapatmak içindir; yanlış aria, sessiz bir kontrolden daha kafa karıştırıcı olabilir.
Bu işi ne zaman test etmelisiniz?
Bileşen ilk kez çizildiğinde. Menü, form, modal ve kart şablonu onaylanmadan önce klavye turu atın. Yayın öncesi tek bir tarama, erken verilmemiş odak ve etiket kararlarını ucuzca düzeltmez.
Yeni sitede veya yenilemede klavye sırası, odak halkası ve metin alternatifini baştan bağlamak istiyorsanız KepezWeb ekibiyle kapsamı netleştirin. İhtiyacınıza göre teklif almak için kısa bir not bırakmanız yeterlidir.
