CSS Podcast - 018: Odak
Web sayfanızda, kullanıcıyı web sitesinin ana içeriğine atlayan bir bağlantıyı tıklarsınız. Bunlara genellikle atlama bağlantıları veya yer işareti bağlantıları denir. Bu bağlantı sekme ve enter tuşları kullanılarak bir klavye tarafından etkinleştirildiğinde, ana içerik kapsayıcısının etrafında bir odak halkası bulunur. Bunun nedeni nedir?
Bunun nedeni, <main>
öğesinin bir tabindex="-1"
özellik değerine sahip olmasıdır. Bu, programatik olarak odaklanılabileceği anlamına gelir.
<main>
hedeflendiğinde (tarayıcı URL çubuğundaki #main-content
, id
ile eşleştiği için) programatik odağı alır.
Bu gibi durumlarda odak stillerini kaldırmak cazip gelebilir, ancak odağı uygun şekilde ve dikkatli bir şekilde ele almak iyi, erişilebilir bir kullanıcı deneyimi oluşturmaya yardımcı olur.
Ayrıca etkileşimlere ilgi çekmek için de ideal bir yer olabilir.
Odak neden önemlidir?
Web geliştiricisi olarak sizin işiniz, bir web sitesini herkes için erişilebilir ve kapsayıcı hale getirmek. CSS ile erişilebilir odak durumları oluşturmak bu sorumluluğun bir parçasıdır.
Odak stilleri, klavye veya anahtar kontrolü gibi bir cihaz kullanan kullanıcılara bir web sitesinde gezinmek ve siteyle etkileşimde bulunmak için yardımcı olur. Bir öğeye odaklanılırsa ve görsel bir gösterge yoksa kullanıcı neyin odakta olduğunu takip edemeyebilir. Bu durum, gezinme sorunları oluşturabilir ve örneğin yanlış bağlantı izlenirse istenmeyen davranışlara yol açabilir.
Öğeler nasıl odaklanır?
Belirli öğelere otomatik olarak odaklanılabilir. Bunlar <a>
, <button>
, <input>
ve <select>
gibi etkileşim ve girişleri kabul eden öğelerdir.
Kısacası, tüm form öğeleri, düğmeler ve bağlantılar.
Genellikle bir web sitesinin odaklanılabilir öğelerinde, sayfada ilerlemek için sekme tuşunu, geri gitmek için de üst karakter + sekme tuşunu kullanarak gezinebilirsiniz.
Bir kullanıcı sekme tuşuna her bastığında veya odak, URL'de ya da bir JavaScript etkinliği nedeniyle her kaydırıldığında sekme dizinini (öğelerin odaklanıldığı sıra) değiştirmenize olanak tanıyan tabindex
adlı bir HTML özelliği de vardır.
Bir HTML öğesindeki tabindex
, 0
değerine ayarlanırsa sekme anahtarı aracılığıyla odak alabilir ve belge kaynak sırası tarafından tanımlanan global sekme dizinini kullanır.
tabindex
öğesini -1
olarak ayarlarsanız odağı yalnızca programatik olarak alabilir. Diğer bir deyişle, yalnızca bir JavaScript etkinliği gerçekleştiğinde veya bir karma değişikliği (URL'de öğenin id
ile eşleştiğinde) gerçekleştiğinde.
tabindex
öğesini 0
değerinden yüksek bir değere ayarlarsanız belge kaynak sırası tarafından tanımlanan global sekme dizininden kaldırılır.
Sekme oluşturma sırası artık tabindex
değeriyle tanımlanacağı için örneğin tabindex="1"
içeren bir öğe, odağı tabindex="2"
içeren öğeden önce alır.
Odak stilini belirleme
Bir öğeye odaklanıldığında varsayılan tarayıcı davranışı, odak halkası göstermektir. Bu odak halkası, tarayıcı ve işletim sistemleri arasında farklılık gösterir.
Bu davranış, sözde sınıflar dersinde öğrendiğiniz :focus
, :focus-within
ve :focus-visible
sözde sınıfları kullanılarak CSS ile değiştirilebilir.
Bir öğenin varsayılan stiliyle kontrast olan bir odak stili ayarlamak önemlidir.
Örneğin, outline
özelliğini kullanmak yaygın bir yaklaşımdır.
a:focus {
outline: 2px solid slateblue;
}
outline
özelliği, bağlantı metnine çok yakın görünebilir ancak outline-offset
özelliği, öğenin doldurduğu geometrik boyutu etkilemeden fazladan görsel padding
eklediği için bu konuda yardımcı olabilir.
outline-offset
için pozitif bir sayı değeri dış çizgiyi dışarı iter, negatif bir değer ise dış çizgiyi içe çeker.
Şu anda bazı tarayıcılarda, öğenizde border-radius
ayarlandıysa ve outline
kullanıyorsanız öğe eşleşmez. Dış çizgilerin köşeleri keskindir.
Bu nedenle, box-shadow
bulanıklık yarıçapına sahip küçük bir box-shadow
kullanmak isteyebilirsiniz. Çünkü box-shadow
, border-radius
şekline sabitlenmiştir, ancak bu stil Windows Yüksek Kontrast Modu'nda gösterilmez.
Bunun nedeni, Windows Yüksek Kontrast Modu'nun gölge uygulamaması ve kullanıcının tercih ettiği ayarlara öncelik vermek için arka plan resimlerini çoğunlukla göz ardı etmesidir.
Özet
Bir öğenin varsayılan durumuyla karşıtlık içeren bir odak durumu oluşturmak son derece önemlidir. Varsayılan tarayıcı stilleri bunu sizin için zaten yapar ancak bu davranışı değiştirmek isterseniz aşağıdakileri göz önünde bulundurun:
- Klavye odağını alabilen öğelerde
outline: none
kullanmaktan kaçının. outline
stillerinibox-shadow
ile değiştirmekten kaçının. gösterilmez.- Bir HTML öğesinde yalnızca bu durumda
tabindex
için pozitif bir değer ayarlayın. - Odaklanma durumunun varsayılan duruma kıyasla çok net olduğundan emin olun.
Öğrendiklerinizi sınayın
Odaklanma bilginizi test edin
Aşağıdakilerden hangileri otomatik olarak odaklanılabilir öğelerdir?
<a>
<p>
<button>
<input>
<output>
<select>
Aşağıdaki giriş cihazlarından hangisi odak ayarlayabilir?