Odak Anahatlarını Erişilebilir Bir Şekilde Gizleme

Faydalı Alternatif Metin Yazma

Bu makale, Javascript çözümüyle ilgili performans değerlendirmelerini içerecek şekilde 13 Ağustos 2020’de güncellendi.

Varsayılan olarak, tarayıcılar, odak aldıklarında öğeler için stil sağlar. Bu, tarayıcıdan tarayıcıya değişir, ancak genellikle bir öğenin etrafındaki anahattır. Chrome’da odak stili, parlak mavi bir anahat olarak kendini gösterir. Firefox’ta, öğenin rengini miras alan ince noktalı bir anahattır.

Odak halkası (genel olarak bilindiği gibi) bir hata değil, bir özellik olarak görülmelidir. Bir web sitesinde fare yerine klavye kullanarak geziniyorsanız özellikle yararlıdır: öğeler arasında gezinirken, kullanıcı bir web sayfasında tam olarak nerede olduklarını ve o anda hangi öğenin odakta olduğunu görebilir. Eric Bailey’nin bu makalesi odak stillerinin neden önemli olduğunu açıklamakta harika bir iş çıkarıyor. Ne yazık ki, faydaları genellikle müşteriler ve tasarımcılar tarafından yeterince anlaşılmamaktadır. Geliştiricilerden, kasıtsız veya çirkin olduğuna inanan başkaları tarafından sık sık odak taslağını kaldırmaları istenir. Şahsen ben bu savaşı birçok kez verdim ve her zaman başarılı olmadım.

CSS ile Stil Oluşturma

Tarayıcının odak halkasını gizlemek zorunda kalırsanız, yapabileceğiniz en az şey alternatif bir odak stili sağlamaktır. Web sitenizin markasıyla daha uyumlu odak stilleri sağlamak için CSS kullanabiliriz. Bunları kullanarak stil verebiliriz :focus sözde sınıf, şöyle:

input:focus {
outline: 2px solid deeppink;
}

(Eric’in makalesi ayrıca, aşağıdaki gibi ek stil seçeneklerine de giriyor: :focus-within.) Ancak bu genellikle bir tasarımcının odak stilleri sağlamasına bağlıdır. en azından tarayıcı varsayılanları kadar erişilebilir (örneğin, renk körlüğü veya diğer görme bozuklukları olan kişilerin algılamakta güçlük çekebilecekleri basit bir renk değişikliğinden daha büyük bir görünür değişiklik sağlarlar) ve bazen bir müşterinin bunları imzalamasını gerektirir. Bazen tasarımcıya geri dönüp erişilebilir odak stilleri talep etme fırsatı vardır, ancak diğer zamanlarda projeyi geciktirecek durumda değilsiniz.

Javascript ile erişilebilir bir alternatif

Geçenlerde meslektaşım Carl Hughes beni Spotify geliştiricisinden bir çözüme yönlendirdi Jose M. Perezbaşlangıçta odak halkasını gizlemek için Javascript kullanan, ardından yalnızca bir kullanıcı bir tuşa basarak etkileşim kurduğunda, belge köküne bir sınıf ekleyerek bunu görüntüler:

document.addEventListener('keyup', function (event) {
/* if key is tab */
if (event.which === 9) {
document.documentElement.classList.remove('u-no-focus-outline')
document.documentElement.classList.add('u-focus-outline')
}
})

Ardından, anahattı gizlemek için CSS kullanabiliriz, belgenin “odak yok” sınıfı vardır.

.u-no-focus-outline *:focus {
outline: none;
}

Tabii ki, odak halkasını çıkarmak istemeyebilirsiniz. her öğe türünü seçebilir ve belirli öğeleri tercihinize göre biçimlendirebilirsiniz.

Erişilebilirliği iyileştirme

Meslektaşım, sınıfın JS ile eklenmesi için kodu biraz değiştirdi. Bu şekilde, odak stilleri bozulmadan kalacağından, JS yüklenemezse web sitesine hala erişilebilir olacaktır. Ek olarak, birkaç küçük değişiklik yaptım: Kullanımdan kaldırılmış event.which mülk event.codeve sınıfın eklenmesi <body> belge kökü yerine etiket (ki bu yalnızca kişisel bir tercihtir):

document.body.classList.add('u-no-focus-outline')

document.addEventListener('keyup', function (event) {
if (event.code === 9) {
document.body.classList.remove('u-no-focus-outline')
document.body.classList.add('u-focus-outline')
}
})

Bu çözüm basit, zarif görünüyor ve erişilebilirliği korurken müşterinin isteklerini karşılıyor. Neredeyse sinirlendim, hiç düşünmedim! Herkesin markaya uygun iyi bir deneyim yaşaması için odak durumlarınız için özel CSS stiliyle birleştirilebilir. Dikkate almadığım başka sorunlar olabilir, bu nedenle bu yöntemle herhangi bir tuzakla karşılaşırsanız, bunları duymayı çok isterim. Aksi takdirde, üretimde kullanmamak için hiçbir neden göremiyorum.

Orijinal blog gönderisini buradan okuyun.

ile gelecek stil :focus-visible

bu :focus-visible CSS sözde sınıfı aslında, tam da bu sorunu çözmek için tasarlanmıştır. Yalnızca klavyeyle odaklanan öğeleri hedeflemek için kullanabiliriz. Ne yazık ki, tarayıcı desteği şu anda çok fakir. Eric’in makalesinin işaret ettiği gibi, bir çoklu dolguancak bir çoklu dolgunun eklediği ekstra geliştirme yükü yerine kişisel olarak yukarıdaki çözümü tercih ederim.

Son olarak, odak stillerinin bir tasarımcı veya müşteri tarafından, hatta fare kullanıcıları için bile düşünülmemiş olabilecek birçok yönden çok yararlı olabileceğini ve bunları kaldırmanın yine de en iyi fikir olmayabileceğini belirtmek isterim. Makaleden:

Dikkate alınması gereken bir diğer nokta, fare kullanıcıları için odak stillerinin istenebileceğidir. Bunların varlığı, az görme sorunu olan, bilişsel kaygıları olan ve teknolojik açıdan daha az becerikli olan kişiler için büyük bir kolaylık olan etkileşimin açık ve net bir göstergesidir.

Şahsen, form girişlerinde net odak stillerine sahip olmayı inanılmaz derecede faydalı buluyorum, bu da şu anda hangi alanı doldurduğunuzu çok açık hale getiriyor. Bu nedenle, bu odak ana hatlarını kaldırmadan önce iki kez düşünün – tarayıcı bunları bir nedenden dolayı ekler!

Kaynaklar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.