İpucu ve açılır içerik: ADA rehberi

Açılır içerik için üç kural

İşaretçinin üzerine gelmesi ya da klavye odağı ek içeriğin belirmesine ve sonra kaybolmasına yol açtığında üç şey doğru olmalıdır. İçerik, işaretçi ya da odak hareket etmeden kapatılabilir, işaretçinin kaybolmadan üzerine taşınabileceği şekilde üzerine gelinebilir ve tetikleyici kaldırılana, kullanıcı kapatana ya da bilgisi geçerliliğini yitirene kadar görünür kalan kalıcı olmalıdır.

Bilinmesi gereken iki istisna var. title gibi bir öznitelikten tarayıcının çizdiği içerik, yeniden biçimlendirmediğiniz sürece sizin değil tarayıcının işidir. Kapatılabilirlik kuralı da içerik bir girdi hatasını bildiriyorsa ya da başka içeriği örtmüyor ve yerine geçmiyorsa uygulanmaz.

Ekran büyüteci kullanan birini düşünün. Yüzde 400'de bir ipucu kısmen ekran dışında kalabilir; okumak için işaretçiyi üzerine taşıması gerekir. İşaretçi simgeden ayrılır ayrılmaz kayboluyorsa asla okunamaz.

Kamu sitelerinin üzerine gelince içerik kullandığı yerler

Kamu sitelerinde üzerine gelince açılan içerik genellikle ücret alanlarının yanındaki yardım simgeleri, kütüphane kataloğu önizleme kartları, harita iğnesi ayrıntıları ve gezinme açılır menüleridir. Her biri, klavyeyle erişilemediğinde, bir sonraki alanın etiketini örttüğünde ya da büyüteç kullanan kişi okuyamadan kaybolduğunda engele dönüşen küçük bir kolaylıktır.

Çözüm nadiren karmaşıktır. Hataların çoğu, açılır pencereyi yalnızca CSS :hover ile kurup odağı, Escape'i ya da tetikleyici ile içerik arasındaki boşluğu hiç düşünmemekten gelir.

Odağı ve Escape'i kaçıran yalnızca CSS ipuçları

data- özniteliğinden üretilen bir sözde öğe ipucu yalnızca üzerine gelince görünür, klavyeyle erişilemez ve kapatma yolu yoktur.

<span class="ipucu" data-ipucu="Harç dosyalama sırasında ödenir">?</span>

.ipucu:hover::after { content: attr(data-ipucu); position: absolute; }

<button type="button" class="ipucu" aria-describedby="harc-ipucu">?
  <span class="visually-hidden">Dosyalama harcı yardımı</span></button>
<div id="harc-ipucu" role="tooltip" hidden>Harç dosyalama sırasında ödenir.</div>

<script>
  const dugme = document.querySelector(".ipucu");
  const ipucu = document.getElementById("harc-ipucu");
  let zamanlayici;
  const goster = () => { clearTimeout(zamanlayici); ipucu.hidden = false; };
  const gizle = () => ipucu.hidden = true;
  const kisaSonraGizle = () => { zamanlayici = setTimeout(gizle, 200); };
  dugme.addEventListener("focus", goster);
  dugme.addEventListener("blur", gizle);
  dugme.addEventListener("mouseenter", goster);
  dugme.addEventListener("mouseleave", kisaSonraGizle);
  ipucu.addEventListener("mouseenter", goster);
  ipucu.addEventListener("mouseleave", kisaSonraGizle);
  document.addEventListener("keydown", e => { if (e.key === "Escape") gizle(); });
</script>

Yolda kaybolan önizleme kartları

İşaretçi başlıktan ayrıldığı anda gizlenen bir katalog önizleme kartına ulaşılamaz. Kısa bir bekleme süresi işaretçinin içeri girmesine izin verir ve karta girmek gizlemeyi iptal eder.

baslik.addEventListener("mouseleave", () => kart.hidden = true);

let zamanlayici;
const ac    = () => { clearTimeout(zamanlayici); kart.hidden = false; };
const kapat = () => { zamanlayici = setTimeout(() => kart.hidden = true, 200); };
baslik.addEventListener("mouseenter", ac);
baslik.addEventListener("focus", ac);
baslik.addEventListener("blur", kapat);
baslik.addEventListener("mouseleave", kapat);
kart.addEventListener("mouseenter", ac);
kart.addEventListener("mouseleave", kapat);
document.addEventListener("keydown", e => { if (e.key === "Escape") kart.hidden = true; });

Sonraki alanı örten ipuçları

Odaklanınca beliren ve bir sonraki etiketin üstünde duran bir ipucu, kullanıcının okuması gerekeni gizler ve onu kapatmanın tek yolu alandan ayrılmaktır. İpucunu akışın içinde tutun ki hiçbir şey örtülmesin.

.parsel-ipucu {
  position: absolute;
  top: 100%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
input:focus + .parsel-ipucu { display: block; }

.parsel-ipucu { display: none; margin-top: 0.25rem; }
input:focus + .parsel-ipucu { display: block; }
/* akışın içinde: sonraki alan örtülmez, aşağı kayar */

Yerel uygulamalarda hover

Dokunmatik öncelikli ekranlarda hover yoktur; bu yüzden ölçüt çoğunlukla devreye girmez. Bir uygulamanın fareyle ya da izleme dörtgeniyle kullanıldığı yerlerde, örneğin işaretçili bir tablette, özel bir kaplama yerine platformun kendi ipucu ve yardım bileşenlerini tercih edin ve oluşturduğunuz her kaplamayı kapatılabilir, üzerine gelinebilir ve kalıcı tutun.

Nasıl test edilir

1. Her tetikleyicinin üzerine gelin. İşaretçiyi yeni içeriğin üzerine yavaşça taşıyın. İçerik kalmalıdır.
2. İçerik görünürken Escape'e basın. İşaretçi ya da odak hareket etmeden kapanmalıdır.
3. Tetikleyiciye Tab ile gidin. Aynı içerik belirmeli ve Escape onu kapatmalıdır.
4. Bekleyin. Tetikleyici hâlâ üzerine gelinmiş ya da odaklanmış durumdayken içerik bir zamanlayıcıyla kaybolmamalıdır.
5. Yüzde 400 yakınlaştırmada, bir açılır pencerenin sonra kullanmanız gereken denetimi ya da etiketi örtmediğini kontrol edin.

Sık yapılan hatalar ve yayın öncesi liste

• Yalnızca :hover ile ve odak işlemeden ipucu kurmak.
• İçeriği düşünmeden tetikleyicinin mouseleave olayında gizlemek.
• Birkaç saniye sonra otomatik gizlemek.
• Yerel bir title ipucunu betikle yeniden biçimlendirip istisnayı kaybetmek.
• İşaretçi çapraz kayarsa kapanan açılır menü.

Yayına almadan önce:

• Üzerine gelince ya da odaklanınca açılan her pencere Escape ile kapatılabiliyor.
• İşaretçi, kaybolmadan açılır pencerenin üzerine taşınabiliyor.
• Hover ya da odak bitene ya da kullanıcı kapatana kadar görünür kalıyor.
• Açılır pencereye klavyeyle ulaşılıyor ve ihtiyaç duyulan başka içeriği gizlemiyor.

Klavye erişimi ayrı bir ölçüttür ve hover kuralları onun üzerine biner. Tedarikçilerin kurduğu kaplamalar için tedarikçiler ve üçüncü taraf içerik sayfasına bakın.

Kaynaklar

• Understanding SC 1.4.13: Content on Hover or Focus (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.