Odak göstergesi (genellikle "odak halkası" ile belirtilir) sayfanızdaki o anda odaklanılan öğeyi tanımlar. Fare kullanamayan kullanıcılar için bu gösterge, fare işaretçileri için bir stand görevi gördüğü için son derece önemlidir.
Tarayıcının varsayılan odak göstergesi tasarımınızla uyuşmuyorsa yeniden biçimlendirmek için CSS'yi kullanabilirsiniz. Yalnızca klavye kullanıcılarınızı aklınızda bulundurmayı unutmayın!
Her zaman odak göstergesi göstermek için :focus özelliğini kullanın
:focus sözde sınıfı, bir öğeye odaklanılan her giriş cihazından (fare, klavye, ekran kalemi vb.) veya öğeyi odaklamak için kullanılan yöntemden bağımsız olarak uygulanır. Örneğin, aşağıdaki <div> öğesi odaklanılabilir olmasını sağlayan bir tabindex içeriyor. Ayrıca, :focus durumu için özel bir stile sahiptir:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Üzerine tıklamak için fare veya klavye kullanarak tıklamamanız fark etmeksizin, <div> her zaman aynı görünür.
Maalesef tarayıcılar odaklama yöntemleriyle tutarsız olabilir. Bir öğenin odağı alıp almayacağı tarayıcıya ve işletim sistemine bağlı olabilir.
Örneğin, aşağıdaki <button> öğesi de :focus durumu için özel bir stile sahiptir.
button:focus {
outline: 4px dashed orange;
}
macOS'te, Chrome'da <button> simgesini imleçle tıklarsanız özel odak stilini görürsünüz. Ancak macOS'teki Safari'de <button> seçeneğini tıklarsanız özel odak stilini görmezsiniz. Bunun nedeni Safari'de, öğenin tıkladığınızda odağı almamasıdır.
Odaklanma davranışı tutarsız olduğundan, odak stillerinizin kullanıcılarınız tarafından kabul edilebilir olduğundan emin olmak için farklı cihazlarda biraz test yapmanız gerekebilir.
Seçmeli bir odak göstergesini göstermek için :focus-visible özelliğini kullanın
Yeni :focus-visible sözde sınıfı, bir öğeye odak aldığında uygulanır ve tarayıcı, bulgular 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 basılan tuş bir meta, ALT / OPTION veya CONTROL tuşu içermiyorsa :focus-visible eşleşir.
Aşağıdaki örnekte bulunan düğme, seçici olarak bir odak göstergesi gösterecektir. Üzerine tıklamak için fare kullanırsanız sonuçlar, ilk kez bir klavye kullanarak sekme tuşuna basmanızdan farklı olur.
button:focus-visible {
outline: 4px dashed orange;
}
Odaklanılan öğenin üst öğesini biçimlendirmek için :focus-within kullanın
:focus-within sözde sınıfı, öğenin kendisi odak aldığında veya bu öğenin içindeki başka bir öğe odak aldığında öğeye uygulanır.
Sayfanın bir bölgesini vurgulamak için kullanılabilir ve böylece kullanıcının dikkatini o bölgeye çekebilirsiniz. Örneğin, aşağıdaki form hem formun kendisi seçildiğinde hem de radyo düğmelerinden herhangi biri seçiliyken odağı alır.
form:focus-within {
background: #ffecb3;
}
Odak göstergesi ne zaman görüntülenir?
Kendinize şu soruyu sormak iyi bir uygulamadır: "Bir mobil cihazı kullanırken bu kumandayı tıklasaydınız, klavye görüntülemesini bekler miydiniz?"
Yanıt "evet" ise odaklamak için kullanılan giriş cihazından bağımsız olarak kontrolde muhtemelen her zaman bir odak göstergesi gösterilir. <input type="text"> öğesi, iyi bir örnektir. Kullanıcının, giriş öğesinin odağı başlangıçta nasıl aldığına bakılmaksızın, öğeye klavye aracılığıyla giriş göndermesi gerekir. Bu nedenle, her zaman bir odak göstergesinin görüntülenmesi yararlı olur.
Yanıt "hayır" ise kontrol, seçici bir şekilde odak göstergesi göstermeyi tercih edebilir. <button> öğesi buna iyi bir örnektir. Kullanıcı fare veya dokunmatik ekranla bu düğmeyi tıklarsa işlem tamamlanmıştır ve bir odak göstergesi gerekmeyebilir. Bununla birlikte, kullanıcı bir klavyeyle geziniyorsa bir odak göstergesi göstermek, kullanıcının ENTER veya SPACE tuşlarını kullanarak kontrolü tıklamak isteyip istemediğine karar verebilmesi açısından faydalıdır.
outline: none kullanmaktan kaçının
Açıkçası, tarayıcıların ne zaman bir odak göstergesi çizeceğine karar verme şekli
çok kafa karıştırıcıdır. CSS ile bir <button> öğesinin görünümünün değiştirilmesi veya bir öğeye tabindex verilmesi, tarayıcının varsayılan odak halkası davranışının etkinleşmesine neden olur.
Kalıp dışı çok yaygın bir yöntem, CSS kullanarak odak göstergesini kaldırmaktır. Örneğin:
/* Don't do this!!! */
:focus {
outline: none;
}
Bu sorunu çözmek için daha iyi bir yol, :focus ve :focus-visible çoklu dolgusunu birlikte kullanmaktır. Aşağıdaki ilk kod bloğu, çoklu dolgunun nasıl çalıştığını göstermekte, altındaki örnek uygulama ise bir düğmedeki odak göstergesini değiştirmek için çoklu dolgunun kullanılmasına ilişkin örnek sağlamaktadır.
/*
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 {
…
}