--- title: "Klavye odağı nedir?" author: Androverse author_url: https://androverse.com.tr/yazar/androverse publisher: Androverse updated_at: 2026-10-15 url: https://androverse.com.tr/sozluk/klavye-odagi language: tr --- # Klavye odağı nedir? Klavye odağı, o anda klavye girdisini alacak etkileşimli öğenin seçili durumudur. Diğer adlar: Keyboard focus. ## 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. ## 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. ### Görünür konum Odak işareti hangi kontrolün işlem alacağını açıkça göstermeli. Renk, sınır veya yüzey değişimi kullanılabilir; çevresindeki arka planla ilişkisi düşünülmelidir. İşaretin tasarıma uymadığını düşünüyorsan kaldırmak yerine uygun bir görünüm tasarla. Temel bilgi olan konumu dekoratif ayrıntı gibi görme. ### Anlamlı sıra Klavye ilerleyişi içeriğin mantığını izlemeli. Menüden ana içeriğe, alan etiketinden ilgili kontrole uzanan ilişki anlaşılır olmalı. Tekrar eden navigasyonu geçmeye yarayan yollar da düşünülür. Görsel yerleşim değiştiğinde belge sırasının hâlâ anlam taşıdığını gözden geçir. ### Geçiş Açılan veya kapanan yüzeyler odağın yerini etkileyebilir. Bir kontrol kaldırıldığında odak nereye gidecek? Menü kapanınca kişi hangi eylemden devam edecek? Bu kararları sonradan tarayıcının rastlantısal davranışına bırakma. Kullanılan bileşen örüntüsünün beklentisini takip et ve gerçek akışta incele. ## 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. ## Bu karar, işinin neresinde? Klavye odağı kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) ## Karar masası ### 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. - [ ] Sayfanın başından Tab ile ilerle. Her adımda hangi öğenin odak aldığını ve neden o sırada bulunduğunu yaz. Görünmeyen bir kontrole ulaşıyorsan bunun kapalı bir panelden veya yanlış gizleme yönteminden kaynaklanıp kaynaklanmadığını araştır. - [ ] Bir menü veya modal açıp içindeki kontrolleri dolaş. Kullanılan yüzeyin türüne uygun klavye davranışını resmi örüntüyle karşılaştır. Odağın beklenmedik biçimde arka plana gidip gitmediğini veya hiçbir çıkışı olmayan bir yerde sıkışıp sıkışmadığını incele. - [ ] Yüzeyi kapat ve kaldığın yerden devam et. Açan kontrol hâlâ mevcutsa dönüş beklentisini, kaldırılmışsa mantıklı yeni hedefi düşün. Görsel kapanış animasyonunun odağı görünmez hale getirip getirmediğini ayrıca not et. Hareket ve etkileşim aynı anda tasarlanmalıdır. - [ ] Aynı göstergeleri farklı yüzeylerde karşılaştır. Koyu kartta görünen işaret bir görselin üzerinde kaybolabilir. Kontrolün dışına çizilen sınırın kırpılıp kırpılmadığını da incele. Bulguyu renk kodu talebi olarak değil, kullanıcının konumu takip edemediği durum olarak tarif et. 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 - [ARIA](https://androverse.com.tr/sozluk/aria) — ARIA, arayüz öğelerinin rolünü, durumunu ve ilişkilerini yardımcı teknolojilere bildirmeye yarayan erişilebilirlik özellikleridir. - [Erişilebilirlik](https://androverse.com.tr/sozluk/erisilebilirlik) — Eriş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şim](https://androverse.com.tr/sozluk/mikro-etkilesim) — Mikro etkileşim, belirli bir küçük eyleme veya durum değişimine verilen odaklı arayüz davranışıdır. ## Konuyu uygulamaya taşı - [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) — Klavye odağı kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. - [Menüyü bulmak bir yetenek değil.](https://androverse.com.tr/blog/menuyu-bulmak-bir-yetenek-degil) — Klavye odağı ile ilgili tasarım kararını Androverse’nin uygulama örnekleri ve değerlendirme sorularıyla birlikte düşün. ## Kaynaklar - [W3C WAI — ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) [Androverse profili](https://androverse.com.tr/yazar/androverse) · [Yayın ilkeleri](https://androverse.com.tr/yayin-ilkeleri)