Bu Kural Ne Anlama Gelir

WCAG 1.4.13, kullanıcı bir işaretçi ile tetikleyici öğenin üzerine geldiğinde veya klavye odağını ona taşıdığında görünür hâle gelen herhangi bir ek içerik için geçerlidir. Yaygın örnekler arasında araç ipuçları, açılır menüler, açılır bilgi kutuları ve özel başlık nitelikleri bulunur. Ölçüt bu tür içerik için üç gereksinim tanımlar:

Kapatılabilir — Kullanıcı, işaretçiyi veya odağı hareket ettirmeden ek içeriği kapatabilir; genellikle Escape tuşuna basarak. Bu, içeriğin kullanıcının okuması gereken diğer sayfa öğelerini gizleyebilmesi nedeniyle önemlidir.
Üzerine gelinebilir — Kullanıcı, işaretçiyi tetikleyiciden ek içeriğe kaybetmeden taşıyabilir. Bu, araç ipucu içeriğini okumak için görüntü alanını hareket ettirmesi gerekebilen büyütme kullanıcıları için kritiktir.
Kalıcı — İçerik, kullanıcı aktif olarak kapatana, hover/odağı uzaklaştırana veya bilgi artık geçerli olmayana kadar görünür kalır. Zamanlayıcıyla kaybolmamalıdır.

Tarayıcının görünümü kontrol ettiği durumlarda (yerel title araç ipuçları) ve ek içeriğin diğer içeriği gizlemeyen bir giriş hatasını ilettiği durumlarda istisnalar mevcuttur.

Neden Önemlidir

Ekran büyütme kullanıcıları, sayfayı tararken sıklıkla hover içeriğini tetikler. Bir araç ipucu görünür ancak büyütülmüş görüntü alanlarını okumak için hareket ettirdiklerinde kaybolursa, içerik erişilemez hâle gelir. "Üzerine gelinebilir" gereksinimi, bu kullanıcıların içeriğe ulaşıp okuyabilmesini sağlar.

"Kapatılabilir" gereksinimi, kullanıcıları okumaya çalıştıkları şeyin görüşünü engelleyen açılır içerikten korur. Escape tuşu desteği olmadan, fareyi hareket ettirmeden kaldırılamayan bir araç ipucu kritik içeriği kapatabilir.

"Kalıcı" gereksinimi, kullanıcı okumayı bitirmeden kaybolan zamanlı araç ipuçlarını önler; bu, yavaş okuyan veya büyütme kullanan kullanıcılar için sorunludur.

İlgili axe-core Kuralları

1.4.13 için otomatik axe-core kuralı yoktur. Üç davranışsal gereksinim (kapatılabilir, üzerine gelinebilir, kalıcı) otomatik araçların gerçekleştiremediği etkileşimli test gerektirir. Bu, manuel test ölçütüdür.

Nasıl Test Edilir

Tüm hover/odak tetiklemeli içeriği tanımlayın: araç ipuçları, açılır bilgi kutuları, açılır menüler, alt menüler, bilgi balonları.
Her biri için, içeriğin görünmesini sağlamak üzere tetikleyicinin üzerine gelin.
Kapatılabilir testi: İçerik görünürken Escape tuşuna basın. İşaretçi hareket ettirilmeden kaybolmalıdır.
Üzerine gelinebilir testi: İşaretçiyi tetikleyici öğeden ek içeriğin üzerine taşıyın. Üzerine gelindiğinde görünür kalmalıdır.
Kalıcı testi: İşaretçiyi tetikleyicide bırakın ve bekleyin. İçerik zamanlayıcıyla kaybolmamalıdır.
Klavye ile test edin: Tetikleyici öğeye Tab ile gidin. Ek içerik görünmelidir. Tab ile uzaklaşın — kaybolmalıdır.
Üzerine gelinebilir içeriğin büyütülmüşken ulaşılabilir olduğunu doğrulamak için ekran büyütme (%200-400) ile test edin.

Nasıl Düzeltilir

Üç gereksinimi de karşılayan araç ipuçları ve açılır bilgi kutuları oluşturun:

<div class="tooltip-wrapper">
  <button
    aria-describedby="tip-1"
    class="tooltip-trigger"
  >
    Daha fazla bilgi
  </button>
  <div
    id="tip-1"
    role="tooltip"
    class="tooltip-content"
  >
    Bu işlem geri alınamaz. Tüm veriler kalıcı olarak silinecektir.
  </div>
</div>

/* Üzerine gelinebilir, kalıcı araç ipucu için CSS */
.tooltip-content {
  display: none;
  position: absolute;
  z-index: 10;
  background: #1a1a2e;
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  max-width: 300px;
  margin-top: -2px;
}

/* Sarmalayıcının hover durumunda göster */
.tooltip-wrapper:hover .tooltip-content,
.tooltip-wrapper:focus-within .tooltip-content {
  display: block;
}

/* Araç ipucunun kendisine gelindiğinde görünür tut */
.tooltip-content:hover {
  display: block;
}

// Escape ile kapatma için JavaScript
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    const visibleTooltips = document.querySelectorAll(
      '.tooltip-content[style*="display: block"], .tooltip-content:hover'
    );
    visibleTooltips.forEach(tip => {
      tip.style.display = 'none';
    });

    const openPopovers = document.querySelectorAll(
      '[data-popover-open="true"]'
    );
    openPopovers.forEach(popover => {
      popover.setAttribute('data-popover-open', 'false');
    });
  }
});

Açılır menüler için, üzerine gelinebilir yolu korumak üzere sarmalayıcı tabanlı hover yaklaşımını kullanın:

/* Alt menü hover kalıbı — tasarım gereği üzerine gelinebilir */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Sarmalayıcı hover, alt menüye geçerken açık tutar */
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  display: block;
}

Sık Yapılan Hatalar

Kullanıcı işaretçiyi tetikleyiciden araç ipucu içeriğine taşıdığında kaybolan araç ipuçları (öğeler arasındaki boşluk).
Escape tuşu işleyicisi yok — araç ipucu, işaretçi veya odak hareket ettirilmeden kapatılamaz.
Kullanıcı etkileşiminden bağımsız olarak 3-5 saniye sonra kaybolan zamanlayıcılı araç ipuçları.
Yalnızca tetikleyici öğedeki :hover kullanılarak oluşturulan ve araç ipucu içeriğini üzerine gelinemez yapan CSS-yalnızca araç ipuçları.
Araç ipuçları olarak uygulanan ancak üç davranışsal gereksinimi karşılamayan özel title nitelikleri.
Klavye ile kapatma yolu olmadan önemli içeriği kapatan açılır bilgi kutuları.

1.4.13 Üzerine Gelme veya Odaklanma İçeriği