Stil odağı

Rob Dodson

Odak göstergesi (genellikle "odak halkası" ile belirtilir), o anda bir öğedir. Fare kullanamayan kullanıcılar için bu gösterge son derece önemlidir, çünkü onların fare işaretçisini kullanın.

Tarayıcının varsayılan odak göstergesi tasarımınızla çakışıyorsa yeniden biçimlendirilmesini sağlayın. Klavye kullanıcılarınızı da göz önünde bulundurmayı unutmayın.

Odak göstergesinin her zaman gösterilmesi için :focus kullanın

:focus Sözde sınıf, girişten bağımsız olarak bir öğe üzerine odaklanıldığında uygulanır cihaz (fare, klavye, ekran kalemi vb.) veya odaklamak için kullanılan yöntem. Örneğin, aşağıdaki <div>, odaklanılabilir hale getiren bir tabindex içeriyor. Ayrıca :focus durumu için özel stil:

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

Üzerine tıklama için fare veya klavye ile tıklama yapmanızdan bağımsız olarak, <div> her zaman aynı görünür.

Maalesef tarayıcılar, odağı uygulama şekliyle tutarlı olmayabilir. Ya da odaklanma durumu, tarayıcıya ve işletim sistemine bağlı olabilir. bahsedeceğim.

Örneğin, aşağıdaki <button>, :focus için özel bir stile de sahiptir durumu.

button:focus {
  outline: 4px dashed orange;
}

macOS'teki Chrome'da fareyle <button> simgesini tıklarsanız özel odak stili. Ancak, macOS'teki Safari'de <button> simgesini tıklayın. Bunun nedeni, Safari'de, öğeye tıkladığınızda odak algılanmıyor.

Not: Hangi tarayıcıların ve işletim sistemlerinin <button> öğelerine odaklanacağının özeti için <button> odaklanma davranışı için MDN referansına bakın.

Odaklanma davranışı tutarsız olduğundan biraz test gerektirebilir. dikkat edin.

Odak göstergesini seçmeli olarak göstermek için :focus-visible tuşunu kullanın

Yeni :focus-visible sözde sınıf, bir öğeye odaklanıldığında ve tarayıcı, bir odak göstergesi görüntülemenin bu soruna ilişkin kullanıcı için faydalı olabilir. Özellikle, kullanıcı etkileşiminin klavyeden yapıldığını ve tuşa basıldığında bir meta, ALT / OPTION, veya CONTROL tuşu, ardından :focus-visible eşleşir.

Aşağıdaki örnekte yer alan düğme, seçmeli olarak bir odak göstergesi gösterir. Eğer fareyle üzerine gelmeyi tercih ederseniz, sonuçlar ilk klavyeyi kullanabilirsiniz.

button:focus-visible {
  outline: 4px dashed orange;
}

Odaklanılan bir öğenin üst öğesinin stilini belirlemek için :focus-within kullanma

İlgili içeriği oluşturmak için kullanılan :focus-within sözde sınıf, bir öğeye, bir öğenin kendisi bir öğe aldığında uygulanır odaklanılmasını sağlayabilirsiniz.

Sayfanın bir bölgesini vurgulamak için kullanılabilir. o alana ilgi gösterebilir. Örneğin, aşağıdaki form hem formun kendisi seçildiğinde ve ayrıca formdaki radyo düğmelerinden biri seçili.

form:focus-within {
  background: #ffecb3;
}

Odak göstergesi ne zaman görüntülenir?

Kendinize şu soruyu sormak iyi bir genel kuraldır: "Projenizi sürerken bu kontrolü tıkladıysanız bir klavye görüntülemesini bekler miydiniz?"

Yanıt "evet" ise kontrol düğmesinde büyük olasılıkla her zaman göstergesine (odaklanmak için kullanılan giriş cihazından bağımsız olarak) bakmalısınız. Buna iyi bir örnek <input type="text"> öğesi. Kullanıcının girdiyi öğesi (giriş öğesinin orijinal olarak nasıl alındığından bağımsız olarak) bu nedenle her zaman bir odak göstergesi görüntülemek yararlı olur.

Yanıtınız “hayır” ise kontrol düğmesi, belirli bir alanın yerine göstergesidir. <button> öğesi iyi bir örnektir. Kullanıcı, düğmeyi tıklayarak bir fare veya dokunmatik ekran varsa, işlem tamamlanmıştır ve odak göstergesi gerekir. Bununla birlikte, kullanıcı klavyeyle geziniyorsa klavyeyi kullanmak faydalıdır. kullanıcının uygulamayı kullanmak isteyip istemediğine karar verebilmesi için bir odak göstergesi ENTER veya SPACE tuşlarını kullanarak denetimi tıklayın.

outline: none kullanmaktan kaçının

Tarayıcıların bir odak göstergesinin ne zaman çizileceğine kafa karıştırıcı olabilir. Bir <button> öğesinin görünümünü CSS ile değiştirme veya bir tabindex öğesi, tarayıcının varsayılan odaklama halkası davranışının harekete geçin.

Çok yaygın karşılaşılan bir karşıt kalıp, aşağıdakiler gibi CSS kullanarak odak göstergesini kaldırmaktır:

/* Don't do this!!! */
:focus {
  outline: none;
}

Bu sorunu çözmek için daha iyi bir yöntem olarak :focus ve :focus-visible çoklu dolgusu. Aşağıdaki ilk kod bloğunda bu altındaki örnek uygulama, çoklu dolgu çalışır ve altındaki örnek uygulama, bir düğmedeki odak göstergesini değiştirmek için çoklu dolguyu kullanın.

/*
  This will hide the focus indicator if the element receives focus via the
  mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step, then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
  …
}