Ana içeriğe geç

3.2.1 Odaklandığında

Bir bileşenin klavye odağı alması; sayfa yönlendirmesi veya içerik güncellemesi gibi beklenmedik bağlam değişikliklerine neden olmamalıdır.

SC Kodu: 3.2.1 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#on-focus

Genel Tanım​

WCAG SC 3.2.1, herhangi bir bileşen odaklandığında bağlam değişikliği başlatmamasını veya tetiklememesini gerektirir. Bu kriter, kullanıcıların yalnızca bir öğeye odaklanarak istenmeyen eylemlerle karşılaşmamasını sağlar; örneğin, bir modal pencere açılması veya yeni bir sayfaya geçilmesi gibi. Bu, özellikle klavye navigasyonuna veya yardımcı teknolojilere güvenen kullanıcılar için önemlidir.

Faydalar​

  • Geliştirilmiş Kullanıcı Kontrolü: Kullanıcılar, beklenmedik bağlam değişiklikleri olmadan web sayfalarında gezinebilir ve etkileşimleri üzerindeki kontrolü koruyabilirler.
  • Yönelim Kaybının Azaltılması: Kullanıcılar, özellikle engelli olanlar, bağlamdaki ani değişikliklerden dolayı yönelimlerini kaybetmezler.

Ana Amaç​

Bir öğeye odaklanıldığında bağlamda herhangi bir değişikliğin tetiklenmemesini sağlamak. Bağlamdaki değişiklikler, kullanıcı aracısı, görüntü alanı, odak ve web sayfasının anlamını değiştiren içerik gibi önemli değişiklikleri içerir. Bu değişiklikler, özellikle odak kullanıcının onayı olmadan farklı bir öğeye kayarsa veya sayfanın önemli bir içeriği değişirse, kullanıcıları şaşırtabilir.

Örneğin, bir kullanıcı sekme tuşunu kullanarak bir gezinme menüsünde gezinir ve hemen bir açılır menü açan bir öğeye odaklanırsa, kullanıcının tüm açılır menüyü sekme tuşuyla gezmesi gerekmediği sürece bu bir bağlam değişikliği olarak kabul edilmez. Kullanıcı kasıtlı olarak odağı açılır menüye kaydırmadığı sürece, gezinme başlangıçta amaçlandığı gibi devam etmelidir.

Bu başarı kriterinin başarısızlığı, özellikle mevcut sayfa bağlamında veya kullanıcının odağında beklenmedik değişiklikleri içerir. Örnekler arasında, kullanıcı etkinleştirmesi olmadan 'gönder' düğmesine odaklanıldığında anında form gönderimi veya kullanıcının etkinleştirmeyi amaçlamadığı durumlarda odağın hemen iletişim kutusuna geçtiği, odaklanıldığında iletişim kutusu açan öğeler yer alır.

İyi Uygulamalar​

  • Otomatik Eylemleri Engelle: Sayfanın içeriğini değiştiren veya odağı geçerli öğeden uzaklaştıran olayların yalnızca kullanıcı etkinleştirmesi üzerine gerçekleşmesini sağlayın, odaklanma üzerine değil.
  • Sabit Odak: Kullanıcının tercihi olmadan odak başka bir öğeye kaymamalıdır. Bu durum, yardımcı teknolojileri kullanan kullanıcılar için kafa karışıklığına neden olabilir.
  • Web sitenizi test edin: Yukarıda belirtilen hatalardan hiçbirinin oluşmadığından emin olmak için sayfanın tamamında gezinmek üzere Tab ve Shift-Tab tuşlarını kullanın.
  • Otomatik Form Gönderimini Önleyin: Formların yalnızca kullanıcı etkinleştirmesiyle gönderilmesini sağlayın, gönder düğmelerine odaklanılarak gönderilmesini önleyin.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

İngilizce Bağlamda Fransızca İfadeler

Nelerden Kaçınılmalı?

Kullanıcı sekme tuşunu kullanarak bir düğmeye odaklandığında sayfa yeni bir pencerede açılır.

HTML/CSS

<button onfocus = "window.open('newpage.html')" > Bana Tıklayın </button>

Açıklama: Bu davranış, özellikle yardımcı teknolojiler kullanan kullanıcıları, bağlamı beklenmedik bir şekilde değiştirerek şaşırtmaktadır.

Ne Yapılmalı?

Sayfa, yalnızca kullanıcı düğmeye tıklayarak veya 'Boşluk' tuşunu kullanarak açıkça etkinleştirdiğinde yeni bir pencerede açılır.

HTML/CSS

<button onclick = "window.open('newpage.html')" > Bana Tıklayın </button>

Açıklama: Eylemi yalnızca tıklama veya boşluk tuşu aktivasyonuyla tetikleyerek, kullanıcılar gezinmelerinin kontrolünü ellerinde tutarlar. Bu yaklaşım, açık kullanıcı eylemi olmadan hiçbir bağlam değişikliğinin gerçekleşmemesini sağlayarak öngörülebilir bir gezinme deneyimi sunar.