Genellikle "odak halkası" ile gösterilen odak göstergesi, sayfanızda odaklanılan öğeyi tanımlar. Fare kullanamayan veya kullanmak istemeyen kullanıcılar için bu gösterge, fare imlecinin yerine geçtiğinden son derece önemlidir.
Tarayıcının varsayılan odak göstergesi tasarımınızla çakışıyorsa CSS kullanarak yeniden şekillendirebilirsiniz. Kullanıcılarınızı göz önünde bulundurmayı unutmayın.
Her zaman odak göstergesi göstermek için :focus kullanın
:focus sözde sınıfı, kullanılan giriş yönteminden veya cihazdan (ör. fare, klavye ya da ekran kalemi) bağımsız olarak odaklanılan öğelere uygulanır.
Örneğin, aşağıdaki <div>, odaklanılabilir olmasını sağlayan bir tabindex içerir ve :focus durumu için özel bir stile sahiptir:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Hangi cihazı kullanırsanız kullanın, <div> odakta aynı görünür.
Maalesef tarayıcılar, odaklanmayı tutarlı bir şekilde uygulayamayabilir. Bir öğenin odaklanıp odaklanmayacağı tarayıcıya ve işletim sistemine bağlı olabilir.
Örneğin, aşağıdaki <button> öğesinin :focus durumu için özel CSS'si vardır.
button:focus {
outline: 4px dashed orange;
}
macOS'te Chrome'da fareyle <button> simgesini tıkladığınızda özel odak stilini görmeniz gerekir. Ancak macOS'te Safari'de <button> simgesini tıklarsanız özel odak stilini görmezsiniz. Bunun nedeni, Safari'de öğeyi tıkladığınızda öğenin odaklanmamasıdır.
Odak davranışı tutarsızdır. Odak stillerinizin kullanıcılarınız için kabul edilebilir olduğundan emin olmak amacıyla sayfanızı farklı cihazlarda ve farklı girişlerle test edin.
Odak göstergesini seçerek göstermek için :focus-visible kullanma
:focus-visible
sözde sınıfı, bir öğe odaklandığında ve tarayıcı, odak göstergesi
görüntülemenin kullanıcı için faydalı olacağını (sezgisel yöntemlerle) belirlediğinde uygulanır. Özellikle en son kullanıcı etkileşimi klavye ile yapıldıysa ve tuşa basma işlemi meta, ALT, OPTION veya CONTROL tuşunu içermiyorsa :focus-visible eşleşir.
Aşağıdaki örnekteki düğme, odak göstergesini seçici olarak gösterir. Tıklamak için fare kullanırsanız sonuçlar, önce klavye kullanarak sekme tuşuyla bu öğeye giderseniz elde edeceğiniz sonuçlardan farklı olur.
button:focus-visible {
outline: 4px dashed orange;
}
Odaklanılan öğenin üst öğesini stilize etmek için :focus-within kullanma
:focus-within sözde sınıfı, öğenin kendisi odaklandığında veya bir alt öğe odaklandığında öğeye uygulanır. Kullanıcının dikkatini çekmek için sayfanın bir bölgesini vurgulamak amacıyla kullanılabilir.
Örneğin, bir form hem formun kendisi hem de radyo düğmelerinden herhangi biri seçildiğinde odaklanır.
form:focus-within {
background: #ffecb3;
}
Odak göstergesi ne zaman gösterilir?
Kendinize "Mobil cihaz kullanırken bu kontrole tıkladığınızda klavye görüntülenmesini bekler miydiniz?" sorusunu sormak iyi bir yöntemdir.
- Evetse: Giriş cihazından bağımsız olarak kontrol her zaman odak göstergesi göstermelidir. Örneğin, bu durum neredeyse her zaman
<input type="text">öğesi için geçerlidir. Giriş öğesi nasıl odaklanırsa odaklansın, kullanıcının klavyeyi kullanarak öğeye giriş göndermesi gerekir. - Hayırsa: Kontrol, odak göstergesini seçerek göstermeyi tercih edebilir. Örneğin, kullanıcı fareyle veya dokunmatik ekranda
<button>simgesini tıkladığında işlem tamamlanır. Odak göstergesi gerekmeyebilir. Ancak kullanıcı klavye ile gezinirken kontrolü ENTER veya BOŞLUK tuşuyla etkinleştirmek isteyip istemediğine karar verebilmesi için odak göstergesi göstermek faydalıdır.
outline: none kullanmaktan kaçının
Tarayıcıların odak göstergesini ne zaman çizeceğine karar verme şekli açıkçası çok kafa karıştırıcı. Bir <button> öğesinin görünümünü CSS ile değiştirmek veya bir öğeye tabindex vermek, tarayıcının varsayılan odak halkası davranışının devreye girmesine neden olur.
Bazen geliştiriciler, CSS kullanarak odak göstergesini kaldırır:
/* Don't do this!!! */
:focus {
outline: none;
}
Bu sorunu gidermenin daha iyi bir yolu, :focus ve :focus-visible polyfill'ini birleştirmektir. İlk kod bloğu, polyfill'in nasıl çalıştığını gösterir. Altındaki örnek uygulama ise bir düğmedeki odak göstergesini değiştirmek için polyfill'in nasıl kullanılacağına dair bir örnek sunar.
/*
This hides the focus indicator if the element receives focus with a
mouse, but it still shows 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 {
...
}