Odaklanma

The CSS Podcast - 018: Focus

Web sayfanızda, kullanıcıyı web sitesinin ana içeriğine yönlendiren bir bağlantıyı tıklarsınız. Bunlara genellikle atlama bağlantıları veya ana sayfa bağlantıları denir. Bu bağlantı, sekme ve enter tuşları kullanılarak klavyeyle etkinleştirildiğinde ana içerik kapsayıcının etrafında bir odak halkası görünür. Bunun nedeni nedir?

Bunun nedeni, <main> öğesinin tabindex="-1" özellik değerine sahip olmasıdır. Bu da programatik olarak odaklanabileceği anlamına gelir. Tarayıcı URL çubuğundaki #main-content, id ile eşleştiği için <main> hedeflendiğinde programlı odaklanma alır. Bu gibi durumlarda odak stillerini kaldırmak cazip olsa da odağı uygun şekilde ve dikkatli bir şekilde ele almak, iyi ve erişilebilir bir kullanıcı deneyimi oluşturmanıza yardımcı olur. Ayrıca, etkileşimlere ilgi çekici bir şeyler eklemek için de mükemmel bir yer olabilir.

Odak neden önemlidir?

Web geliştiricisi olarak, web sitelerini herkes için erişilebilir ve kapsayıcı hale getirmek sizin görevinizdir. 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ıların web sitesinde gezinmesine ve web sitesiyle etkileşim kurmasına yardımcı olur. Bir öğe odaklanırsa ve görsel bir gösterge yoksa kullanıcı, odakta olan öğeyi kaybedebilir. Bu durum, yanlış bağlantının takip edilmesi gibi durumlarda gezinme sorunlarına ve istenmeyen davranışlara neden olabilir.

Öğelerin nasıl odaklanacağı

Belirli öğeler otomatik olarak odaklanılabilir. Bunlar, <a>, <button>, <input> ve <select> gibi etkileşimi ve girişi kabul eden öğelerdir. Kısacası tüm form öğeleri, düğmeler ve bağlantılar. Genellikle bir web sitesinin odaklanılabilir öğelerinde gezinmek için sayfada ileri gitmek üzere sekme tuşunu, geri gitmek için üst karakter + sekme tuşlarını kullanabilirsiniz.

Ayrıca, kullanıcı Tab tuşuna her bastığında veya odak, URL'de bir karma oluşturma değişikliğiyle ya da JavaScript etkinliğiyle değiştiğinde sekme dizini (öğelerin odaklanacağı sıra) özelliğini değiştirmenize olanak tanıyan tabindex adlı bir HTML özelliği de vardır. Bir HTML öğesindeki tabindex 0 olarak ayarlanmışsa sekme tuşu aracılığıyla odak alabilir ve doküman kaynak sırasına göre tanımlanan genel sekme dizini dikkate alınır.

tabindex özelliğini -1 olarak ayarlarsanız yalnızca programatik olarak odaklanabilir. Yani yalnızca bir JavaScript etkinliği gerçekleştiğinde veya karma değeri değişikliği (öğenin URL'sindeki id ile eşleşen) gerçekleştiğinde odaklanabilir. tabindex değerini 0'ten yüksek bir değere ayarlarsanız doküman kaynak sırasına göre tanımlanan küresel sekme dizininden kaldırılır. Sekme sırası artık tabindex değerine göre tanımlanacak. Böylece, örneğin tabindex="1" içeren bir öğe, tabindex="2" içeren bir öğeden önce odağa alınacaktır.

Stil odak noktası

Bir öğe odağı aldığında varsayılan tarayıcı davranışı, bir odak halkası göstermek olur. Bu odak halkası, tarayıcı ve işletim sistemlerine göre değişiklik gösterir.

Bu davranış, sahte sınıflar dersinde bahsedilen :focus, :focus-within ve :focus-visible sahte sınıfları kullanarak CSS ile değiştirilebilir. Bir öğenin varsayılan stiliyle kontrast oluşturan bir odaklanma stili belirlemek önemlidir. Örneğin, yaygın bir yaklaşım outline mülkünü kullanmaktır.

a:focus {
  outline: 2px solid slateblue;
}

outline mülkü, bir bağlantının metnine çok yakın görünebilir ancak öğenin doldurduğu geometrik boyutu etkilemeden ek görsel padding eklediği için outline-offset mülkü bu konuda yardımcı olabilir. outline-offset için pozitif bir sayı değeri, dış çizgiyi dışa doğru iter. Negatif bir değer ise dış çizgiyi içe doğru çeker.

Şu anda bazı tarayıcılarda, öğeniz için border-radius ayarladıysanız ve outline kullanırsanız bu eşleşmez. Bu durumda dış çizginin köşeleri keskin olur. Bu nedenle, box-shadow border-radius'u dikkate alarak şekle kırptığı için küçük bir bulanıklık yarıçapına sahip bir box-shadow kullanmak caziptir 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 ayarları tercih etmek için genellikle arka plan resimlerini yoksamasıdır.

Özet olarak

Bir öğenin varsayılan durumuyla kontrast oluşturan 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 unutmayın:

• Klavye odağını alabilen bir öğede outline: none kullanmaktan kaçının.
• outline stillerini box-shadow ile değiştirmekten kaçının. Windows Yüksek Kontrast Modu'nda gösterilmez.
• HTML öğesinde tabindex için yalnızca kesinlikle gerekli olduğunda pozitif bir değer ayarlayın.
• Odak durumunun varsayılan duruma kıyasla çok net olduğundan emin olun.

Öğrendiklerinizi test etme

Odaklanma hakkındaki bilginizi test edin