Odak göstergesi (genellikle "odak halkası" ile gösterilir), sayfanızda şu anda odaklanan öğeyi tanımlar. Fare kullanamayan kullanıcılar için bu gösterge, fare işaretçisinin yerini aldığı için son derece önemlidir.
Tarayıcının varsayılan odak göstergesi tasarımınızla çakışıyorsa CSS'yi kullanarak yeniden stil verebilirsiniz. Klavye kullanıcılarınızı da göz önünde bulundurmayı unutmayın.
Odak göstergesini her zaman göstermek için :focus simgesini kullanın.
:focus sözde sınıfı, giriş cihazından (fare, klavye, ekran kalemi vb.) veya odaklanmak için kullanılan yöntemden bağımsız olarak bir öğeye her odaklanıldığında uygulanır. Örneğin, aşağıdaki <div> öğesinde, odaklanılabilir olmasını sağlayan bir tabindex vardır. Ayrıca :focus durumu için özel bir stili vardır:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Fareyle tıklasanız veya klavyeyle sekme tuşuyla <div>'e gitseniz de <div> her zaman aynı görünür.
Maalesef tarayıcılar, odaklanmayı uygulama konusunda tutarsız olabilir. 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 bir stili de vardır.
button:focus {
outline: 4px dashed orange;
}
macOS'te Chrome'da fareyle <button> simgesini tıkladığınızda özel odak stilini görürsünüz. Ancak macOS'te Safari'de <button> simgesini tıklarsanız özel odak stilini görmezsiniz. Bunun nedeni Safari'de öğeyi tıkladığınızda öğeye odaklanılmamasıdır.
Odak davranışı tutarlı olmadığından, odak stillerinizin kullanıcılarınız tarafından kabul edildiğinden emin olmak için farklı cihazlarda biraz test yapmanız gerekebilir.
Odak göstergesini seçerek göstermek için :focus-visible kullanın
Yeni :focus-visible sözde sınıf, bir öğe odaklandığında ve tarayıcı, sezgisel yöntemler aracılığıyla bir odak göstergesi göstermenin kullanıcı için yararlı olacağını belirlediğinde uygulanır. Özellikle, en son kullanıcı etkileşimi klavye üzerinden gerçekleştiyse ve tuş basışı 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. Üzerine tıklamak için fare kullanırsanız sonuçlar, ilk olarak sekme üzerine geçmek için klavyeyi kullandığınız durumdan farklı olur.
button:focus-visible {
outline: 4px dashed orange;
}
Odaklanılan öğenin üst öğesine stil uygulamak için :focus-within öğesini kullanma
:focus-within sözde sınıfı, bir öğeye ya öğenin kendisi odaklandığında ya da öğe içindeki başka bir öğe odaklandığında uygulanır.
Kullanıcının dikkatini sayfanın bir bölgesine çekmek için sayfanın bir bölgesini vurgulamak amacıyla kullanılabilir. Örneğin, aşağıdaki form hem kendisi seçildiğinde hem de radyo düğmelerinden herhangi biri seçildiğinde odağa alınır.
form:focus-within {
background: #ffecb3;
}
Odaklanma göstergesi ne zaman gösterilir?
"Mobil cihaz kullanıyorken bu kontrolü tıklarsanız klavye gösterilmesini ister misiniz?" sorusunu kendinize sormanız iyi bir fikirdir.
Yanıtınız "evet" ise kontrol, odaklanmak için kullanılan giriş cihazından bağımsız olarak her zaman bir odak göstergesi göstermelidir. <input type="text"> öğesi buna örnek olarak verilebilir. Giriş öğesinin ilk olarak nasıl odak aldığından bağımsız olarak kullanıcının öğeye klavye üzerinden giriş göndermesi gerekir. Bu nedenle, her zaman bir odak göstergesi göstermek faydalıdır.
Cevap "hayır" ise kontrol, seçmeli olarak bir odak göstergesi göstermeyi tercih edebilir. <button> öğesi buna iyi bir örnektir. Kullanıcı fare veya dokunmatik ekranla tıkladığında işlem tamamlanır ve odaklanma göstergesi gerekmeyebilir. Ancak kullanıcı klavyeyle geziniyorsa, ENTER veya SPACE tuşlarını kullanarak kontrolü tıklamak isteyip istemediğine karar vermesi için bir odaklanma göstergesi göstermek yararlı olur.
outline: none kullanmaktan kaçının
Tarayıcıların bir odak göstergesinin ne zaman çizileceğ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 etkinleşmesine neden olur.
Ç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 sorunun üstesinden gelmenin daha iyi bir yolu, :focus ve :focus-visible polyfill'ini birlikte kullanmaktır. Aşağıdaki ilk kod bloğu, polyfill'in nasıl çalıştığını gösterir. Bunun altındaki örnek uygulamada ise bir düğmedeki odak göstergesini değiştirmek için polyfill'in nasıl kullanıldığına dair bir örnek verilmiştir.
/*
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 {
…
}