2.4.11 Odak Gizlenmemeli (Asgari)

Bir öğe klavye odağı aldığında, yazar tarafından oluşturulan başka içerikler tarafından tamamen gizlenmemelidir.

SC Kodu: 2.4.11 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#focus-not-obscured-minimum

Genel Tanım

WCAG SC 2.4.11, bir kullanıcı arayüzü bileşeni klavye odağı aldığında, tamamen gizlenmemesini veya yazar tarafından oluşturulan içerik tarafından odaklanıldığında kısmen görünür olmamasını sağlar. Bu kriter, özellikle açılır pencereler, sabit başlıklar ve diğer kullanıcı arayüzü öğelerinin odaklanmış bileşenleri gizleyebildiği dinamik web ortamlarında erişilebilirliği korumak için çok önemlidir.

Faydalar

• Geliştirilmiş Görünürlük: Odaklanıldığında tüm etkileşimli öğelerin görünür olmasını sağlayarak kullanıcıların gezinmesini ve etkileşimde bulunmasını kolaylaştırır.
• Geliştirilmiş Kullanılabilirlik: Görüntünün gizlenmesi nedeniyle odak kaybını önleyerek kullanıcı memnuniyetsizliğini azaltır.

Ana Amaç

Klavye odağını alan herhangi bir öğenin, dinamik içerik veya yazar tarafından oluşturulan öğeler mevcut olsa bile, kullanıcı tarafından en azından kısmen görünür kalmasını sağlamak.

2.4.11.d En İyi Uygulamalar

• Odaklanılan öğelerin görünürlüğünü sağlayın: Klavye odağı aldıklarında tüm öğelerin görünür olduğundan emin olun.
• Odaklanılan içeriği gizlemekten kaçının: Sabit başlıkları, altbilgileri veya diğer öğeleri, odaklanılan içeriği gizleyebilecek şekilde yerleştirmekten kaçının.
• Sabit öğelerle kaydırma boşluğu kullanın: Sabit başlıklar veya altbilgiler yerleştirirken, odaklanmış öğelerin görünürlüğünü korumak için kaydırma boşluğu gibi CSS özelliklerini kullanın. Bu, odak 'gizlenmiş öğeye' geldiğinde, öğe ile sabit blok arasında görsel boşluk oluşturmak için bir kaydırma boşluğu olmasını sağlayacaktır.
• Gerekirse kısmi odak göstergeleri sağlayın: Tam görünürlük mümkün değilse kısmi odak göstergeleri sağlayın.
• Kalıcı içerik için odak yakalama yöntemini kullanın: Açılır pencereler, diyalog kutuları ve reklam banner'ları gibi kalıcı içeriklerde gezinmeyi yakalamak için 'Odak yakalama' yöntemini kullanın. Bu, açılır pencere web sitesindeki diğer öğeleri gizlese bile, klavye kullanıcıları açılır pencereden çıkana kadar odağın bu öğelere ulaşmamasını sağlar. Yakalanan açılır pencereye bir çıkış mekanizması eklediğinizden emin olun.
• Kalıcı olmayan içeriğin kaybolmasını sağlayın: Kalıcı olmayan içerik için, klavye etkileşimi tamamlandıktan sonra gizleyici blokların kaybolmasını sağlayın. Eğer kaybolmuyorsa, bu mekanizmayı eklediğinizden emin olun.
• Odaklanılabilir öğeleri sürüklenebilir öğelerle gizlemekten kaçının: Sürüklenebilir öğeler veya nesneler için, öğelerin yazar tarafından sağlanan başlangıç ​​konumlarında herhangi bir odaklanılabilir öğeyi gizlemediğinden emin olun. Kullanıcı nesneleri hareket ettirdikten sonra, bu artık yazarın sorumluluğunda değildir.

Örnekler ve Açıklamalar

Örnek: Örnek Uygulama

Sabit Alt Bilgi ile Odak Yönetimi

Nelerden Kaçınılmalı?

Sayfanın görüntüleme alanının alt kısmında sabit bir altbilgi (footer) bulunmaktadır. Sayfada sekme tuşuyla gezinirken, odaklanılan öğe etkileşimli öğeye ulaşır; ancak bu öğe sabit altbilgi tarafından gizlenir ve kullanıcı tarafından görünmez hale gelir.

Açıklama: Odaklanılan etkileşimli bir öğe sabit altbilgi tarafından gizlenirse, kullanıcılar onu göremez veya onunla etkileşim kuramaz; bu da kafa karışıklığına ve erişilebilirlik sorunlarına yol açar.

Ne Yapılmalı?

Sayfanın görüntüleme alanının altında sabit bir altbilgisi vardır. Sayfada sekme tuşuyla gezinirken, odaklanılan öğenin her zaman görünür olmasını sağlamak için içerik yukarı kaydırılır. CSS'de scroll-padding özelliğini kullanarak, sayfa odaklanılan öğenin görünür kalmasını sağlamak için kaydırma konumunu otomatik olarak ayarlayacak şekilde tasarlanabilir. Bu, kullanıcıların hangi öğenin odaklandığını görmelerini ve buna göre etkileşim kurmalarını sağlar.

Açıklama: Bu doğru uygulamada, içerik klavye odağına sahip öğeyi görüntülemek için yukarı kaydırıldığı için odak gizlenmez. CSS scroll-padding kullanımı, odaklanmış öğenin görünür kalmasını sağlayarak tüm kullanıcılar için erişilebilirliği artırır.