Odaklanma

CSS Podcast'i - 018: Odak 'nı inceleyin.

Web sayfanızda Kullanıcıyı web sitesinin ana içeriğine yönlendiren bir bağlantıyı tıklarsanız. Bunlara genellikle atlama bağlantıları veya yer işareti bağlantıları denir. Bu bağlantı bir klavye tarafından etkinleştirildiğinde, sekme ve Enter tuşlarını kullanarak ana içerik kapsayıcısının etrafında bir odak halkası vardır. Bunun nedeni nedir?

Bunun nedeni, <main> işlevinin tabindex="-1" özellik değerine sahip olmasıdır. Bu da programatik olarak odaklanılabileceği anlamına gelir. <main> hedeflendiğinde (çünkü #main-content işareti id ile eşleşir. Programatik odağı alır. Bu tür durumlarda odak stillerini kaldırmak cazip gelebilir. Ancak odağı doğru ve özenli bir şekilde ele almak, erişilebilir hale getirmek. Ayrıca etkileşimlere ilgi çekmek için de harika bir yer olabilir.

Odak neden önemlidir?

Web geliştiricisi olarak bir web sitesini herkes için erişilebilir ve kapsayıcı hale getirmek sizin işiniz. CSS ile erişilebilir odak durumları oluşturmak bu sorumluluğun bir parçasıdır.

Odak stilleri, klavye veya klavye gibi cihazları kullanan kişilere anahtar kontrolü Web sitesinde gezinmek ve web sitesiyle etkileşimde bulunmak için Bir öğeye odaklanılırsa ve bu öğede görsel bir işaret yoksa Kullanıcı neyin odakta olduğunu takip edemeyebilir. Bu, aşağıdaki durumlarda gezinmeyle ilgili sorunlara yol açabilir ve istenmeyen davranışlara neden olabilir: olduğunu varsayalım.

Öğeler nasıl odaklanır?

Belirli öğelere otomatik olarak odaklanılabilir; Bunlar, <a> gibi etkileşimi ve girişi kabul eden öğelerdir <button>, <input> ve <select>. 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, sekme dizinini değiştirmenize olanak tanıyan tabindex adlı bir HTML özelliği de vardır. Bu özellik öğelerin odaklanılma sırası (kullanıcı sekme tuşuna her bastığında, veya odak, URL'deki bir karma değişikliğiyle veya bir JavaScript etkinliği tarafından kaydırılıyorsa. Bir HTML öğesinde tabindex, 0 olarak ayarlanırsa sekme tuşu aracılığıyla odağı alabilir ve genel sekme dizinini dikkate alır. doküman kaynak sıralamasıyla tanımlanır.

tabindex öğesini -1 olarak ayarlarsanız odağı yalnızca programatik olarak alabilir. yani yalnızca bir JavaScript etkinliği gerçekleştiğinde veya bir karma değişikliği (URL'de öğenin id değeriyle eşleşen) gerçekleşir. tabindex değerini 0 değerinden yüksek bir değere ayarlarsanız, global sekme dizininden kaldırılır, doküman kaynak sırasına göre tanımlanır. Sekme sıralaması artık tabindex değeriyle tanımlanacak. bu nedenle tabindex="1" içeren bir öğe, tabindex="2" içeren bir öğeden önce odağı alır.

Odak stilini belirleme

Bir öğe odak aldığında varsayılan tarayıcı davranışı, odak halkası olarak gösterilir. Bu odak halkası tarayıcı ve işletim sistemleri arasında farklılık gösterir.

Bu davranış CSS ile değiştirilebilir, :focus, :focus-within ve :focus-visible kullanılıyor öğrendiğiniz sanal sınıfları sözde sınıf dersi. Bir öğenin varsayılan stiliyle kontrast içeren bir odak stili ayarlamak önemlidir. Örneğin, outline mülkünün kullanılması 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 bu konuda yardımcı olabilir. çünkü öğenin doldurduğu geometrik boyutu etkilemeden ekstra görsel padding ekler. outline-offset için pozitif sayı değeri, dış çizgiyi dışa iter. negatif bir değer ana hatları içe doğru çekecektir.

Şu anda bazı tarayıcılarda öğenizde border-radius ayarı varsa ve outline kullanıyorsanız olmaz, dış çizginin köşeleri keskin olacaktır. İşte bu sebeple küçük bulanıklık yarıçapına sahip bir box-shadow kullanmak caziptir, çünkü box-shadow şekille oluşturulur, border-radius kutlaması, ancak bu stil Windows Yüksek Kontrast Modu'nda gösterilmez. Bunun nedeni, Windows Yüksek Kontrast Modu'nun gölge uygulamaz, ve kullanıcının tercih ettiği ayarları tercih etmek için çoğunlukla arka plan resimlerini yok sayar.

Ö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 özelliğini kullanmaktan kaçının.
• outline stillerini box-shadow ile değiştirmekten kaçının. çünkü Windows Yüksek Kontrast Modu'nda görünmez.
• Bir HTML öğesinde tabindex için yalnızca kesinlikle mecbur olduğunuz durumlarda pozitif bir değer ayarlayın.
• Odak durumunun varsayılan durum yerine çok net olduğundan emin olun.

Öğrendiklerinizi sınayın

Odaklanma bilginizi test edin