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ığından 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ı 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 tutarlı olmayabilir. 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 öğenin odağı almaması.
Odak davranışı tutarlı olmadığından, farklı cihazlarda biraz test yaparak odaklanma stillerinizin kullanıcılarınız tarafından kabul edildiğinden emin olmanız gerekebilir.
Odak göstergesini seçerek göstermek için :focus-visible tuşunu 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. Fareyle tıkladığınızda elde edeceğiniz sonuçlar, önce klavyeyle sekme tuşuna basarak tıkladığınızda elde edeceğiniz sonuçlardan farklıdır.
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.
Yanıt "hayır" ise kontrol, odaklanma göstergesini seçerek gösterebilir. <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ılarda 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.
Oldukça yaygın bir anti-pattern, CSS kullanarak odak göstergesinin kaldırılmasıdır. Örneğin:
/* 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 {
…
}