Verborgen content zoeken

Webinterfaces verbergen vaak content om de gebruikerservaring te verbeteren, schermruimte te besparen of de paginaprestaties te verbeteren. Traditionele methoden zoals display: none of visibility: hidden verbergen content visueel, maar maken die content ook volledig ontoegankelijk voor schermlezers en browserfuncties zoals Zoeken op pagina.

Als je content visueel wilt verbergen, maar wel wilt dat gebruikers deze kunnen doorzoeken en dat er diepe links naar kunnen worden gemaakt via URL-fragmenten en links van het type Scrollen naar tekstfragment, kun je het HTML-element <details> of het kenmerk hidden="until-found" gebruiken. Het element <details> wordt over het algemeen aanbevolen omdat het makkelijker te implementeren en te onderhouden is, maar er zijn complexere gevallen waarin <details> niet voldoende is en hidden="until-found" vereist is.

Voorbeeld:

• Als u volledige controle wilt over de stijl van het mechanisme voor tonen/verbergen.
• Als de UI-bedieningselementen om de content te tonen/verbergen zich in een ander deel van de DOM bevinden.
• Als u de content niet wilt verbergen nadat deze is getoond.

Hoe wordt dit geïmplementeerd

Het element <details> heeft standaard doorzoekbare en toegankelijke tekst en vereist geen speciale implementatie. Gebruik indien mogelijk <details> in plaats van hidden="until-found".

Als u hidden="until-found" moet gebruiken, volgt u deze instructies:

1. Het kenmerk toepassen: Voeg het HTML-kenmerk hidden="until-found" rechtstreeks toe aan de elementen met de content die je wilt verbergen.
2. Synchroniseer de UI-status: Als de interface gerelateerde statussen heeft die afhankelijk zijn van de zichtbaarheid van de content (bijvoorbeeld ARIA-kenmerken updaten, CSS-klassen openen/sluiten of accordeoniconen draaien):
   • U MOET een event-listener toevoegen voor de gebeurtenis beforematch.
   • Registreer de gebeurtenislistener beforematch rechtstreeks op het element met het kenmerk hidden="until-found". Omdat de gebeurtenis bubbelt, kun je ook gebeurtenisdelegatie gebruiken door één listener te registreren op een bovenliggend element (zoals een tabbladcontainer) om meerdere verborgen gedeelten tegelijk te beheren.
   • Voer in de gebeurtenislistener de logica uit om gerelateerde UI-elementen te synchroniseren (zoals andere geopende tabbladen sluiten of de status van een schakelknop wijzigen).

Voorbeeldcode

Doel: Een verborgen container weergeven waarin de content onzichtbaar blijft voor de gebruiker totdat deze naar een woord in dat gedeelte zoekt.

<details>-element gebruiken

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

Wederzijds uitsluitende kennisgevingen

Als je elkaar uitsluitende contentregio's verwerkt, zoals een exclusieve accordeon, gebruik je het native HTML-element <details> met een gedeeld kenmerk name.

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

Het kenmerk hidden="until-found" gebruiken

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

Aangepaste, elkaar uitsluitende kennisgevingen

Als je aangepaste, elkaar uitsluitende regio's verwerkt die worden beheerd door externe knoppen, zorg je dat alleen het overeenkomende deelvenster zichtbaar blijft. In de gebeurtenishandler beforematch MOET je gerelateerde ARIA-statussen synchroniseren, zoals de instelling aria-expanded="true" op de bedieningsknop.

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

Best practices voor hidden="until-found"

• WEL: Pas randen, opvulling en achtergronden toe op geneste onderliggende wrappers in plaats van rechtstreeks op het element met het kenmerk hidden="until-found". Zo voorkom je onbedoelde verschuivingen in de indeling of visuele restanten terwijl het element verborgen is.
• Pas display: none, visibility: hidden of bijbehorende display- of visibility-CSS-property's NIET rechtstreeks toe op elementen met het kenmerk hidden="until-found". Hierdoor werkt de oorspronkelijke functionaliteit niet meer en wordt de content definitief verborgen in de zoekindex.
• Gebruik hidden="until-found" NIET voor gevoelige informatie, interne gegevenstokens of irrelevante gegevens die niet via de zoekfunctie mogen worden getoond.
• Gebruik hidden="until-found" NIET als vervanging voor tekst die alleen voor schermlezers is (.sr-only).

Browserondersteuning en fallback-strategieën

Vermijd hidden="until-found" NIET vanwege ontbrekende browserondersteuning, omdat de toegankelijkheidsvoordelen veel groter zijn dan de kosten van de implementatie van een fallback.

hidden="until-found"-reserve

Voor standaard UI-elementen zoals accordeons of gedeelten met 'Lees meer' gebruik je JavaScript om functies te detecteren en alle content te tonen als de functie niet wordt ondersteund.

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

Voor elkaar uitsluitende UI-paradigma's (zoals aangepaste exclusieve deelvensters waarin content dezelfde visuele regio deelt), moet de reserveoptie alle content lineair onder het interactieve hoofdgebied extraheren en weergeven, met URL-ankerfragmenten zodat gebruikers rechtstreeks naar de respectieve gedeelten kunnen navigeren.