Daraltılmış içeriği private=until-found ile erişilebilir hale getirme

Joey Arhar

Bazen akordeon olarak tanımlanan daraltılabilir içerik bölümleri, yaygın bir kullanıcı arayüzü kalıbıdır. Ancak, daraltılmış bölümlerde gizlenmiş içeriklerde, sayfada bul araması yöntemi kullanılarak arama yapılması imkansız hale gelir. Ayrıca, daraltılmış bölgelerdeki metin parçalarına bağlantı vermek mümkün değildir.

hidden=until-found HTML özelliği ve beforematch etkinliği bu sorunları çözebilir. Gizli içeriğinizin kapsayıcısına hidden=until-found ekleyerek tarayıcının bu gizli bölgede metin aramasını ve eşleşme bulunursa bölümü göstermesini sağlarsınız.

Bu özellikler Chrome 102'den itibaren kullanılabilir. Şimdi bunların nasıl çalıştığına bakalım.

Kullanım şekli

Web sitenizde, arama yapılabilir hale getirmek istediğiniz daraltılabilir bölümler varsa bölümü gizli yapan stilleri hidden=until-found özelliğiyle değiştirin. Sayfanız, bölümünüzün açılıp açılmamasıyla senkronize edilmesi gereken başka bir duruma daha sahipse öğe tarayıcı tarafından gösterilmeden hemen önce hidden=until-found öğesinde tetiklenecek bir beforematch etkinlik işleyicisi ekleyin.

Uyarılar

Tutarlı bir kullanıcı deneyimi için hidden=until-found içeriği, sayfada bul özelliği kullanılmadan görülebilmelidir. Tüm kullanıcılar sayfada bul özelliğini kullanmaz ve hidden=until-found özelliğini desteklemeyen tarayıcılar, sayfada bul özelliği gösterilmeden gizli içeriğin orijinal deneyimini yaşar.

Gizli içeriğinizin hidden=until-found'yi desteklemeyen tarayıcılarda aranabilir olduğundan emin olmak istiyorsanız bu tarayıcılarda gizli içeriği istediğiniz zaman genişletebilirsiniz. Özellik algılama, beforematch etkinlik işleyicinin olup olmadığı kontrol edilerek yapılabilir:

if (!(‘onbeforematch' in document.body)) {
  // expand all hidden content
}

hidden=until-found, normal gizli özelliğin uyguladığı display:none mülkü yerine content-visibility:hidden CSS mülkünü uygular. Bu, kapalıyken içeriği aramak için gereklidir ancak aşağıdaki yan etkilere de sahiptir:

• getBoundingClientRect gibi bazı sayfa düzeni API'leri, hidden=until-found öğesindeki gizli içeriğin yer kapladığını ve sayfa içinde bir konuma sahip olduğunu bildirir.
• hidden=until-found öğesinin alt düğümleri oluşturulmaz ancak hidden=until-found öğesinin kendisinde bir kutu bulunur. Bu, çerçeve ve açık boyut gibi CSS özelliklerinin oluşturmayı etkilemeye devam edeceği anlamına gelir.

Buna örnek olarak aşağıdaki demoda hidden=until-found uygulanmış öğeye kenar boşluğu, kenarlık ve dolgu eklenir. Gizli içeriğin gösterileceği yerde gri kenarlıklı bir kutu bulunur. Gizli içerik gösterildiğinde bu kutu doldurulur. Bu, gizli öğenin kutusudur.

Bu sorunu önlemek için kenarlığı, kapsayıcının içine yerleştirilmiş ve hidden=until-found içeren bir öğeye ekleyin.