Üzerine Gelince veya Odaklanınca Çıkan İçerik

Kısaca

Bir öğenin üzerine gelince ya da odaklanınca beliren ipuçları, açılır menüler ve açılır pencereler kullanışlıdır, ama aynı zamanda tuzak da olabilir. Büyüteç kullanan biri işaretçiyi oynatıp ipucunu okuyamadan kaybedebilir ya da ipucu tam da ihtiyaç duyulan içeriği örtebilir.

Bu kriter, işaretçi üzerine gelince ya da klavye odağıyla ek içerik belirip yeniden kaybolduğunda, bu içeriğin kapatılabilir (üzerine gelmeyi ya da odağı taşımadan), üzerine gelinebilir (işaretçi kaybolmadan içeriğin üzerine taşınabilir) ve kalıcı (kullanıcı tetikleyiciyi kaldırana, içeriği kapatana ya da bilgi geçerliliğini yitirene kadar kalır) olmasını ister.

Neleri kapsar?

• Kapatılabilir: Bir mekanizma, genellikle Escape tuşu, işaretçi üzerine gelmeyi ya da klavye odağını taşımadan içeriği kapatır. İstisna: içerik yalnızca bir girdi hatasını gösteriyor ya da başka içeriği gizlemiyor ve yerini almıyor.
• Üzerine gelinebilir: Tetikleyici üzerine gelmekse işaretçi, yeni içeriğin üzerine kaybolmadan taşınabilir.
• Kalıcı: Kullanıcı üzerine gelmeyi ya da odağı uzaklaştırana, içeriği kapatana ya da bilgi geçerliliğini yitirene kadar görünür kalır.
• Neler sayılır: Özel ipuçları, açılır pencereler, üzerine gelince açılan menüler ve yalnızca üzerine gelince ya da odaklanınca gösterilen her içerik.
• İstisnalar: Yazarın sunumunu değiştirmediği, tarayıcı tarafından denetlenen içerik; örneğin yerel title ipucu.
• Kapsam dışı notlar: İçeriğe klavyeyle ulaşılması 2.1.1, odak sırası 2.4.3'tür. Odaklanınca beliren bir ipucu bağlam değişikliğine de yol açmamalıdır (3.2.1).

Kimleri etkiler?

Ekranın yalnızca bir bölümünü gören ekran büyüteci kullanıcıları. İşaretçiyi sabit tutamayan titremesi ya da düşük el becerisi olan kişiler. Klavye kullanıcıları. Okumak için daha fazla zamana ihtiyaç duyan bilişsel farklılıkları olan kişiler.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Öngörülebilir ve denetlenebilir açılır içerik, "algılanabilirlik" ve "işletilebilirlik" ilkelerinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.4.13'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 1.4.13 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır. AA düzeyinde bir kriterdir.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. Kapatılabilir bir ipucu

Tetikleyici odakta kalsa bile ipucunu Escape ile kapatın.

<button onmouseover="goster()" onmouseout="gizle()">Bilgi</button>

<button aria-describedby="ipucu">Bilgi</button>
<div id="ipucu" role="tooltip" hidden>Ek ayrıntı</div>

<script>
const b = document.querySelector("button");
const t = document.getElementById("ipucu");
b.addEventListener("focus", () => t.hidden = false);
b.addEventListener("blur",  () => t.hidden = true);
b.addEventListener("keydown", e => { if (e.key === "Escape") t.hidden = true; });
</script>

2. İşaretçi yolunu açık tutun

Tetikleyici ile açılır pencere arasındaki boşluk, işaretçi onu geçerken pencerenin kaybolmasına yol açar. Bitişik tutun ya da ikisini de aynı üzerine gelme alanı sayın.

.sar:hover .pop { display: block; }
.pop { margin-top: 20px; } /* işaretçi boşluğu geçerken .sar'dan çıkar */

.sar:hover .pop, .sar:focus-within .pop { display: block; }
.pop { margin-top: 0; padding-top: 8px; } /* geçilecek boşluk yok */

3. Zamanlayıcıyla gizlemeyin

Birkaç saniye sonra kaybolan bir ipucu kalıcı değildir.

setTimeout(() => ipucu.hidden = true, 3000);

// Yalnızca odak kaybında, tetikleyiciden ve ipucundan çıkılınca ya da Escape ile gizleyin

4. Üzerine gelinebilir pencere açık kalır

İşaretçiden çıkma mantığının hem tetikleyiciyi hem açılır pencereyi kapsamasını sağlayın.

tetikleyici.addEventListener("mouseleave", () => pop.hidden = true);

function gizleyebilir(e) {
  if (!tetikleyici.contains(e.relatedTarget) && !pop.contains(e.relatedTarget)) {
    pop.hidden = true;
  }
}
tetikleyici.addEventListener("mouseleave", gizleyebilir);
pop.addEventListener("mouseleave", gizleyebilir);

5. Yalnızca üzerine gelince açılan menüler

Yalnızca üzerine gelince açılan bir menüye klavyeyle de ulaşılamaz. Odakta ve tıklamada da açın.

.gezinme li:hover > ul { display: block; }

.gezinme li:hover > ul,
.gezinme li:focus-within > ul { display: block; }

6. Başka içeriği örtmeyin

Açıkken kullanıcının ihtiyaç duyduğunu gizleyen bir pencere kapatılabilir olmalı ve tetikleyiciyi örtmemelidir.

.ipucu { position: absolute; top: 0; left: 0; /* tetikleyiciyi örter */ }

.ipucu { position: absolute; top: 100%; left: 0; }

Mobil için kod örnekleri

Yerel uygulamalarda üzerine gelme yoktur, ama kural klavye, anahtar ya da harici işaretçideki odak için geçerlidir. Kapatmanın bir yolunu sunun ve kullanıcı harekete geçene kadar açılır pencereleri açık tutun.

iOS (SwiftUI)

import SwiftUI

struct BilgiDugmesi: View {
    @State private var bilgiGoster = false

    var body: some View {
        Button("Bilgi") { bilgiGoster.toggle() }
            // Açılır pencere kullanıcı kapatana kadar kalır (dışarı dokunma ya da klavyede Escape)
            .popover(isPresented: $bilgiGoster) {
                Text("Ek ayrıntı")
                    .padding()
                    .presentationCompactAdaptation(.popover)
            }
            // Kaçının: bir zamanlayıcıdan sonra kendiliğinden kapatmak
    }
}

Android (Jetpack Compose)

import androidx.compose.material3.*
import androidx.compose.runtime.*

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BilgiDugmesi() {
    val ipucuDurumu = rememberTooltipState(isPersistent = true) // kapatılana kadar kalır
    TooltipBox(
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = { PlainTooltip { Text("Ek ayrıntı") } },
        state = ipucuDurumu
    ) {
        IconButton(onClick = { /* eylem */ }) {
            Icon(androidx.compose.material.icons.Icons.Filled.Info, contentDescription = "Bilgi")
        }
    }
}

Nasıl test edilir?

• Her tetikleyicinin üzerine gelin: İşaretçiyi yavaşça tetikleyiciye, sonra yeni içeriğe taşıyın. İşaretçi üzerindeyken içerik açık kalıyor mu?
• Escape'e basın: İçerik açıkken Escape'e basın. Odağı taşımadan kapanıyor mu?
• Bekleyin: İçeriği hareket etmeden açık bırakın. Siz kapatana ya da uzaklaşana kadar kalıyor mu?
• Klavyeyi kullanın: Tetikleyiciye Tab ile gidin. Aynı içerik odakta da beliriyor mu ve kapatabiliyor musunuz?
• Büyüteçle test edin: Yüksek yakınlaştırmada, kaybolmadan önce açılır pencereye geçip onu okuyabiliyor musunuz?
• Örtülen içeriği kontrol edin: Yeni içerik, kullanıcının hâlâ ihtiyaç duyduğu bir şeyi gizliyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar kapatmayı, üzerine gelmeyi ve kalıcılığı test edemez. Bir kişi her deseni denemelidir.

Sık yapılan hatalar

• İşaretçi ona doğru hareket edince kaybolan ipuçları: Üzerine gelinebilir değildir.
• Escape ile kapatma yolu olmaması: Kapatılabilir gereksinimini karşılamaz.
• Otomatik gizleme zamanlayıcıları: Kalıcı gereksinimini karşılamaz.
• Tetikleyici ile açılır pencere arasındaki boşluklar: İşaretçi boşluğu geçerken pencere kaybolur.
• Yalnızca üzerine gelince açılan menüler: Klavye kullanıcıları onları açamaz.
• Tetikleyiciyi ya da yakındaki metni örten pencereler: Kullanıcılar baktıkları şeyi okuyamaz.
• Odak kaybında çok erken kapatmak: Odağı pencerenin içine taşımak onu kapatır.
• Yerel title ipuçlarını özel sanmak: Yerel tarayıcı ipuçları istisnadır, ama erişilebilirlikleri de zayıftır.

Kaynaklar

• Understanding SC 1.4.13: Content on Hover or Focus (W3C), İngilizce, yeni sekmede açılır
• F95: Failure of SC 1.4.13 due to content shown on hover not being hoverable (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.