Minimierte Inhalte mit „hidden=until-found“ zugänglich machen

Joey Arhar

Zusammenklappbare Inhaltsbereiche, die manchmal als Akkordeon bezeichnet werden, sind ein gängiges UI-Muster. Inhalte, die in den minimierten Abschnitten ausgeblendet sind, können jedoch nicht über die Suche auf der Seite gefunden werden. Außerdem ist es nicht möglich, innerhalb minimierter Bereiche eine Verknüpfung zu Textfragmenten herzustellen.

Das HTML-Attribut hidden=until-found und das Ereignis beforematch können diese Probleme lösen. Wenn Sie dem Container für Ihre ausgeblendeten Inhalte hidden=until-found hinzufügen, kann der Browser in diesem ausgeblendeten Bereich nach Text suchen und den Abschnitt anzeigen, wenn eine Übereinstimmung gefunden wird.

Diese Funktionen sind ab Chrome 102 verfügbar. Sehen wir uns an, wie sie funktionieren.

Verwendung

Wenn Ihre Website bereits minimierbare Abschnitte enthält, die durchsuchbar sein sollen, ersetzen Sie die Stile, durch die der Bereich ausgeblendet wird, durch das Attribut hidden=until-found. Wenn Ihre Seite noch einen anderen Status hat, der mit dem Anzeigen oder Ausblenden des Bereichs synchronisiert werden muss, fügen Sie einen beforematch-Ereignis-Listener hinzu, der beim hidden=until-found-Element ausgelöst wird, kurz bevor das Element vom Browser angezeigt wird.

Vorsichtsmaßnahmen

Für eine einheitliche Nutzererfahrung sollten die hidden=until-found-Inhalte ohne die Funktion „Auf der Seite suchen“ sichtbar sein. Nicht alle Nutzer verwenden die Funktion „Auf der Seite suchen“. In Browsern, die hidden=until-found nicht unterstützen, werden ausgeblendete Inhalte wie gewohnt angezeigt, ohne dass die Funktion sichtbar ist.

Wenn Sie möchten, dass Ihre ausgeblendeten Inhalte in Browsern, die hidden=until-found nicht unterstützen, auch bei der Suche berücksichtigt werden, können Sie sie in diesen Browsern jederzeit maximieren. Die Funktion kann durch Prüfen des Vorhandenseins des beforematch-Ereignis-Handlers erkannt werden:

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

hidden=until-found wendet die CSS-Eigenschaft content-visibility:hidden anstelle der display:none-Eigenschaft an, die vom regulären ausgeblendeten Attribut gilt. Dies ist erforderlich, um geschlossene Inhalte zu durchsuchen, hat aber auch folgende Nebenwirkungen:

• Einige Layout-APIs wie getBoundingClientRect melden, dass die ausgeblendeten Inhalte im hidden=until-found-Element Platz belegen und eine Position auf der Seite haben.
• Untergeordnete Knoten des hidden=until-found-Elements werden nicht gerendert, das hidden=until-found-Element selbst hat jedoch weiterhin ein Feld. Das bedeutet, dass CSS-Eigenschaften wie Rahmen und explizite Größe das Rendering beeinflussen.

In der folgenden Demo wird dem Element, auf das hidden=until-found angewendet wurde, ein Rand, ein Rahmen und ein Abstand hinzugefügt. An der Stelle, an der ausgeblendete Inhalte angezeigt werden, ist ein Feld mit einem grauen Rahmen zu sehen, das sich dann mit den ausgeblendeten Inhalten füllt, wenn diese sichtbar gemacht werden. Dies ist das Feld des ausgeblendeten Elements.

Um dieses Problem zu vermeiden, fügen Sie den Rahmen einem Element hinzu, das im Container mit hidden=until-found verschachtelt ist.