Rechercher du contenu masqué

Les interfaces Web masquent souvent du contenu pour améliorer l'expérience utilisateur, économiser de l'espace à l'écran ou améliorer les performances de la page. Les méthodes traditionnelles telles que display: none ou visibility: hidden permettent de masquer visuellement le contenu, mais elles le rendent également totalement inaccessible aux lecteurs d'écran et aux fonctionnalités du navigateur telles que "Rechercher sur la page".

Pour masquer visuellement du contenu tout en permettant aux utilisateurs de le rechercher et d'y accéder via des liens profonds à l'aide de fragments d'URL et de liens "Faire défiler jusqu'au fragment de texte", vous pouvez utiliser l'élément HTML <details> ou l'attribut hidden="until-found". L'élément <details> est généralement recommandé, car il est plus simple à implémenter et à gérer. Toutefois, dans certains cas plus complexes, <details> ne suffit pas et hidden="until-found" est requis.

Exemple :

• Si vous souhaitez contrôler entièrement le style du mécanisme d'affichage/de masquage.
• Si les commandes d'interface utilisateur permettant d'afficher/de masquer le contenu se trouvent dans une autre partie du DOM.
• Si vous ne souhaitez pas masquer le contenu après son affichage.

Mise en œuvre

L'élément <details> comporte par défaut du texte accessible et pouvant faire l'objet d'une recherche. Aucune implémentation spéciale n'est requise. Utilisez de préférence <details> plutôt que hidden="until-found" si possible.

Si vous devez utiliser hidden="until-found", suivez ces instructions :

1. Appliquez l'attribut : ajoutez l'attribut HTML hidden="until-found" directement aux éléments contenant le contenu à masquer.
2. Synchroniser l'état de l'interface utilisateur : si l'interface comporte des états associés qui dépendent de la visibilité du contenu (par exemple, la mise à jour des attributs ARIA, l'activation/la désactivation des classes CSS d'ouverture/de fermeture ou la rotation des icônes d'accordéon) :
   • Vous DEVEZ ajouter un écouteur d'événements pour l'événement beforematch.
   • Enregistrez l'écouteur d'événements beforematch directement sur l'élément contenant l'attribut hidden="until-found". Comme l'événement se propage, vous pouvez également utiliser la délégation d'événements en enregistrant un seul écouteur sur un élément parent (comme un conteneur d'onglets) pour gérer plusieurs sections masquées à la fois.
   • Dans l'écouteur d'événements, exécutez la logique pour synchroniser les éléments d'interface utilisateur associés (par exemple, fermer d'autres onglets ouverts ou modifier l'état d'un bouton d'activation).

Exemple de code

Objectif : afficher un conteneur masqué dont le contenu reste invisible pour l'utilisateur jusqu'à ce qu'il recherche un mot dans cette section.

Utiliser l'élément <details>

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

Mentions publicitaires mutuellement exclusives

Lorsque vous gérez des régions de contenu mutuellement exclusives, comme un accordéon exclusif, utilisez l'élément HTML natif <details> avec un attribut name partagé.

<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>

Utiliser l'attribut hidden="until-found"

<!-- 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>

Divulgations personnalisées mutuellement exclusives

Lorsque vous gérez des régions personnalisées mutuellement exclusives contrôlées par des boutons externes, assurez-vous que seul le panneau correspondant reste visible. Dans le gestionnaire d'événements beforematch, vous DEVEZ synchroniser les états ARIA associés, par exemple en définissant aria-expanded="true" sur le bouton de contrôle.

<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');
  });
});

Bonnes pratiques pour hidden="until-found"

• À FAIRE : Appliquez des bordures, une marge intérieure et des arrière-plans aux wrappers enfants imbriqués plutôt que directement à l'élément avec l'attribut hidden="until-found". Cela évite les décalages de mise en page involontaires ou les résidus visuels lorsque l'élément est masqué.
• N'appliquez PAS display: none, visibility: hidden ou toute propriété CSS display ou visibility associée directement aux éléments avec l'attribut hidden="until-found". Cela interrompt la fonctionnalité native et masque définitivement le contenu de l'index de recherche.
• N'UTILISEZ PAS hidden="until-found" pour des informations sensibles, des jetons de données internes ou des données non pertinentes qui ne doivent pas être exposées via la recherche.
• NE PAS utiliser hidden="until-found" pour remplacer le texte "lecteur d'écran uniquement" (.sr-only).

Compatibilité des navigateurs et stratégies de remplacement

N'ÉVITEZ PAS d'utiliser hidden="until-found" parce que certains navigateurs ne le prennent pas en charge, car ses avantages en termes d'accessibilité l'emportent largement sur le coût de mise en œuvre d'une solution de remplacement.

hidden="until-found" création de remplacement

Pour les éléments d'interface utilisateur standards tels que les accordéons ou les sections "En savoir plus", utilisez JavaScript pour détecter les fonctionnalités et afficher tout le contenu si la fonctionnalité n'est pas compatible.

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.
  });
}

Pour les paradigmes d'interface utilisateur mutuellement exclusifs (comme les panneaux exclusifs personnalisés où le contenu partage la même région visuelle), la solution de secours doit extraire et afficher tout le contenu de manière linéaire sous la zone interactive principale, en utilisant des fragments d'ancrage d'URL pour permettre aux utilisateurs d'accéder directement aux sections respectives.