Bu kural ne anlama geliyor

WCAG 3.2.1, bir bileşene odaklanmanin bağlam değişikliği tetiklememesini gerektirir. "Bağlam değişikliği" yeni bir sayfaya gitmeyi, yeni bir pencere acmayi, odağı başka bir öğeye tasImayi veya sayfa içeriğini önemli ölçüde değiştirmeyi içerir.

Kullanıcılar beklenmedik seyler olmadan etkileşimli öğeler arasında Tab tuşuyla gezinebilmelidir. Odaklanma pasif bir eylem olmalıdır — arayüzü kesfetme — seçim onaylayan aktif bir eylem değil.

Neden önemlidir

Klavye ve ekran okuyucu kullanıcıları öğeler arasında Tab tuşuyla gezinir. Bir bağlantıya odaklanmak navigasyona neden olursa veya seçim kutusuna odaklanmak sayfayı degistirirse, kullanıcı kontrolü kaybeder. Bu yön bozucu olabilir ve veri kaybina neden olabilir.

İlgili axe-core kuralları

Bu kriter için otomatik axe-core kuralı yoktur. Odaklanmanin bağlam değişikliği tetiklemedigini doğrulamak için etkileşimli öğelerin manuel test edilmesi gerekir.

Nasıl test edilir

Sayfadaki her etkileşimli öğe arasında Tab ile gezinin.
Yalnızca odaklanma ile navigasyon, açılır pencere veya önemli içerik değişikliği olmadığını doğrulayın.
Secim öğeleri, bağlantıları ve özel bileşenleri test edin.

Nasıl düzeltilir

Yanlış uygulama

<!-- Odaklanma ile gezinen select -->
<select onfocus="window.location = this.value">
  <option value="/sayfa1">Sayfa 1</option>
  <option value="/sayfa2">Sayfa 2</option>
</select>

Doğru uygulama

<!-- Git düğmesi ile select -->
<select id="sayfa-sec">
  <option value="/sayfa1">Sayfa 1</option>
  <option value="/sayfa2">Sayfa 2</option>
</select>
<button onclick="window.location = document.getElementById('sayfa-sec').value">
  Git
</button>

Sık yapılan hatalar

Odaklanma ile bağlantıları izleyen gezinme menüleri.
Degisiklikte navigasyon tetikleyen seçim kutuları.
Bir öğe odak aldığında yeni pencere veya iletişim kutusu açma.

3.2.1 Odaklanma Üzerine