Odaklanma

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 odaklanma 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 tür durumlarda odak stillerini kaldırmak cazip gelebilir, ancak odağı doğru ve dikkatli bir şekilde yönetmek iyi, erişilebilir bir kullanıcı deneyimi oluşturmaya 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 bir web sitesini 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, gezinme sorunları oluşturabilir ve örneğin yanlış bağlantının takip edilmesi durumunda istenmeyen davranışlara neden olabilir.

Öğelerin nasıl odaklanacağı

Bazı öğelere 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 sayfada ileri gitmek için sekme tuşunu, geriye gitmek için üst karakter + sekme tuşlarını kullanarak web sitesinin odaklanılabilir öğelerinde gezinebilirsiniz.

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 öğesini, 0 değerinden daha yüksek bir değere ayarlarsanız belge kaynak sırasına göre tanımlanan genel 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

Odak hakkındaki bilginizi test edin