Odak göstergesi.
Odak göstergesi, klavyeyle gezen bir kullanıcının o an hangi öğenin seçili olduğunu görmesini sağlayan görsel işarettir.
Odak göstergesi, web'de en sık kasten silinen erişilebilirlik özelliğidir. Silme sebebi neredeyse her zaman estetiktir: tarayıcının varsayılan halkası tasarıma uymaz, biri onu kaldıran bir CSS kuralı yazar, ve klavye kullanıcısı o andan itibaren sitede kör gezinir.
Trajik olan, sorunun çözümünün zor olmamasıdır. Halkayı kaldırmak yerine kendi halkanızı tasarlamak, birkaç satırlık bir iştir ve hem tasarımı korur hem ölçütü karşılar.
Üç ayrı ölçüt
WCAG 2.2'de odak üç ayrı başarı ölçütüyle ele alınır ve üçü farklı şeyleri sorar.
- 2.4.7 Odak Görünür — AA. Klavye odağı görülebilir olmalı. Temel şart budur.
- 2.4.11 Odak Gizlenmemiş (Minimum) — AA, 2.2'de yeni. Odaklanan öğe yapışkan başlık, çerez bandı ya da sohbet balonu tarafından TAMAMEN örtülemez.
- 2.4.13 Odak Görünümü — AAA, 2.2'de yeni. Göstergenin kalınlığı ve kontrastı için sayısal taban: en az 2 CSS pikseli kalınlık ve odaklanmış/odaklanmamış durumlar arasında 3:1 kontrast.
Üçünün birlikte anlamı şudur: odak görünecek, örtülmeyecek, ve yeterince belirgin olacak. Çoğu sitede birincisi karşılanır, ikincisi kazara kırılır, üçüncüsü hiç düşünülmez.
Kaldırmak yerine tasarlamak
Varsayılan odak halkasını kaldıran kural, tek başına yazıldığında ölçüt ihlalidir. Ama kaldırıp yerine kendi göstergenizi koymak tamamen meşrudur ve genellikle daha iyi bir sonuç verir — çünkü tarayıcı varsayılanı sizin paletinizi bilmez.
İyi bir özel odak göstergesinin dört özelliği vardır.
- Yeterince kalın — en az 2 CSS pikseli. İnce bir çizgi, düşük çözünürlüklü ekranda ve büyütmede kaybolur.
- Yeterince kontrastlı — hem odaklanan öğeye hem çevresine karşı ayırt edilebilmeli. 3:1 taban, ama daha yüksek daha iyi.
- Öğeden ayrık — halka ile öğe arasında birkaç piksel boşluk, göstergeyi öğenin kendi kenarlığından ayırır.
- Her yerde tutarlı — aynı gösterge her bileşende. Bileşene göre değişen odak, kullanıcının öğrenmesini zorlaştırır.
Bu sitede odak halkası vurgu rengini kullanıyor ve o renk kâğıt zemine karşı 10,22:1 ölçüyor. Kalınlık 2 piksel. Yani hem 2.4.7'yi hem 2.4.13'ün sayısal tabanını karşılıyor — ve bu, tek bir token kararının sonucu.
Fare ile klavye ayrımı
Odak halkasını kaldırma isteğinin arkasındaki gerçek şikâyet genelde şudur: bir düğmeye FAREYLE tıklandığında da halka beliriyor ve bu gereksiz görünüyor. Şikâyet haklıdır — fareyle tıklayan kullanıcının odak göstergesine ihtiyacı yoktur.
Modern CSS bunu tam olarak çözer. Odak halkasını yalnız klavyeyle gelindiğinde gösteren bir seçici vardır ve tarayıcı, kullanıcının giriş yöntemine göre karar verir. Fareyle tıklandığında halka çıkmaz, Tab ile gelindiğinde çıkar.
Bu, «halkayı kaldıralım» tartışmasının teknik cevabıdır: kaldırmaya gerek yok, koşullandırmak yeterli. Ve önemli bir uyarı — eski tarayıcı desteği için genel odak seçicisini de bırakmak gerekir; yalnız yeni seçiciye yaslanmak, desteklemeyen tarayıcıda odağı tamamen görünmez bırakır.
Odak halkasını kaldırmak bir tasarım kararı değil, bir kullanıcı grubunu siteden çıkarmaktır.
Yapışkan başlık tuzağı
2.4.11, WCAG 2.2'nin en sık kırılan yeni maddesidir ve sebebi yaygın bir tasarım kalıbıdır: sayfa kaydırıldıkça üstte kalan başlık.
Senaryo şudur. Kullanıcı Tab ile sayfada aşağı iner. Tarayıcı, odaklanan öğeyi görünür alana getirmek için sayfayı kaydırır — ama öğeyi tam olarak yapışkan başlığın altına yerleştirir. Öğe teknik olarak «görünür alanda»dır; kullanıcı için görünmez.
Çözüm CSS'te tek bir özellikle halledilir: odaklanabilir öğelere, kaydırma sırasında üstlerinde bırakılacak boşluk tanımlanır ve bu boşluk başlığın yüksekliğinden büyük tutulur. Tarayıcı öğeyi getirirken o boşluğu hesaba katar.
Aynı tuzak alt kenarda da vardır: sabit bir çerez bandı ya da sohbet balonu, sayfanın altındaki öğeleri örter. Test etmenin yolu basittir — Tab ile sayfayı baştan sona gez ve her adımda odaklanan öğeyi GÖREBİLDİĞİNDEN emin ol. Göremediğin her adım bir ihlaldir.
Odak yönetimi: katmanlar ve diyaloglar
Odak yalnız görünür olmakla kalmaz, doğru yerde de olmalıdır. Bir katman açıldığında odağın nereye gittiği, klavye kullanıcısının deneyimini tamamen belirler.
Doğru davranış şudur: katman açıldığında odak katmanın içine taşınır, katman açıkken arkadaki içeriğe Tab ile geçilemez, ve katman kapandığında odak onu açan öğeye geri döner. Üçüncü madde en çok atlanandır — odak sayfanın başına düşer ve kullanıcı yerini kaybeder.
Dikkat edilmesi gereken denge şudur: katman içinde odağı tutmak gereklidir ama Escape ile çıkışı engellemek 2.1.2 ihlalidir. Odak katman içinde dönmeli, ama kullanıcı katmanı her zaman kapatabilmelidir. İkisi çelişmez — biri kapsam, diğeri kaçış yoludur.
Odak halkası ve tasarım: sahte bir çelişki
Odak göstergesinin kaldırılmasının arkasındaki gerekçe neredeyse her zaman estetiktir ve bu gerekçe, tasarım ile erişilebilirlik arasında var olmayan bir çelişki kurar. Tarayıcının varsayılan odak halkası gerçekten de çoğu tasarımla uyumsuzdur — mavi, kalın, köşeleri sert. Ama ölçütün istediği şey o halka değil, görünür BİR gösterge.
Gösterge birçok biçim alabilir ve hiçbiri tasarımı bozmak zorunda değildir. Öğenin kendi vurgu renginde ince bir dış çizgi, zemin renginin belirgin biçimde değişmesi, alt çizginin kalınlaşması, ya da öğenin çevresinde ayrık bir halka — hepsi geçerlidir ve hepsi paletinize göre tasarlanabilir. Kısıt yalnızca sayısaldır: yeterince kalın ve yeterince kontrastlı olmalı.
Bu sitede odak halkası, sayfadaki tek vurgu rengini kullanıyor ve o renk zaten palette tanımlı. Yani odak göstergesi tasarımın dışından gelen yabancı bir öğe değil, tasarım dilinin bir parçası. Kalınlığı iki piksel, kontrastı kâğıt zemine karşı 10,22:1 — hem 2.4.7'yi hem AAA seviyesindeki 2.4.13'ün sayısal tabanını rahatlıkla karşılıyor, ve hiçbir görsel bedeli olmadı.
Sorun odak halkasının çirkin olması değil; kendi halkanızı tasarlamamış olmanız.
Test etmenin tek güvenilir yolu
Odak göstergesi kusurları otomatik araçlarla neredeyse hiç yakalanmaz. Bir aracın «odak görünür mü» sorusunu cevaplayabilmesi için, odaklanmış ve odaklanmamış hâlleri render edip karşılaştırması gerekir — bu yapılabilir ama yaygın araçların çoğu yapmaz. Dolayısıyla yöntem elle kalır ve şu üç adımdan oluşur.
- Tab ile sayfayı baştan sona gez — her adımda odağın nerede olduğunu GÖREBİLİYOR musun? Göremediğin her adım 2.4.7 ihlalidir.
- Aynı turu sayfa kaydırılmış hâlde tekrarla — yapışkan başlık ya da alt bant, odaklanan öğeyi örtüyor mu? Örtüyorsa 2.4.11 ihlalidir.
- Koyu ve açık temayı ayrı ayrı gez — bir temada yeterli kontrast veren halka, diğerinde eşiğin altına düşebilir. İki tema iki ayrı ölçümdür.
Üçüncü adım en çok atlanandır. Karanlık tema desteği ekleyen ekiplerin büyük kısmı metin renklerini gözden geçirir ama odak halkasını unutur; sonuç, koyu zeminde neredeyse görünmeyen bir odak göstergesidir. Kusur yalnız klavye kullanıcısını ve yalnız koyu temada etkilediği için aylarca fark edilmeden yaşayabilir.
Kalıcı çözüm, bu üç adımı bir teste bağlamaktır. Odaklanmış öğenin gerçekten görünür bir gösterge taşıdığı ve o göstergenin kontrastının eşiğin üstünde kaldığı, her dağıtımda otomatik olarak doğrulanabilir. Bir kez elle test edip geçmek, bir sonraki bileşende sessizce bozulur.