Kısa cevap
Klavye odağı, o anda klavye girdisini alacak etkileşimli öğenin seçili durumudur.
Nerede işine yarar?
Odak göstergesi görünür olmalı, sıra anlamlı ilerlemeli ve kapatılan katmandan uygun öğeye dönmelidir. Bir modal açıkken arka plan kontrollerine yanlışlıkla ulaşmak veya kapanınca odağı kaybetmek görevi zorlaştırır. Testte yalnız ilk Tab adımı değil, bütün akış izlenir.
Tanımdan uygulamaya, kendi denemene.
Bir cümlede uygulaması
Bir iletişim penceresi kapandığında odağı onu açan düğmeye geri vermek.
Neyle karıştırılmamalı?
Fareyle üzerine gelme durumu ile klavye odağı aynı durum değildir.
Sıradaki tuş hangi kontrolü çalıştıracak?
Fare kullanmadan bir sitede ilerlediğini düşün. Tab tuşuna bastığında bir bağlantı veya kontrol odak alır; görünür odak işareti nerede olduğunu anlamana yardım eder. İşaret kaldırılmışsa sıradaki Enter tuşunun neyi açacağını tahmin etmek zorlaşır. Klavye odağı yalnız tasarımdaki ince bir çizgi değil, etkileşimin o andaki konumudur. Görünümü ve hareketi birlikte tasarlanmalıdır.
Örnek bir menü açıldığında kişi bağlantılar arasında ilerler, ardından menüyü kapatır. Odak görünmeyen bir öğede kalırsa sayfa teknik olarak açık olsa bile kişinin yolu kopabilir. Modal gibi geçici yüzeylerde açılış, içeride dolaşma ve kapanış davranışı özellikle önemlidir. Kullanılan örüntüye uygun biçimde odak yönetimi planlanmalı; sadece bir alanı ekranda gösterip gizlemekle iş bitmiş sayılmamalıdır.
Görsel sıra ile belge sırası arasındaki ilişki de odağı etkiler. CSS ile öğeleri başka yerlere taşımak, klavyenin izlediği sırayı otomatik olarak değiştirmez. Odak ekranda beklenmedik şekilde bir uçtan diğerine atlıyorsa kullanıcı bağlamı kaybedebilir. Çözüm her kontrole rastgele sıra numarası vermek değildir. Önce içerik ve DOM yapısının anlamlı olup olmadığına bakmak gerekir.
Odak göstergesi markanın görsel diline uyarlanabilir, ancak sakin görünmesi uğruna belirsizleşmemelidir. Açık, koyu ve görselli yüzeylerde fark edilmesi gerekir. Hover durumuyla aynı olmak zorunda değildir; bazı kullanıcılar kontrolü fareyle hiç ziyaret etmez. Seçili bir sekme ile odaklanmış sekme farklı kavramlar taşıyabilir. Tasarım bu durumları ayırarak kişinin hem mevcut seçimi hem sıradaki eylemi anlamasını sağlamalıdır.
Odak ile kaydırma ilişkisini de gözden geçir. Kullanıcı bir bölüm bağlantısına geçtiğinde hedefin sabit header altında kalması veya odak göstergesinin görünür alanın dışında olması konumu takip etmeyi zorlaştırabilir. Tasarımda sabit yüzeylerin kapladığı alanı ve bölüm başlıklarının yerleşimini birlikte düşün. Bir sorunu çözmek için her etkileşimde sayfayı zorla kaydırmak ise yeni karışıklık yaratabilir. Davranışın amacı kullanıcının bulunduğu yeri korumak ve değişikliği anlaşılır kılmaktır. İçerik menüsü, açılır panel ve normal bağlantıların her biri aynı şekilde ele alınmayabilir; gerçek görev içindeki ilişki belirleyicidir. Odağın doğru olması kadar görünür kalması da önemlidir.
Odak, hover ve seçim
Hover ve seçili durum
Hover, işaretçinin bir öğenin üzerinde olduğunu gösterir. Seçili durum ise sekme veya filtre gibi bir tercihin etkinliğini anlatabilir. Bu durumlar odakla aynı anda bulunabilir veya farklı öğelerde olabilir. Yalnız fare üzerinde görünen bir vurgu, klavye kullanıcısına konum bilgisi vermez; kalıcı seçim de sıradaki tuşun hedefini tek başına anlatmaz.
Klavye odağı
Odak, klavye etkileşimini alacak öğeyi belirtir. Görünür işaret ve anlamlı hareket, kullanıcının arayüzde nerede olduğunu takip etmesini sağlar. Seçili durumla karıştırılırsa kişi mevcut tercihini değiştirip değiştirmediğini anlayamayabilir. Tasarımda bu durumları birlikte örneklemek, geliştirmenin yalnız renk değişiklikleri üzerinden tahmin yürütmesini önler.
Odağın nerede olduğu görünmeli
Klavye kullanıcısı sayfadaki konumunu odak göstergesiyle takip eder. Gösterge kaldırıldığında hangi kontrolün çalışacağını tahmin etmek zorlaşır. Modal gibi geçici yüzeylerde odağın içeri taşınması ve kapatılınca anlamlı bir yere dönmesi de akışın parçasıdır.
- Tab sırasını görsel ve anlamsal sırayla karşılaştır.
- Odak halkasını her zemin üzerinde görünür tut.
- Kapalı menü ve modal içeriğinin odağa girmediğini dene.
Odak ile seçili durum aynı mı?
Hayır. Odak sıradaki klavye işlemini alacak öğeyi gösterir; seçili durum kalıcı bir tercihi ifade edebilir. Bir sekme seçili kalırken odak başka bir kontrole taşınabilir. İki durumun görünümü ve anlamı ayrılmalıdır.
İşin içinde sorulacaklar.
Odak halkasını kaldırıp yalnız renk değiştirebilir miyiz?
Önemli olan konumun açık ve yeterli biçimde fark edilmesidir; uygulanan görünümün uygun ölçütlerle değerlendirilmesi gerekir. Varsayılan halkayı kaldırmak, yerine güvenilir bir gösterge koymadan yapılmamalıdır. İnce ve düşük kontrastlı bir renk değişimi bazı yüzeylerde kaybolabilir. Tasarımı yalnız tek bir zemin üzerinde inceleme. Kontrolün normal, hover ve seçili haliyle farkını birlikte değerlendir.
Her sayfa değişiminde odağı zorla taşımak gerekir mi?
Odak yönetimi bağlama ve kullanılan gezinme davranışına göre düşünülmelidir. Gereksiz programatik odak taşıma, kişinin kontrolünü bozabilir. Yeni bir modal açılmasıyla normal bir metin güncellemesi aynı olay değildir. Hangi bilginin değiştiğini, kişinin ne yapmaya devam edeceğini ve kullanılan örüntünün beklentisini belirle. Otomatik hareket eklemeden önce bunun gerçek ihtiyacı nasıl karşıladığını açıkla.
Pozitif tabindex değerleri sırayı düzeltir mi?
Sırayı elle numaralandırmak kısa vadede bir ekranı düzeltiyor gibi görünebilir, ancak içerik büyüdükçe bakım ve beklenmedik sıra sorunları yaratabilir. Önce DOM yapısının ve görsel düzenin ilişkisini düzeltmek daha sağlam bir başlangıçtır. Özel bileşenlerin kendi odak örüntüleri olabilir; bunlar ayrı değerlendirilir. Bütün sayfayı keyfî sıra değerleriyle yönetmek yerine anlamlı belge düzenini korumaya çalış.
Sitenin klavye rotasını izle
Bir menüden başlayıp iletişim formuna ulaşan kısa bir görev seç. Fareyi kullanmadan ilerle ve yalnız nerede bulunduğunu görebildiğin adımları not et. Bu çalışma odak sorunlarını görünür kılar; bütün erişilebilirlik değerlendirmesinin yerine geçmez.
Klavye odağı, arayüzdeki yerini ve sıradaki eylemi görünür kılar. Göstergenin güzelliği kadar, doğru sırada ilerlemesi ve geçişlerden sonra anlamlı bir yerde kalması da tasarımın parçasıdır.
Bağlantılı kavramlar
- ARIAARIA, arayüz öğelerinin rolünü, durumunu ve ilişkilerini yardımcı teknolojilere bildirmeye yarayan erişilebilirlik özellikleridir.
- ErişilebilirlikErişilebilirlik, farklı yetileri ve yardımcı teknolojileri olan insanların bir içeriği algılayabilmesi, kullanabilmesi ve anlayabilmesi için tasarlamaktır.
- Mikro etkileşimMikro etkileşim, belirli bir küçük eyleme veya durum değişimine verilen odaklı arayüz davranışıdır.