Atlas Kurumsal
Teklif alın merhaba@atlasdijital.example

WCAG 2.2 AA: Klavye Gezinimi, Odak Görünürlüğü ve Alternatif Metin

Erişilebilirliği sonradan eklenen bir katman olmaktan çıkarmak için klavye gezinimini, odak görünürlüğünü, form davranışlarını ve alternatif metin yazımını doğru kurmak gerekir. WCAG 2.2'nin getirdiği yenilikleri de ele alıyoruz.

Işıl DemirtaşAtlas ekibi
WCAG 2.2 AA: Klavye Gezinimi, Odak Görünürlüğü ve Alternatif Metin

Erişilebilirlik, projenin sonunda yapılan bir denetim değil, ilk günden verilen tasarım kararlarının toplamıdır. WCAG 2.2, uluslararası kabul görmüş ölçütleri A, AA ve AAA düzeylerinde tanımlar; kamu ve kurumsal projelerde hedef genellikle AA'dır. Aşağıda AA düzeyinde en çok kırılan üç alanı ve 2.2 sürümünün getirdiği yenilikleri pratik açıdan ele alıyoruz.

Klavye gezinimi: fare olmadan siteyi kullanabiliyor musunuz?

En hızlı öz denetim yöntemi şudur: fareyi bırakın ve siteyi yalnızca Tab, Shift+Tab, Enter, Boşluk ve ok tuşlarıyla kullanmayı deneyin. Ana menüyü açabiliyor, ürünü sepete ekleyebiliyor, formu doldurup gönderebiliyor musunuz?

Sık rastlanan sorunlar bellidir. Birincisi, div ve span ögelerine tıklama olayı bağlanarak yapılan sahte düğmelerdir; bunlar odak alamaz ve klavyeyle çalıştırılamaz. Doğru çözüm neredeyse her zaman gerçek button veya a ögesini kullanmaktır. İkincisi, açılan bir pencerede odağın tuzağa düşmesi ya da tam tersine arka plandaki sayfaya kaçmasıdır: modal açıldığında odak modalın içine alınmalı, Tab döngüsü modalın içinde kalmalı, Esc ile kapandığında odak, modalı açan ögeye geri dönmelidir. Üçüncüsü, görsel sıra ile odak sırasının ayrışmasıdır; CSS ile ögelerin yerini değiştirmek okuma sırasını değiştirmez, bu yüzden düzen kararlarını kaynak sırasına sadık kurun.

Uzun gezinme menülerinin başında bir "içeriğe atla" bağlantısı bulundurun. Odaklandığında görünür hâle gelen bu tek bağlantı, klavye kullanıcısını her sayfada onlarca sekmeden kurtarır.

Odak görünürlüğü: kaldırmayın, tasarlayın

Tarayıcıların varsayılan odak halkası estetik bulunmadığı için sıkça kaldırılır ve yerine hiçbir şey konmaz. Bu, klavye kullanıcısı için sitede pusulasız dolaşmak demektir. Odak göstergesi kaldırılacaksa yerine daha güçlü bir gösterge tasarlanmalıdır: belirgin kalınlıkta, ögeden hafif boşluklu, hem açık hem koyu temada komşu renklere göre yeterli kontrast sağlayan bir halka.

Modern CSS'in :focus-visible seçicisi burada işi kolaylaştırır: fareyle tıklandığında halka görünmez, klavyeyle gezinildiğinde görünür. Ayrıca odaklanan ögenin sabit üstbilgi, çerez bildirimi veya sohbet balonu altında kalmaması gerekir. WCAG 2.2, bu durumu doğrudan ele alan bir ölçüt ekledi; sabit konumlu ögeleri olan her sitede kaydırma davranışını bu gözle test edin.

WCAG 2.2 ile gelen yenilikler

  • Hedef boyutu. Etkileşimli ögeler için asgari bir dokunma hedefi beklenir; küçük ikon düğmelerini yalnızca görsel boyutlarıyla değil, tıklanabilir alanlarıyla değerlendirin.
  • Sürükleme hareketleri. Sürükle-bırak ile yapılan her işlemin, tek noktaya dokunmayla yapılabilen bir alternatifi olmalıdır. Sıralama arayüzlerine "yukarı taşı / aşağı taşı" düğmeleri eklemek basit bir çözümdür.
  • Tekrar eden giriş. Kullanıcıdan aynı bilgiyi çok adımlı bir süreçte tekrar tekrar istememek gerekir; önceki adımda girilen veri otomatik doldurulabilir ya da seçilebilir olmalıdır.
  • Erişilebilir kimlik doğrulama. Giriş akışlarında bilişsel yük gerektiren bulmacalara alternatif sunulmalı, parola alanlarında yapıştırma ve parola yöneticisi kullanımı engellenmemelidir.
  • Tutarlı yardım. İletişim veya destek bağlantısı sayfalar arasında aynı yerde ve aynı sırada bulunmalıdır.

Alternatif metin: görselin işlevini yazın

Alternatif metin, görseli tarif etmek değil, bağlam içindeki işlevini aktarmaktır. Aynı fotoğraf, bir haber yazısında "sahilde yürüyen bir kişi" iken, bir kampanya bağlantısında "Yaz koleksiyonunu incele" olabilir. Üç pratik kural yeterlidir:

  1. Görsel yalnızca dekoratifse alternatif metni boş bırakın; ekran okuyucu onu atlar. Boş bırakmak yerine "dekoratif görsel" yazmak, kullanıcıya gürültüden başka bir şey vermez.
  2. Görsel bir bağlantı veya düğme içindeyse, alternatif metin o bağlantının nereye gittiğini söylemelidir.
  3. Görsel bilgi taşıyorsa (grafik, şema, tablo görüntüsü) bu bilginin metin karşılığı sayfada da bulunmalıdır. Karmaşık bir grafiği tek cümlelik alternatif metne sığdırmaya çalışmayın.

"Resim", "fotoğraf" gibi sözcüklerle başlamayın; ekran okuyucu zaten ögenin bir görsel olduğunu bildirir. Dosya adını alternatif metin olarak bırakmak ise en sık görülen ve en kolay düzeltilen hatadır.

Denetimi otomatikleştirin, ama otomatiğe güvenmeyin

Formlar: erişilebilirliğin sınandığı yer

Erişilebilirlik sorunlarının büyük bölümü formlarda yoğunlaşır. Her alanın kalıcı ve programatik olarak bağlı bir etiketi olmalıdır; yalnızca alan içi ipucu metniyle çalışan formlar, kullanıcı yazmaya başladığı anda ne istendiğini unutturur. Hata mesajları alanın hemen yanında, açık bir dille ve neyin nasıl düzeltileceğini söyleyerek verilmelidir. Gönderim sonrası bir hata varsa odak ilk hatalı alana taşınmalı, ekran okuyucu kullanıcısının hata durumundan haberdar olması sağlanmalıdır.

Zaman sınırı olan işlemlerde kullanıcıya süreyi uzatma imkânı verin. Otomatik oynayan içerikleri durdurulabilir yapın ve hareketi azaltma tercihini belirtmiş kullanıcılar için animasyonları sadeleştirin. Bu ayarların hepsi tarayıcı ve işletim sistemi düzeyinde bildirilir; onları dinlemek küçük bir çabayla büyük bir fark yaratır.

Otomatik erişilebilirlik araçları kontrast, eksik alternatif metin ve etiketsiz form alanı gibi sorunları hızlıca yakalar; ancak erişilebilirlik sorunlarının önemli bir kısmı ancak elle test edilerek görülür: odak sırasının mantığı, hata mesajının okunabilirliği, bir işlemin klavyeyle tamamlanabilirliği. En sağlam yöntem, otomatik kontrolü sürekli çalıştırmak ve her yayın öncesi kritik akışları klavye ve ekran okuyucuyla elden geçirmektir. Erişilebilirliği baştan kuran arayüz yaklaşımımızı hizmetler sayfasında bulabilirsiniz.

erisilebilirlikwcagarayuz

Başlayalım

Projenizi konuşalım

Aklınızdaki işi birkaç adımda anlatın; kapsamı birlikte netleştirip yazılı bir teklifle dönelim. Uygun olmadığımızı düşünürsek bunu da açıkça söyleriz.