Odaklanma

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 stillerini box-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