Bir web sitesi fareyle hızlıca gezildiğinde sorunsuz görünebilir. Aynı sayfada Tab tuşuna bastığınızda odağın kaybolması, menünün kapanmaması veya form hatasının yalnızca kırmızı renkle anlatılması ise bambaşka bir deneyim ortaya çıkarır. Erişilebilirlik denetimi, arayüzün güzel görünüp görünmediğini değil, farklı koşullarda gerçek bir görevin tamamlanıp tamamlanamadığını araştırır.
İlk kontrol için yüzlerce kriteri ezberlemek gerekmez. Doğru seçilmiş birkaç görev, sitenin nerede kırıldığını erken gösterebilir. W3C de hızlı kontrollerin yalnızca başlangıç olduğunu, tek başına hiçbir otomatik aracın erişilebilirlik standartlarına uygunluğu belirleyemeyeceğini vurgular. Bu yazı bir uygunluk belgesi vaat etmiyor. Tasarım, içerik ve geliştirme ekiplerinin daha kapsamlı inceleme öncesinde ortak bir sorun listesi çıkarmasına yardım ediyor.
1. Önce temsili sayfaları ve gerçek görevleri seçin
Sitenin yalnızca ana sayfasını test etmek rahat ama yanıltıcıdır. Ana sayfa, bir hizmet detayı, uzun bir blog yazısı, iletişim formu ve menü ya da açılır pencere kullanan bir sayfa seçin. E-ticaret varsa ürün bulma, varyant seçme ve ödeme başlangıcını da örneğe ekleyin. Her sayfa için “ziyaretçi neyi tamamlamaya çalışıyor?” sorusunu tek cümleyle yazın.
Fark Studio'da web projelerinde sık gördüğümüz hata, kalite kontrol listesinin bileşenlere göre kurulmasıdır. Ekip butonu, formu ve menüyü ayrı ayrı onaylar, fakat kullanıcının bu parçalar arasında izlediği yol sınanmaz. Temsili görev seti bu boşluğu kapatır. Dijital deneyim tasarımı yaklaşımımız arayüz, içerik ve teknik davranışı aynı kullanım akışında ele alır.
2. Fareyi bırakın ve yolu yalnızca klavyeyle tamamlayın
Sayfayı yenileyin, farenize dokunmadan Tab ve Shift+Tab ile ilerleyin. Bağlantıları Enter, düğmeleri Enter veya Space ile çalıştırın. Açılır menü, modal ve benzeri katmanlarda Escape davranışını kontrol edin. Odak sırası ekrandaki anlamlı sırayı izliyor mu? Bir bileşenin içinde sıkışıyor musunuz? Atlanan bir işlem veya gereksiz yere onlarca kez durulan bir alan var mı?
Klavye erişimi ile görünür odak aynı şey değildir. Bir öğe teknik olarak seçilmiş olabilir, ancak hangi öğede olduğunuz anlaşılmıyorsa yol yine kullanılamaz. Açık zemin, koyu bölüm, görsel üstü kart ve hata durumu gibi her bağlamda odak işaretini görün. Tarayıcının varsayılan çizgisini sırf estetik gerekçeyle kaldırmak, kullanıcıya yönünü gösteren tek işareti ortadan kaldırabilir.
3. Yakınlaştırın, daraltın ve içerik sırasını izleyin
Tarayıcı yakınlaştırmasını yüzde 200'e getirin, ardından pencereyi daraltın. Metin okunabiliyor mu, yoksa yatay kaydırma içinde mi kayboluyor? Sabit başlık içeriğin üzerine biniyor mu? Düğme metni kesiliyor, form etiketi alanından kopuyor veya önemli bir işlem ekran dışına taşınıyor mu? Bu test yalnızca yazı büyüklüğünü değil, düzenin yeniden akma yeteneğini gösterir.
İçerik sırasını da görsel düzenden bağımsız düşünün. Masaüstünde yan yana duran fiyat, koşul ve eylem alanları mobilde hangi sıraya giriyor? CSS ile güzel görünen ancak kaynak sırası anlamsız kalan bir düzen, yardımcı teknoloji kullanan kişiye farklı bir hikâye anlatabilir. Restoran menüsü için PDF ve web sayfası karşılaştırmamız format seçiminin mobil kullanım ve erişilebilirlikle nasıl birleştiğini somutlaştırır.
4. Kontrastı yalnızca normal metinde değil, durumlarda ölçün
Otomatik kontrast aracı iyi bir başlangıçtır, fakat yalnızca ana metni ölçüp bırakmayın. Pasif görünen yer tutucular, form kenarlıkları, hata mesajları, grafik açıklamaları, seçili sekmeler, odak çizgileri ve hover durumları da bilgi taşır. Renk tek başına anlam iletiyorsa gri tonlu bir ekran görüntüsü alın. Başarı, hata ve seçili durum hâlâ ayırt edilebiliyor mu?
Marka rengi her yüzeyde aynı görevi üstlenmek zorunda değildir. Mercan tonlu bir düğme büyük alanda güçlü çalışırken küçük metinde yeterli ayrımı vermeyebilir. Çözüm rengi bütünüyle terk etmek değil, metin rengi, zemin, çizgi, ikon biçimi ve etiket gibi birden fazla işaret kullanmaktır. Tasarım sisteminde erişilebilir kombinasyonları adlandırmak, her yeni sayfada aynı tartışmayı baştan yaşamayı önler.
5. Görsel alternatiflerini, başlıkları ve sayfa dilini birlikte okuyun
Görsel alt metni bir anahtar kelime alanı değil, görselin o bağlamdaki görevini aktaran kısa bir alternatiftir. Ürün fotoğrafı seçim için gerekli ayrıntıyı, grafik ise çıkarımı anlatmalıdır. Yalnızca süsleme görevi gören görselin boş alternatifle atlanması daha iyi olabilir. Aynı görsel farklı sayfalarda farklı bir iş yapıyorsa açıklaması da bağlama göre değişebilir.
Sayfa başlığı, H1 ve alt başlıkları hızlıca listeleyin. Yapı, görsel boyutlar kapatıldığında da anlaşılır mı? Atlama bağlantısı ana içeriğe götürüyor mu? Sayfanın dil bilgisi doğru tanımlanmış mı? Bunlar tek tek küçük teknik ayrıntılar gibi görünür, ancak ekran okuyucu kullanıcısının nerede olduğunu anlamasını ve bölümden bölüme geçmesini doğrudan etkiler.
6. Formu hatalı, eksik ve başarılı senaryolarla tamamlayın
İletişim formunu önce boş gönderin, sonra bir alanı yanlış doldurun, en sonunda geçerli bilgiyle tamamlayın. Her alanın görünür etiketi var mı? Zorunlu alan yalnızca yıldız veya renkle mi belirtiliyor? Hata, sorunu ve düzeltme yolunu anlatıyor mu? Gönderimden sonra odak hata özetine ya da başarı mesajına anlamlı biçimde taşınıyor mu?
Saha testlerinde sık rastladığımız kırılma, form görsel olarak temizlenirken etiketlerin yer tutucuya dönüştürülmesidir. Kullanıcı yazmaya başlayınca soru kaybolur. Bir başka sorun, hata mesajının formun üstünde görünmesi fakat klavye odağının gönder düğmesinde kalmasıdır. Kurumsal web tasarımı hizmetimizde içerik mimarisi ve dönüşüm yolu kadar bu mikro davranışları da yapının parçası sayıyoruz.
7. Hareketi, videoyu ve zaman baskısını kontrol edin
Otomatik başlayan hareket durdurulabiliyor mu? Sistem azaltılmış hareket tercihini dikkate alıyor mu? Karusel, sayaç veya geçici bildirim kullanıcı okumayı bitirmeden değişiyor mu? Video için konuşmayı ve anlamlı sesleri aktaran altyazı var mı? Yalnızca ses içeren içerik için kullanılabilir bir metin alternatifi sunuluyor mu?
Burada amaç bütün hareketi kaldırmak değildir. Hareketin bilgiyi desteklemesi, kontrolü kullanıcıdan almaması ve aynı bilgiyi tek bir duyusal kanala kilitlememesidir. Yenileme projesinde bu davranışları sona bırakmak pahalıdır. Site yenilemede yayın planımız tasarım, içerik ve teknik kontrollerin yayından önce aynı envanterde buluşmasının nedenini açıklar.
8. Otomatik raporu insan göreviyle doğrulayın
Tarayıcı eklentileri eksik alternatif metni, bazı kontrast sorunlarını ve belirli kod hatalarını hızlıca bulabilir. Bulamadıkları şey daha önemlidir: alternatif metnin gerçekten faydalı olup olmadığı, odak sırasının göreve uyup uymadığı veya hata mesajının anlaşılır davranıp davranmadığı. Otomatik taramayı keşif için kullanın, son hüküm olarak değil.
İlk ekip kontrolünün ardından klavye ve ekran okuyucu deneyimi olan uzmanların, mümkünse engelli kullanıcıların değerlendirmesini plana ekleyin. W3C'nin WCAG-EM yaklaşımı da kapsamı tanımlama, ürünü keşfetme, temsili örnek seçme, değerlendirme ve bulguları raporlama adımlarını ayırır. Bir ana sayfa puanını tüm sitenin sonucu gibi sunmak bu yüzden doğru değildir.
0-1-2 puanlı görev kartıyla önceliği belirleyin
Sekiz görevin her birine 0, 1 veya 2 verin: temsili yol, klavye kullanımı, görünür odak, yakınlaştırma ve yeniden akış, kontrast ve renk, görsel ile içerik yapısı, form ve hata deneyimi, hareket ve medya. 0 görev tamamlanamıyor, 1 görev tamamlanıyor ama belirgin sürtünme var, 2 seçilen örnekte tutarlı biçimde çalışıyor demektir. En yüksek puan 16'dır. Bu kart bir WCAG uygunluk skoru değil, ekibin ilk önceliklerini aynı dilde konuşmasını sağlayan bir triage aracıdır.
Klavye tuzağı, gönderilemeyen form, okunamayan temel bilgi veya kontrol edilemeyen kritik hareket varsa toplam puana bakmadan yayını durdurun. Sonra diğer sorunları “görevi engelliyor”, “görevi zorlaştırıyor” ve “tutarlılığı düşürüyor” olarak sıralayın. Böylece en kolay görünen düzeltme yerine kullanıcı yolunu en çok etkileyen sorundan başlarsınız.
Erişilebilirliği final kontrolünden tasarım kararına taşıyın
İyi bir ilk denetim, tüm standartları tamamladığınızı kanıtlamaz. Nerede daha derin uzmanlık, kullanıcı testi veya kod incelemesi gerektiğini görünür kılar. En büyük kazanım da tek seferlik puan değil, yeni bileşenlerin klavye, odak, yakınlaştırma, hata ve hareket durumlarıyla birlikte tasarlanmasıdır.
Fark Studio, mevcut sitenizin temsili görevlerini çıkarıp erişilebilirlik sorunlarını tasarım, içerik ve geliştirme sorumluluklarına ayırabilir. En çok kullanılan üç kullanıcı yolunu ve sorun çıkardığını düşündüğünüz formu bize iletin, ilk denetim örneğini birlikte kuralım.
