Gizli içerikte arama yapma

Web arayüzleri; kullanıcı deneyimini iyileştirmek, ekranda yer kazanmak veya sayfa performansını artırmak için genellikle içerikleri gizler. display: none veya visibility: hidden gibi geleneksel yöntemler, içeriği görsel olarak gizler ancak aynı zamanda ekran okuyucular ve "Sayfada bul" gibi tarayıcı özellikleri için içeriği tamamen erişilemez hale getirir.

İçeriği görsel olarak gizlemek ancak kullanıcılar tarafından aranabilir olmasını sağlamak ve URL parçaları ile "Metin Parçasına Kaydır" bağlantıları aracılığıyla derin bağlantı oluşturulmasına izin vermek için HTML <details> öğesini veya hidden="until-found" özelliğini kullanabilirsiniz. Uygulaması ve bakımı daha kolay olduğu için genellikle <details> öğesi önerilir ancak <details> öğesinin yeterli olmadığı ve hidden="until-found" öğesinin gerekli olduğu daha karmaşık durumlar da vardır.

Örneğin:

• Göster/gizle mekanizmasının stili üzerinde tam kontrol sahibi olmak istiyorsanız.
• İçeriği göstermek/gizlemek için kullanılan kullanıcı arayüzü kontrolleri DOM'un başka bir bölümündeyse.
• İçeriğin gösterildikten sonra gizlenmesini desteklemek istemiyorsanız.

Nasıl uygulanır?

<details> öğesi varsayılan olarak aranabilir ve erişilebilir metne sahiptir. Özel bir uygulama gerekmez. Mümkünse hidden="until-found" yerine <details> kullanmayı tercih edin.

Bunun yerine hidden="until-found" kullanmanız gerekiyorsa aşağıdaki talimatları uygulayın:

1. Özelliği uygulayın: hidden="until-found" HTML özelliğini doğrudan, görünümden gizlenmesi gereken içeriği barındıran öğelere ekleyin.
2. Kullanıcı arayüzü durumunu senkronize etme: Arayüzde, içeriğin görünürlüğüne bağlı ilgili durumlar varsa (ör. ARIA özelliklerini güncelleme, CSS sınıflarını açma/kapatma veya akordeon simgelerini döndürme):
   • beforematch etkinliği için bir etkinlik işleyici EKLEMENİZ GEREKİR.
   • beforematch etkinlik işleyicisini doğrudan hidden="until-found" özelliğini taşıyan öğeye kaydedin. Etkinlik kabarcıkları olduğundan, birden fazla gizli bölümü aynı anda yönetmek için üst öğeye (ör. sekme kapsayıcısı) tek bir dinleyici kaydederek etkinlik yetkilendirmesini de kullanabilirsiniz.
   • Etkinlik işleyicide, ilgili kullanıcı arayüzü öğelerini senkronize etmek için mantığı uygulayın (ör. diğer açık sekmeleri kapatma veya açma/kapatma düğmesinin durumunu değiştirme).

Örnek kod

Hedef: Kullanıcı, ilgili bölümdeki bir kelimeyi arayana kadar içeriğin görünmez kaldığı gizli bir kapsayıcı oluşturun.

<details> öğesini kullanma

<details>
  <summary>Click to expand</summary>
  <p>This content is visually hidden.</p>
</details>

Karşılıklı dışlamalı açıklamalar

Özel akordiyon gibi birbirini dışlayan içerik bölgelerini işlerken paylaşılan name özelliğine sahip yerel HTML <details> öğesini kullanın.

<div class="accordion-group">
  <!-- The name attribute creates an exclusive disclosure group -->
  <details class="disclosure" name="my-accordion">
    <summary>Section 1</summary>
    <p>Section 1 content</p>
  </details>

  <details class="disclosure" name="my-accordion" open>
    <summary>Section 2</summary>
    <p>Section 2 content</p>
  </details>

  <details class="disclosure" name="my-accordion">
    <summary>Section 3</summary>
    <p>Section 3 content</p>
  </details>
</div>

hidden="until-found" özelliği kullanılıyor

<!-- The browser automatically removes hidden="until-found" upon a search match -->
<div class="hidden-container" hidden="until-found">
  <p>This content is visually hidden.</p>
</div>

Özel karşılıklı dışlamalı açıklamalar

Harici düğmelerle kontrol edilen özel birbirini dışlayan bölgeleri işlerken yalnızca eşleşen panelin görünür kaldığından emin olun. beforematch etkinlik işleyicisinde, kontrol düğmesinde aria-expanded="true" ayarı gibi ilgili ARIA durumlarını senkronize etmeniz GEREKİR.

<div class="custom-accordion">
  <div class="controls">
    <button aria-expanded="true" aria-controls="panel-1" id="btn-1">Section 1</button>
    <button aria-expanded="false" aria-controls="panel-2" id="btn-2">Section 2</button>
  </div>

  <div id="panel-1" class="panel">
    <p>Section 1 content (visible)</p>
  </div>

  <div id="panel-2" class="panel" hidden="until-found">
    <p>Section 2 content (hidden)</p>
  </div>
</div>

const accordion = document.querySelector('.custom-accordion');

accordion.addEventListener('beforematch', (e) => {
  // Hide all panels and synchronize button states before the browser reveals the matched panel
  accordion.querySelectorAll('.panel').forEach((panel) => {
    if (panel !== e.target) {
      panel.hidden = 'until-found';
    }
  });
  accordion.querySelectorAll('button').forEach((btn) => {
    const controls = btn.getAttribute('aria-controls');
    btn.setAttribute('aria-expanded', controls === e.target.id ? 'true' : 'false');
  });
});

En iyi hidden="until-found" uygulamaları

• DO Kenarlık, dolgu ve arka planları doğrudan hidden="until-found" özelliğine sahip öğeye değil, iç içe yerleştirilmiş alt sarmalayıcılara uygulayın. Bu sayede, öğe gizliyken istenmeyen düzen kaymaları veya görsel kalıntılar önlenir.
• display: none, visibility: hidden veya ilişkili display ya da visibility CSS özelliklerini hidden="until-found" özelliğine sahip öğelere doğrudan UYGULAMAYIN. Bu, yerel işlevselliği bozar ve içeriği arama dizininden kalıcı olarak gizler.
• Hassas bilgiler, dahili veri jetonları veya arama yoluyla gösterilmemesi gereken alakasız veriler için hidden="until-found" KULLANMAYIN.
• hidden="until-found" özelliğini "yalnızca ekran okuyucu" (.sr-only) metni yerine KULLANMAYIN.

Tarayıcı desteği ve yedek stratejiler

Erişilebilirlik avantajları, yedek uygulamanın maliyetinden çok daha fazla olduğu için tarayıcı desteğinin olmaması nedeniyle hidden="until-found" öğesinden KAÇINMAYIN.

hidden="until-found" yedek

Akordiyonlar veya "Daha fazla bilgi" bölümleri gibi standart kullanıcı arayüzü öğeleri için JavaScript kullanarak özellik algılama yapın ve özellik desteklenmiyorsa tüm içeriği gösterin.

if (!('onbeforematch' in HTMLElement.prototype)) {
  // Expand all hidden content for unsupported browsers
  document.querySelectorAll('[hidden="until-found"]').forEach((el) => {
    el.removeAttribute('hidden');
    // MANDATORY: also update any aria references to this element.
  });
}

Birbirini dışlayan kullanıcı arayüzü paradigmalarında (ör. içeriğin aynı görsel bölgeyi paylaştığı özel özel paneller), yedek, tüm içeriği ana etkileşimli alanın altında doğrusal olarak çıkarıp göstermelidir. Kullanıcıların doğrudan ilgili bölümlere gitmesine olanak tanımak için URL bağlantı parçaları kullanılmalıdır.